Smooth animation between tabs when using selector - Android

Question

I would like to get the background of the tab animated smoothly to the selected position (just like the default tabIndicator animates between tabs).

Here is how my TabLayout looks like

<android.support.design.widget.TabLayout
        android:layout_marginTop="10dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tabLayout"
        app:tabBackground="@drawable/tab_selector"
        app:tabTextColor="@color/white"
        android:background="@drawable/tab_layout_bg"         
    app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"
        app:tabIndicator="@null"
        app:tabRippleColor="@null">

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab1"/>

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab2"/>

        <android.support.design.widget.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/tab3"/>

    </android.support.design.widget.TabLayout>

Here, Tab 3 is selected. If i select Tab 1 the background should animate from Tab 3 to Tab 1.

I am using selector to change the background of the tabs.

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_selected="true"
        android:drawable="@drawable/tab_layout_fg"/>
    <item
        android:drawable="@drawable/tab_layout_bg"/>
</selector>

Here i am attaching the sample animation. See just the tab bar.

Is it possible to achieve this kind of animation with approach i am following? If not please suggest me another way. I have been working on this from two days. Still can't figure it out.

Thanks in advance.

Nystatin

What is your requirement for minSdkVersion? – Crassus

try these libraries dk-tablayout or NavigationTabStrip – Falter

Answer 1

We've achieved the same effect in our app using TabLayout.

The trick for smooth animation is to use tabIndicator attirbute instead of tabBackground!

You can define a shape drawable (not selector) and assign it to TabLayout by:

app:tabIndicator="@drawable/tab_layout_fg"

This will add a tab indicator with smooth animation that you want to achieve. If you find that tabIndicator color is not reflecting as defined in the drawable file, you can tint the tabIndicator using tabIndicatorColor attribute.

Note: Make sure you're using latest design support library v28.0.0 or material components library for Android X.

Cunha

Combining your answer and @Gabriele answer worked for me. Thank you very much. – Nystatin

Answer 2

Check the @Maulik answer. It is what you are looking for.
Just to integrate the answer, without a custom shape (in your example you are using it) you can just use:

 <com.google.android.material.tabs.TabLayout
      app:tabIndicatorGravity="stretch"
      app:tabIndicatorColor="@color/...."
      ..>

The INDICATOR_GRAVITY_STRETCH allows you to stretch the tab selection indicator across the entire height and width. In this way you can just use the app:tabIndicatorColor without drawable to set the selected color used.
The animation is provided by default.

Reorder

If i don't use the custom shape i am not getting rounded corners. I had to use app:tabIndicator="@drawable/tab_layout_fg" app:tabIndicatorGravity="stretch" app:tabIndicatorColor="@color/colorPrimary" to make it work as i wanted. Thanks for your answer. – Nystatin

@Nystatin I know it. I indicated that the Maulik answer is what you are looking for. It is just to integrate the answer. – Reorder

@GabrieleMariotti how can we set different drawable for each tab ? For center tab I want rectangle and for first and last it should be curved. – Indiscerptible