Android design library TabLayout background issues

Question

When I setup the tabBackground attribute of the "22.2.0 Android design library" TabLayout (android.support.design.widget.TabLayout) two problems appear :

• The ripple effect in the tabs is lost
• The tab indicator disappears.

This occurs on both Lollipop and Kitkat devices.

Without the tabBackground settings, both ripple effect and tab indicator work but the background has a default color that is different from the toobar, which is not exactly conform to the material design guidelines.

Please find below the XML :

 <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        app:tabBackground = "?attr/colorPrimary" />

Answer 1

Use android:background="?attr/colorPrimary" instead of app:tabBackground = "?attr/colorPrimary".

If you have a dark primary color, you may also want to change the theme to ThemeOverlay.AppCompat.Dark. This makes the text and the ripple color white.

Full example:

<android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="fixed"
        app:tabGravity="fill"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark" />