CODEWITHSUNDEEP
androidcolorsmaterial-designrippledesign-guidelines
JavierSegoviaCordoba
JavierSegoviaCordoba

Reputation: 6631

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

Upvotes: 71

Views: 67779

Answers (5)

Hsingchien Cheng
Hsingchien Cheng

Reputation: 594

For reference, these are the colors defined in AppCompat.

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

Upvotes: 14

ianhanniballake
ianhanniballake

Reputation: 200110

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.

Upvotes: 42

JavierSegoviaCordoba
JavierSegoviaCordoba

Reputation: 6631

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

ripple color

Upvotes: 15

i.shadrin
i.shadrin

Reputation: 5057

Here is what you are looking for:

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

Upvotes: 54

alanv
alanv

Reputation: 24124

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>

Upvotes: 76

Related Questions