AndroidPub
Published in

AndroidPub

The Missing Custom Ripple Effect Library

ADA | Adam Deconstructs Android

San Francisco Bay Photo Credit: Louis Hurwitz

Android L is missing something important. It brought the Ripple Effect as a form of touch feedback, doing away with fully opaque selectors, but omitted an easy way to customize both the ripple and background color via xml attributes. I built the CustomRippleView library to create a seamless ripple customization starting with the TextView.

GitHub:

The ripple is clever design because it buys time for an event to occur. The user’s attention shifts to the button to gauge if the event is happening, and not to the operation itself. The effect produces perceived performance of a system. Also, it mimics nature; anyone seeing such a ripple would expect the ripple to dissipate naturally. It’s a powerful concept, unfortunately relegated to trivial, but that is false. The best companies care about these details, not because they have the resources, but because beauty, aesthetics, form and function all matter in the end.

See the Quick Implementation section directly below to quickly add the CustomRippleView to your app, and/or read on for more on how it is built.

Quick Implementation

Declare the library in gradle and call the desired files.

build.gradle (app module)

compile 'com.ebay.customrippleview:customrippleview:1.1'

Define the rippleColor and backgroundColor attributes. If you don’t specify the attributes below the view will use the default value of gray.

recycler_headercell.xml

RetroRecycler Sample App (API level > 21, left and API level < 21, right)

How Custom Ripple View Is Made

I built a library in order to implement custom ripples by adjusting 2 attributes in the XML layout. To implement the custom ripple effect for the type of view desired, create a custom view and extend the desired view type. I implemented this with the RippleTextView to start. There’s a myriad of views the ripple effect would be useful for. Code contributions to the GitHub project are welcome!

Alternative Solutions

Prior to this library one could define a theme to a view, implement a default gray ripple using a background xml attribute, or create numerous drawable xmls for customization.

Theme

Setting a view’s theme is almost as quick as using this library and achieves the custom ripple effect.

Set the ripple effect with the background attribute.

Define the custom ripple color with the colorControlHighlight attribute.

Background or foreground XML

The downside here is the inability to customize the background or ripple.

android:background="?attr/selectableItemBackground"
android:foreground="?attr/selectableItemBackground"
orandroid:background="?attr/selectableItemBackgroundBorderless"
android:foreground="?attr/selectableItemBackgroundBorderless"
and android:focusable="true"

Drawables

By building drawables you have the customization, but it takes more time and creates more resources than needed.

API Level 21

API Pre 21

Selector in normal state

Selector in pressed state

Behind The Scenes: Custom Ripple View

Creating a Custom View — Step 1 of 4

Create a Custom View extending the type of View you’d like to implement the Ripple Effect on. In this sample I customize the Ripple Effect for a TextView.

RippleTextView.java

RippleTextView constructors

Create Custom Attributes That Can Be Defined In XML Layouts — Step 2 of 4

1. Define custom attributes for your view in a <declare-styleable> resource element.

res > values > attrs_ripple_text.xml

2. Set default color value for Ripple Effect background.

res > values > color.xml

3. Receive attributes in Custom View At Runtime.

RippleTextView.java

Receive attributes in Custom View At Runtime.

Create RippleDrawable Programmatically— Step 3 of 4

RippleEffect.java

  1. Customize Ripple Effect color based on XML attribute
  2. Manage backwards compatibility (pre API 21) for Selector

RippleTextView.java

RippleTextView.java with RippleEffect.addRippleEffect() method

Implement! Use Custom View To Specify Background and Ripple Colors As Attributes In XML Layout — Step 4 of 4

Define the background color and ripple color. If you don’t specify the attributes below the view will use default values.

recycler_headercell.xml

You can also disable rippling with the rippleEnabled attribute. Be sure to keep backgroundColor attribute to customize the View’s background color as the normal background attribute will not respond with the custom view.

Lastly, here is an example of Instacart’s app who has implemented a fun custom ripple, and Medium who is using the default gray ripple effect.

Resources

I’m Adam Hurwitz — hit the clapping hands icon and check out the rest of my writing if you enjoyed the above | Thanks!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store