Search code examples
androidrippledrawable

Android Ripple: How do other apps make their ripple so transparent without affecting the original colour of the view


When you look at other apps like yPlan or Google Play Store, their ripple effect on buttons is like a light grey or black that does not change the colour of the whole button.

I want this same effect.

Here is what i tried but its not the same

This is my colour control highlight: Its a grey with 99% alpha

    <color name="colorHighlight">#fc8c969f</color>

And this is my ripple drawer for my button

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="?android:colorControlHighlight">
    <item android:id="@android:id/mask" android:drawable="@android:color/white"/>
    <item android:drawable="@color/colorAccentWith92PercentOpacity"/>
</ripple>

Note the drawable is to make the colour of the button yellow since i cant use android:background twice


Solution

  • <?xml version="1.0" encoding="utf-8"?>
    <!--Use an almost transparent color for the ripple itself-->
    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="#22000000"> 
    
        <!--Use this to define the shape of the ripple effect (rectangle, oval, ring or line). The color specified here isn't used anyway-->
        <item android:id="@android:id/mask">
            <shape android:shape="rectangle">
                <solid android:color="#000000" /> 
            </shape>
        </item>
    
        <!--This is the background for your button-->
        <item>
            <!--Use the shape you want here-->
            <shape android:shape="rectangle">
                <!--Use the solid tag to define the background color you want (here yellow)-->
                <solid android:color="#ffff00"/> 
                <!--Use the stroke tag for a border-->
                <stroke android:width="1dp" android:color="#ffff00"/>
            </shape>
        </item>
    </ripple>