What Should Be the Color of the Ripple, Colorprimary or Coloraccent? (Material Design)

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

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>

Changing color of Ripple Effect

You can set this as your views background:

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

For more details see this question on stackoverflow:

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

And you can use this library for lower apis:

https://github.com/traex/RippleEffect

Material Components Default to colorAccent instead of colorPrimary

Use the Material Components Library 1.1.0 or later.

The default style of the MaterialButton is:

    <style name="Widget.MaterialComponents.Button" parent="Widget.AppCompat.Button">
        <item name="backgroundTint">@color/mtrl_btn_bg_color_selector</item>
        <!-- .... -->
    </style>

Starting from the version 1.1.0 the @color/mtrl_btn_bg_color_selector is based on the ?attr/colorPrimary:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorPrimary" android:state_enabled="true"/>
  <item android:alpha="0.12" android:color="?attr/colorOnSurface"/>
</selector>

In the version 1.0.0 the selector was based on ?attr/colorAccent:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:color="?attr/colorAccent" android:state_enabled="true"/>
  <item android:color="@color/mtrl_btn_bg_color_disabled"/>
</selector>

How to use light ripple on Material Button in Android

Yes, there is the way.

Create xml (button.xml for example):

<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
    android:color="@color/white">
    <item android:drawable="@drawable/button_ripple" />
</ripple>

Create button_ripple.xml:

<?xml version="1.0" encoding="UTF-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <size
        android:width="200dp"
        android:height="50dp"/>
    <solid
        android:color="@color/accent" />                
</shape>

Change android:color="@android:color/white" in button.xml to needed color for ripple effect and assign button.xml as a background to your button.

@color/accent is the normal state button color.

---

Related Topics