Search code examples
androidandroid-tablayoutmaterial-components-androidandroid-viewpager2

TabLayoutMediator not preserving TabItem attributes


I have a simple setup using ViewPager2 and TabLayout with preset TabItems:

...

        <com.google.android.material.tabs.TabLayout
            android:id="@+id/tabs"
            android:layout_width="0dp"
            android:layout_height="64dp"
            app:tabTextColor="@color/c0696D7"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/palettesToggle"
            app:layout_constraintTop_toTopOf="parent"
            app:tabBackground="@color/cEEEEEE"
            app:tabIndicatorColor="@color/cFFFFFF"
            app:tabGravity="fill"
            app:tabUnboundedRipple="true"
            app:tabIconTint="@color/palettes_icon_tint"
            app:tabIndicatorGravity="stretch"
            app:tabMode="fixed">

            <com.google.android.material.tabs.TabItem android:icon="@drawable/palettes_layers" />

            <com.google.android.material.tabs.TabItem android:icon="@drawable/palettes_view" />

            <com.google.android.material.tabs.TabItem android:icon="@drawable/palettes_properties" />

            <com.google.android.material.tabs.TabItem android:icon="@drawable/palettes_blocks" />

            <com.google.android.material.tabs.TabItem android:icon="@drawable/palettes_blocks" />

            <com.google.android.material.tabs.TabItem android:icon="@drawable/palettes_settings" />

        </com.google.android.material.tabs.TabLayout>

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

...

and the following wiring code:

TabLayoutMediator(tabs, viewPager) { tab, position ->

        }.attach()

The following setup ignores the TabItem icon attribute, and I see empty tabs. It seems that TabLayoutMediator completely overrides the defined xml attributes and i must reset those attributes as part of the TabConfigurationStrategy callback. Am I missing something?


Solution

  • The method TabLayoutMediator.attach() calls the method tabLayout.removeAllTabs(); which removes all tabs and then adds tabs again.

    Check also the official doc:

    When creating an instance of this class, you must supply an implementation of TabLayoutMediator.TabConfigurationStrategy in which you set the text of the tab, and/or perform any styling of the tabs that you require.

    Something like:

    new TabLayoutMediator(tabs, viewpager, new TabLayoutMediator.TabConfigurationStrategy() {
          @Override public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
            //Configure your tabs...
            tab.setText(...);
            tab.setIcon(...);
          }
        }).attach();
    

    or:

     TabLayoutMediator(tabs, viewpager,
        TabLayoutMediator.TabConfigurationStrategy { tab, position ->
            //Configure tabs..
            when (position) {
                0 -> { tab.text = "..."}
                1 -> { tab.text = "..."}
            }
        }).attach()