Bu dersimizde daha önce yaptığımız uygulamaya benzer bir uygulama yapacağız ve bunları ele alan tabları ekleyeceğiz.
Tabları gerçekleştirirken her bir tab çeşidini ele alan farklı sınıflar ve adapterler oluşturucaz. Sadece text ile, sadece icon ile, icon+text ile ve de kendi oluşturduğumuz layoutu içeren tablar oluşturup tab konusuna ve tablayout kullanımına hakim olacağız.
Bu derste custom yani kendi oluşturduğumuz layoutu tab olarak göstereceğimiz örneği yapıyoruz.
Yeni öğreneceğimiz kavramlar tablayout, tab gravity ve tab mode, setIcon, setCustomView.
Dikkat etmemiz gereken durumlardan biri tablayoutu oluşturduktan sonra setupWithViewPager methoduna view pageri parametre olarak göndermek. Yoksa tablayoutumuzun içeriği gözükmez.
tablayout.setupWithViewPager(viewpager)
Tüm projeyi indirmek için lütfen burayı tıklayınız.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
public class CustomTab extends AppCompatActivity { List<Fragment> fragmentListesi=new ArrayList<>(); List<String> tabBaslikListesi=new ArrayList<>(); TabLayout tabLayout; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_custom_tab); Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("Custom View Tab Örnek"); ViewPager viewPager= (ViewPager) findViewById(R.id.viewPager); tabLayout= (TabLayout) findViewById(R.id.tabs); setData(new FragmentOne(), "Tab 1"); setData(new FragmentTwo(), "Tab 2"); setData(new FragmentThree(), "Tab 3"); setData(new FragmentFour(), "Tab 4"); setData(new FragmentFive(), "Tab 5"); setData(new FragmentSix(), "Tab 6"); TextTabAdapter adapter=new TextTabAdapter(getSupportFragmentManager(), fragmentListesi, tabBaslikListesi); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); setCustomViewForTabs(0, "Örnek 1", "Tab 1"); setCustomViewForTabs(1, "Örnek 2", "Tab 2"); setCustomViewForTabs(2, "Örnek 3", "Tab 3"); setCustomViewForTabs(3, "Örnek 4", "Tab 4"); setCustomViewForTabs(4, "Örnek 5", "Tab 5"); setCustomViewForTabs(5, "Örnek 6", "Tab 6"); } private void setCustomViewForTabs(int position, String baslik, String altBaslik) { View tabView= LayoutInflater.from(this).inflate(R.layout.tab_item, null); TextView tvBaslik= (TextView) tabView.findViewById(R.id.tabTextTitle); TextView tbSubTitle= (TextView) tabView.findViewById(R.id.tabTextSubTitle); tvBaslik.setText(baslik); tbSubTitle.setText(altBaslik); tabLayout.getTabAt(position).setCustomView(tabView); } public void setData(Fragment yeniSayfaFragment, String baslik){ fragmentListesi.add(yeniSayfaFragment); tabBaslikListesi.add(baslik); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:orientation="vertical" android:padding="5dp"> <TextView android:id="@+id/tabTextTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Title" android:textColor="@android:color/black" android:textSize="15sp"/> <TextView android:id="@+id/tabTextSubTitle" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="2dp" android:layout_marginBottom="2dp" android:text="Sub Title" android:textColor="@android:color/white" android:textSize="12sp"/> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
public class IconTab extends AppCompatActivity { List<Fragment> fragmentListesi=new ArrayList<>(); TabLayout tabLayout; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_icon_tab); Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("Icon Tab Örnek"); ViewPager viewPager= (ViewPager) findViewById(R.id.viewPager); tabLayout= (TabLayout) findViewById(R.id.tabs); setData(new FragmentOne()); setData(new FragmentTwo()); setData(new FragmentThree()); setData(new FragmentFour()); setData(new FragmentFive()); setData(new FragmentSix()); IconTabAdapter adapter=new IconTabAdapter(getSupportFragmentManager(), fragmentListesi); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); setTabIcons(); } private void setTabIcons() { tabLayout.getTabAt(0).setIcon(R.drawable.facebook); tabLayout.getTabAt(1).setIcon(R.drawable.googleplus); tabLayout.getTabAt(2).setIcon(R.drawable.instagram); tabLayout.getTabAt(3).setIcon(R.drawable.netflix); tabLayout.getTabAt(4).setIcon(R.drawable.twitter); tabLayout.getTabAt(5).setIcon(R.drawable.whatsapp); } public void setData(Fragment yeniSayfaFragment){ fragmentListesi.add(yeniSayfaFragment); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_alignParentTop="true" android:background="?attr/colorPrimary" > </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tabs" android:background="@color/colorPrimary" app:tabGravity="fill" app:tabMode="fixed" > </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/viewPager" ></android.support.v4.view.ViewPager> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
public class MainActivity extends AppCompatActivity implements View.OnClickListener { Button btnTextTab, btnIconTab, btnCustomTab; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("Tablayout Örnek"); btnTextTab = (Button) findViewById(R.id.btnTextTab); btnIconTab= (Button) findViewById(R.id.btnIconTab); btnCustomTab= (Button) findViewById(R.id.btnCustomTab); btnTextTab.setOnClickListener(this); btnIconTab.setOnClickListener(this); btnCustomTab.setOnClickListener(this); } @Override public void onClick(View v) { Intent intent=null; switch (v.getId()) { case R.id.btnTextTab: intent=new Intent(this, TextTab.class); startActivity(intent); break; case R.id.btnIconTab: intent=new Intent(this, IconTab.class); startActivity(intent); break; case R.id.btnCustomTab: intent=new Intent(this, CustomTab.class); startActivity(intent); break; } } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@android:color/white"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_alignParentTop="true" android:background="?attr/colorPrimary" > </android.support.v7.widget.Toolbar> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_centerInParent="true" android:orientation="vertical"> <Button android:id="@+id/btnTextTab" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="Tabs with Text" /> <Button android:id="@+id/btnIconTab" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="Tabs with Icon" /> <Button android:id="@+id/btnCustomTab" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_margin="10dp" android:text="Custom Tabs" /> </LinearLayout> </RelativeLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
public class TextTab extends AppCompatActivity { List<Fragment> fragmentListesi=new ArrayList<>(); List<String> tabBaslikListesi=new ArrayList<>(); TabLayout tabLayout; @Override protected void onCreate(@Nullable Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_text_tab); Toolbar toolbar= (Toolbar) findViewById(R.id.toolbar); toolbar.setTitle("Text Tab Örnek"); ViewPager viewPager= (ViewPager) findViewById(R.id.viewPager); tabLayout= (TabLayout) findViewById(R.id.tabs); setData(new FragmentOne(), "Tab 1"); setData(new FragmentTwo(), "Tab 2"); setData(new FragmentThree(), "Tab 3"); setData(new FragmentFour(), "Tab 4"); setData(new FragmentFive(), "Tab 5"); setData(new FragmentSix(), "Tab 6"); TextTabAdapter adapter=new TextTabAdapter(getSupportFragmentManager(), fragmentListesi, tabBaslikListesi); viewPager.setAdapter(adapter); tabLayout.setupWithViewPager(viewPager); setTabIcons(); } public void setData(Fragment yeniSayfaFragment, String baslik){ fragmentListesi.add(yeniSayfaFragment); tabBaslikListesi.add(baslik); } private void setTabIcons() { tabLayout.getTabAt(0).setIcon(R.drawable.facebook); tabLayout.getTabAt(1).setIcon(R.drawable.googleplus); tabLayout.getTabAt(2).setIcon(R.drawable.instagram); tabLayout.getTabAt(3).setIcon(R.drawable.netflix); tabLayout.getTabAt(4).setIcon(R.drawable.twitter); tabLayout.getTabAt(5).setIcon(R.drawable.whatsapp); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" xmlns:app="http://schemas.android.com/apk/res-auto" android:orientation="vertical"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:layout_alignParentTop="true" android:background="?attr/colorPrimary" > </android.support.v7.widget.Toolbar> <android.support.design.widget.TabLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/tabs" android:background="@color/colorPrimary" app:tabGravity="fill" app:tabMode="scrollable" > </android.support.design.widget.TabLayout> <android.support.v4.view.ViewPager android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/viewPager" ></android.support.v4.view.ViewPager> </LinearLayout> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
public class TextTabAdapter extends FragmentStatePagerAdapter { List<Fragment> fragmentListesi=new ArrayList<>(); List<String> tabBaslikListesi=new ArrayList<>(); public TextTabAdapter(FragmentManager fm, List<Fragment> fraList, List<String> baslikList) { super(fm); this.fragmentListesi=fraList; this.tabBaslikListesi=baslikList; } @Override public Fragment getItem(int position) { return fragmentListesi.get(position); } @Override public int getCount() { return fragmentListesi.size(); } @Override public CharSequence getPageTitle(int position) { return tabBaslikListesi.get(position); } } |
Hocam Ben C# ve Php yazılımcısı olarak Android Yazılımına yenı basladım her ne kadar zorlansamda sayende cok sey ogrendım ve bana cok sey kattı ellerın ve agzına saglık basarılar