[TabLayout] ripple is darker than set color

Hi, all my ripples are of color ?attr/colorControlHighlight which I override to #11000000.

However if I override it on tabLayout via

<style name="DefaultTabLayout" parent="Widget.MaterialComponents.TabLayout">
    ...
    <item name="tabRippleColor">?attr/colorControlHighlight</item>
    ...
</style>

Its ripple is still way darker than some component next to it on which I manually set a ripple foreground selector

For completeness, here is the ripple selector I use on my other views

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?attr/colorControlHighlight">

    <item android:id="@id/android:mask">
        <color android:color="@color/colorWhite" />
    </item>

</ripple>

First I thought It was a MDC thing, but then I also override rippleColor of a MaterialButton and that works fine.

Here is a screenshot

You can see both the button and unselected tab pressed, and observe tab being way darker

[Janneman84]

I’m experiencing the same thing in Android 13. It’s impossible to set app:tabRippleColor fully transparent…

What you can do for now is setting it to #0000, which is transparent white (instead of transparent black what android:color/transparent is.

Change white to whatever the background color is. Only problem this way is that it’s still broken in automatic dark mode in Android 13.

These are just workaround though, it’s something broken that hopefully gets fixed someday.

[ArcherEmiya05]

Any update on this? We are not using Material 3 Theme and migrating to it requires a huge amount of time and effort. Now is not a right time for us to do it so we hope that there is an alternative way to fix this. Thanks