What should be the color of the Ripple, colorPrima

Question

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:

Answer 1

The Widget.Material.Button style uses the btn_default_material.xml as its background:

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

Note that the ripple color is ?attr/colorControlHighlight which by default is #40ffffff or #40000000 (for dark and light themes, respectively) as mentioned in the touch feedback guide.

As you've noticed, ripples are used subtle indications of touch feedback, hence why they do not use colorPrimary or colorAccent by default. This is consistent with the changes made in Android 4.4 (Kitkat) which made the default selector colors neutral by default.

Answer 2

Here is what you are looking for:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
   ...
   <item name="colorControlHighlight">@color/ripple_material_dark</item>
   ...
</style>

Answer 3

For reference, these are the colors defined in AppCompat.

<color name="ripple_material_dark">#33ffffff</color>
<color name="ripple_material_light">#1f000000</color>`

Answer 4

This is the reply that Roman Nurik give me in twitter to this question:

Roman Nurik
@romannurik

@dahnark @romainguy it varies by situation, but rarely do you want to use the accent color. i'd say in general neutral or primary

Answer 5

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>