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

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:

Solution 1

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>

Solution 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>

Solution 3

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.

Solution 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

Solution 5

For reference, these are the colors defined in AppCompat.

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

View more solutions

Comments

[JavierSegoviaCordoba]

I think that Google has a problem with touch feedback. For example, the scroll effect has neutral color in Play Store, Gmail, Chrome... but in Youtube is red, Play Books is blue... They should add a post inside Material Design Guidelines that talk about this.

[JavierSegoviaCordoba]

They has other guide, but it should be updated... developer.android.com/design/style/touch-feedback.html

[alanv]

In general this is correct, and you wouldn't want to use a colored ripple for a large area.

[JavierSegoviaCordoba]

That is not the question, is about Google Guidelines recommend use color primary vs color accent in the ripples. You can set the ripple color easily with colorControlHighlight in your style.

[alanv]

I'm the Android framework engineer who wrote the Material styles and themes. It's 26% alpha for colored ripples. Yes, you can also set this in your theme, or in an overlay theme, using one of the latter two options.

[JavierSegoviaCordoba]

Okay. Really I had this problem because I saw this vídeo: material-design.storage.googleapis.com/publish/v_2/…. Then I used colorAccent in ripples, but my navigation drawer items use colorPrimary when are selected... this was a problem because the red ripple over a blue selected item was awful... In that tabs is really great. Maybe I should use color accent ripples for some things, and color primary for others? With your code is easy to do that.

[alanv]

Generally you'll want to stick to colorAccent or colorControlHighlight (the default gray one) ripples for showing over background (the default white/black) color or primary color, respectively.

[Zsolt Safrany]

@alanv Why do we have to set an alpha for our ripple color? The ripple drawable already adds alpha to the color we set, doesn't it? If, for instance, I set colorControlHighlight to pure black then the ripple color behind my toolbar action buttons is not pure black; there is a first ripple with lots of alpha and after it a second one (best visible with a long click) with less alpha (but still not pure black). So how come there is already some alpha in the ripple even though I set an opaque color?

[alanv]

colorAccent is opaque, so the example here relies on color blending to achieve 26% alpha. The default ripple color, colorControlHighlight has the opacity built-in and you would use @color/white as the mask color.

[Zsolt Safrany]

@alanv Thanks for your answer! I get what you are saying but then how is it possible that when I set pure black (#000) as my colorControlHighlight then the ripple color that I observe behind my action buttons (on my toolbar) is not pure black (already contains some alpha); even though the set ripple color (colorControlHighlight) is opaque, contains no alpha and there is also no mask. Where does that alpha come from? Does perhaps the RippleDrawable itself add some extra alpha?

[alanv]

The current implementation of RippleDrawable splits the color into a foreground (expands) and background (fades in), so pure black will show 50% black when keyboard focused (just the background) or 100% black when touched and the pressed state animation finishes (both foreground and background). This is still subject to change, so we haven't exposed any APIs for controlling them separately.

[w3bshark]

Is the 26% value documented anywhere other than having to reverse engineer it through the standard themes? I feel like other people should know this information too if they want to follow the ripple guidelines. Thanks, @alanv! This color looks much better now that I have the alpha right.

[alanv]

It is part of the Material spec for ripples, but I do not think that portion of the spec has been published yet (still WIP, as evidenced by the ripple behavior changing between every release ;) ).

[iCantC]

why ripple_material_light is a dark shade and ripple_material_dark a light shade, am I missing something?

[RiccardoCh]

@iCantC because on dark theme ripple needs to be light to be visible and vice versa

[William T. Mallard]

I was hoping to go way off Material regulations and have a ripple of a different color, but would need a ripple opacity parameter so I could set it to 100%.