TabLayout dengan ViewPager2

By | 19 November 2023
0 Comment

Jika kita amati belakagan ini ada perubahan pada pembuatan tab layout pada android. Jika dulu adapternya menggunakan class FragmentPagerAdapter untuk sekarang class tersebut sudah depresiasi dan disarankan untuk menggunakan class FragmentStateAdapter dan disarankan menggunakan ViewPager2. Disini saya coba berbagi pengalaman saya dalam menggunakan viewpager2.

Jika sebelumnya menggunakan viewpager lama seperti dibawah ini :

 <androidx.viewpager.widget.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Ubah menjadi ViewPager2 :

    <androidx.viewpager2.widget.ViewPager2
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

Untuk adapternya sebelumnya menggunakan FragmentPagerAdapter dimana sekarang sudah depresiasi.

public class SectionsPagerAdapter extends FragmentPagerAdapter {

    @StringRes
    private static final int[] TAB_TITLES = new int[]{R.string.tab_text_1, R.string.tab_text_2};
    private final Context mContext;

    public SectionsPagerAdapter(Context context, FragmentManager fm) {
        super(fm);
        mContext = context;
    }

    @Override
    public Fragment getItem(int position) {
        // getItem is called to instantiate the fragment for the given page.
        // Return a PlaceholderFragment.
        return PlaceholderFragment.newInstance(position + 1);
    }

    @Nullable
    @Override
    public CharSequence getPageTitle(int position) {
        return mContext.getResources().getString(TAB_TITLES[position]);
    }

    @Override
    public int getCount() {
        // Show 2 total pages.
        return 2;
    }
}

Ubah menjadi extend FragmentStateAdapter.

public class SectionsPagerAdapter extends FragmentStateAdapter {

    @StringRes
    public static final int[] TAB_TITLES = new int[]{R.string.tab_text_1, R.string.tab_text_2};
    private final Context mContext;

    public SectionsPagerAdapter(Context context, FragmentActivity fragmentActivity) {
        super(fragmentActivity);
        mContext = context;
    }
    

    @NonNull
    @Override
    public Fragment createFragment(int position) {
        return PlaceholderFragment.newInstance(position + 1);
    }

    @Override
    public int getItemCount() {
        return 2;
    }
}

Untuk tab layoutnya yang sebelumnya tinggal masukkan viewpager ke tab layout, untuk viewpager 2 agak sedikit berbeda.

        SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, getSupportFragmentManager());
        
        ViewPager viewPager = binding.viewPager;
        viewPager.setAdapter(sectionsPagerAdapter);
        TabLayout tabs = binding.tabs;
        tabs.setupWithViewPager(viewPager);

Sekarang menjadi seperti dibawah ini.

        //Section Pager for viewpager
        SectionsPagerAdapter sectionsPagerAdapter = new SectionsPagerAdapter(this, this);
        ViewPager2 viewPager = binding.viewPager;
        viewPager.setAdapter(sectionsPagerAdapter);
        TabLayout tabs = binding.tabs;
        //TabMediator untuk viewpager2
        new TabLayoutMediator(tabs, viewPager, (tab, position) -> {
            tab.setText(getString(SectionsPagerAdapter.TAB_TITLES[position]));
        }).attach();

Setelah dijalankan maka hasilnya akan sama dengan viewpager lama. Cuman sudah menggunakan adapter baru dan viewpager2.

Contoh kodenya bisa dilihat di github dengan link berikut : https://github.com/arsipu/ViewPager2Example

Sekian terima kasih.