androidcolorsmaterial-designrippledesign-guidelines

What should be the color of the Ripple, colorPrimary or colorAccent? (Material Design)


I have reading Material Design Guidelines but I don't know what should be the color of the Ripple if it isn't black (with alpha).

For example, I have an app with colorPrimary = blue, and colorAccent = red. Actually I am using the colorAccent (with alpha), I should use colorPrimary (with alpha) if I want a color different of black to the ripple?

I checked all app of Google but they never use ripples with color.

An image like I have now:

ripple


Solution

  • Use 26% alpha for colored ripples.

    Android L doesn't support theme attributes in color state lists and the <ripple> element doesn't have an alpha channel, but for bounded ripples you can do something like:

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="?android:attr/colorAccent">
        <item android:id="@android:id/mask">
            <color android:color="#42ffffff" />
        </item>
    </ripple>
    

    This won't work for an unbounded ripple. Alternatively, since you know your own accent color, you can either define a 26% alpha version or use a color state list. Either of these will work fine for an unbounded ripple.

    <ripple xmlns:android="http://schemas.android.com/apk/res/android"
            android:color="@color/accent_26" />
    

    res/values/colors.xml:

    <resources>
        ...
        <color name="accent">#ff33b5e5</color>
        <color name="accent_alpha26">#4233b5e5</color>
    </resources>
    

    res/color/accent_alpha26.xml:

    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:color="@color/accent"
              android:alpha="0.26" />
    </selector>