[TabLayout] tabRippleColor ignores focused state value

[ryan-w]

Description: When providing a color state list to the tabRippleColor property of the TabLayout control, only the selected state state_selected and pressed state state_pressed are observed. The focused state state_focused is ignored.

Here is the code that restricts the color state list:

material-components-android/lib/java/com/google/android/material/ripple/RippleUtils.java

Line 121 in 3668ca7

// So we only allow two base states: selected, and non-selected. For each base state, we only

That is referenced here:

material-components-android/lib/java/com/google/android/material/tabs/TabLayout.java

Line 2386 in 3668ca7

RippleUtils.convertToRippleDrawableColor(tabRippleColorStateList);

This runs counter to the documentation and the default color state list provided by Material.
https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/tabs/res/color/mtrl_tabs_ripple_color.xml

Expected behavior: Color state list items that set the focused state to true android:state_focused="true" should be selected when the tab item is focused.

Source code:

With the example code below, when you use the keyboard to focus one of the tab items, the background color is red, but it should be green.

File Name: tabs_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:alpha="0.30" android:color="#00ff00" android:state_focused="true"/>
    <item android:alpha="0.30" android:color="#ff0000" />
</selector>

<com.google.android.material.tabs.TabLayout
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:tabRippleColor="@color/tabs_ripple">

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item 1"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item 2"/>

    <com.google.android.material.tabs.TabItem
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Item 3"/>

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

Android API version: 30

Material Library version: 1.4.0

Device: Multiple

To help us triage faster, please check to make sure you are using the latest version of the library.

We also happily accept pull requests.