What color should be given to the ripple feedback?

One of the major feature of Material Design in the touch feedback that you get on touching widgets. I want to know how should I go about selecting the ripple color?

For example, I have a custom button with a blackbackground and white text. What should be my ripple color? How does android assign a ripple color to its default widgets?

Example 2 – Suppose I have an image which changes dynamically (downloaded). How can I set the ripple color for that image?

Possible solution? – I tried to increase the brightness (B from HSB) of the background color and setting this new color to be the ripple color. It seems to be working. Is it a good way of deciding the ripple color?

Answer

Some useful logic I got from Android SDK packages android.support.v4.graphics and android.support.v7.graphics.

The ripple color is white or black with related transparency and animation. Color (white/black) depends of background color. You must compare contrast of white (#ffffff) and background color by formula defined here. If contrast ratio > 3 than it white ripple (white color is good enough for view on background color), else that black ripple. Google uses this logic for set text color on colorized background like you can see on swathes of Color Palette.

If you have not solid color background like image or photo, than you may use more smart logic to decide what total tone of background. On Android this logic have in android.support.v7.graphics.Palette. Or you can use black ripple with Multiply or Overlay color effect if you platform can do this.

Attribution
Source : Link , Question Author : Ashwin , Answer Author : Constantin

Leave a Comment