View Pager ile TabLayout Kullanmak

TabLayout: Ekranın üst kısmında bulunan sekmelerin, yatay düzlemde görüntülenmesini sağlayarak belirli hedeflere ulaşılmasını sağlayan yapıdır.

ViewPager: Kullanıcının parmak hareketiyle ekranlar arasında sağa ya da sola doğru geçiş yapmasını sağlayan bir layout yöneticisidir. Fragment ile kullanılırlar ve sayfalar da Pager Adapter ile oluşturulur. (FragmentPagerAdapter ve FragmentStatePagerAdapter)

Örnek Uygulama için aşağıdaki adımlar takip edilebilir.

Adım 1 : activitymain.xml içine tabLayout ve ViewPager2 eklenir.

<com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:tabBackground="@android:color/holo_orange_light"
        app:tabIndicator="@color/colorAccent"
        app:tabIndicatorColor="#3F51B5"
        app:tabIndicatorHeight="2dp"
        app:tabTextColor="#673AB7" >
    </com.google.android.material.tabs.TabLayout>

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/viewpager2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/tabLayout" />

Adım 2 : Kullanılacak tab kadar fragment ve ilgili layout lar eklenir.

İlgili java paketi üzerinde New > Fragment > Fragment (Blank) ile eklenip onCreateView metodu dışındakiler kaldırılarak temizlenebilir.

Adım 3 : MainActivity sınıfı içinde Tablayout, ViewPager2 tanımlanır.

private TabLayout tablayout;
private ViewPager2 viewpager2;

onCreate metodu içinde bağlanır:

tablayout = findViewById(R.id.tabLayout);
viewpager2 = findViewById(R.id.viewpager2);

Adım 4 : Fragment ların tutulacağı, Fragment sınıfından nesne türetecek olan bir ArrayList oluşturulur ve ilgili fragmentlar eklenir.

private ArrayList<Fragment> fragmentList = new ArrayList<>();

onCreate metodu içinde liste doldurulur:

    fragmentList.add(new Fragment_One());
    fragmentList.add(new Fragment_Two());
    fragmentList.add(new Fragment_Three());

Adım 5 : Tab isimlerinin tutulacağı bir ArrayList oluşturulur.

private ArrayList<String> tabTitles = new ArrayList<>();

onCreate metodu içinde liste doldurulur:

    tabTitles.add("Tab 1");
    tabTitles.add("Tab 2");
    tabTitles.add("Tab 3");

Adım 6 : MainActivity içinde inner class olarak FragmentStateAdapter dan kalıtım alan bir adapter oluşturulur. metotları ve ilgili constructor çağrılır.

private class MyFragmentAdapter extends FragmentStateAdapter {    
   public MyFragmentAdapter(@NonNull FragmentActivity fragmentActivity) {
        super(fragmentActivity);
    }

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return fragmentList.get(position);
    }

    @Override
    public int getItemCount() {
        return fragmentList.size();
    }
}

Adım 7 : MainActivity onCreate metodu içerisinde inner class taki adapterdan bir nesne oluşturulur. viewpager2 içine tanımlanır.

    MyFragmentAdapter adapter = new MyFragmentAdapter(this);
    viewpager2.setAdapter(adapter);

Adım 8 : TabLayoutMediator nesnesi oluşturulup içine tablayout, viewpager, tab isimleri tanımlanır. Aşağıdaki ifadenin yazımı konusunda kırmızı ampul kullanılarak yükseltme gerekebilir !

new TabLayoutMediator(tablayout, viewpager2,
(tab, position)->tab.setText(tabTitles.get(position))).attach();