Android: can you have a ripple effect whose default state color is transparent?

Question

Something like the following, but it doesn't work. If I switch the drawable color to something like blue, it works.

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:drawable="@android:color/transparent"/>
</ripple>

If the drawable is transparent, there is no color to ripple against. — iheanyi, Feb 03 '15 at 21:19
I have a clickable linear layout that contains an ImageView and a TextView. both those child views have different colors. I am trying to apply the ripple effect to the entire linear layout, but keep the different background colors of the child views. — ZakTaccardi, Feb 03 '15 at 21:22
If you want to have a **ripple on a transparent shape**, this answer shows how to do it: https://stackoverflow.com/a/41097020/4034572 — Albert Vila Calvo, Sep 03 '19 at 12:51

score 84 · Accepted Answer · edited Apr 23 '15 at 20:14

84

It's necessary to add a mask:

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
     <item android:id="@android:id/mask">
       <color android:color="@android:color/white" />
     </item>
</ripple>

edited Apr 23 '15 at 20:14

nhaarman

98,571
55
246
278

answered Apr 21 '15 at 16:08

JMPergar

1,906
1
19
21

1

Works once I noticed that the mask color was WHITE (which makes sense, once you think about it). – SMBiggs Feb 08 '16 at 17:07
4

it can be any color, or any drawable, but not transparent. – ataulm May 10 '16 at 14:10
Best answer, exacly what i needed! – Luis Jul 28 '16 at 12:39
How to do the same thing in java dynamically? – dev1993 Dec 18 '16 at 13:33
Relevant: https://stackoverflow.com/questions/30556160/rippledrawable-mask-color-what-is-it-for – loeschg Oct 20 '17 at 18:10

score 2 · Answer 2 · answered Jul 09 '15 at 07:53

Somehow, the @JMPergar 's answer didn't work for me.

However, I was able to think of this workaround: if a colour behind your transparent button is solid (not a gradient or a speckled picture) - you can use that color as a main button's unpressed one.

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

    <item>
        <shape>
            <corners android:radius="@dimen/profile_transparent_button_corner_radius" />
            <solid android:color="@color/profile_background" />
        </shape>
    </item>
</ripple>

where @color/profile_transparent_button_pressed is a colour to highlight a button, and @color/profile_background - the colour of a layout behind this button. It works exactly as expected, but still definitely is a workaround so you go try @JMPergar 's answer first.

As he admits, this doesn't really answer the question, it's simply a *bad* workaround. While having a solid background color makes the ripple work, that's exactly what we want to avoid. Why? Because this background color that the user *never actually sees* creates unnecessary **overdraw** all the time, even when there's no ripple. Check by yourself: go to the developer options and enable overdraw (Debug GPU Overdraw -> Show overdraw areas). You'll see that the background is painted *twice* with the *same* color, which is a waste. Of course for an small button a bit of overdraw is acceptable. — Albert Vila Calvo, Sep 03 '19 at 11:49
I've found how you can have a **ripple on a transparent shape** here: https://stackoverflow.com/a/41097020/4034572 — Albert Vila Calvo, Sep 03 '19 at 12:50

Android: can you have a ripple effect whose default state color is transparent?

2 Answers2

Linked