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

1

4

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

Languishing answered 2/9, 2015 at 16:55 Comment(0)
K
10
<?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>
Keaton answered 2/9, 2015 at 19:18 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.