Style specific tab using Tablayout and ViewPager2

问题

I'm looking for a way how to style tabs independently like following image:

In this case we have different icon, background color and tabIndicator color. Looks like needs to be programmatically because tabs are loaded base on pager adapter.

UPDATE

After applying @Chhatrasal Singh Bundela answer

Seams to have a padding in the tab, do you know how to make it take all tab area.

回答1:

You can use TabLayoutMediator class to use viewpager2 with TabLayout. The callback gives you privilege to customize each tab of the TabLayout.

new TabLayoutMediator(mBinding.tabLayout,
                mBinding.viewPager,
                new TabLayoutMediator.OnConfigureTabCallback() {
                    @Override
                    public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                        // tab -> refernce of the tab & position -> position of the tab
                        FrameLayout frameLayout = new FrameLayout(getContext());
                        //build your customView .
                        frameLayout.addView(/*Add all the child views. */);
                                      //or
                        //inflate your customView xml.
                        tab.setCustomView(frameLayout);
                    }
                })
                .attach();;

回答2:

It works for me using the below code.

layout: item_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_30sdp">

    <TextView
        android:id="@+id/textView_tabTitle"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/transparent"
        android:gravity="center"
        android:text="Tab text here"
        android:textColor="@color/black"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

public String[] tabTitles = new String[]{"Tab 1", "Tab 2", "Tab 3", "Tab 4"};

new TabLayoutMediator(tabLayout, viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
            @Override
            public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
                View v = LayoutInflater.from(baseActivity).inflate(R.layout.item_tab, null, false);
                TextView tv = v.findViewById(R.id.textView_tabTitle);
                tv.setText(demoCollectionPagerAdapter.tabTitles[position]);
                FrameLayout frameLayout = new FrameLayout(baseActivity);
                frameLayout.addView(v);
                tab.setCustomView(v);
            }
        }
        ).attach();

来源：https://stackoverflow.com/questions/61148494/style-specific-tab-using-tablayout-and-viewpager2

标签

android

android-viewpager