[TabLayout] ripple is darker than set color

[ursusursus]

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

[drchen]

Is this still an issue with the Material 3 themes/styles?

[drchen]

I'll close this issue for now due to no further info available. Please feel free to reopen it if this is still an issue with Material 3 themes/styles.

[ArcherEmiya05]

Getting a related issue with ripple

<com.google.android.material.tabs.TabLayout
            android:id="@+id/tab_layout"
            app:tabIndicatorColor="@color/highlighted"
            app:tabIndicatorAnimationMode="elastic"
            app:tabIndicator="@drawable/solid_rounded_blue"
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            app:tabIndicatorFullWidth="true"
            app:tabIndicatorGravity="center"
            app:tabIndicatorHeight="30dp"
            app:tabRippleColor="@android:color/transparent"/>

But this is what we are getting in Android 13

[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

[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.

[huangssh]

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.

Try this for a solution app:tabRippleColor="@null"

[Janneman84]

Try this for a solution app:tabRippleColor="@null"

Wow this actually works! I can't believe I hadn't tried his myself...