Mobile app version of vmapp.org
Login or Join
Si6392903

: 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

@Si6392903

Posted in: #Android #GoogleMaterialDesign

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?

10.02% popularity Vote Up Vote Down


Login to follow query

More posts by @Si6392903

2 Comments

Sorted by latest first Latest Oldest Best

 

@Deb5748823

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.

10% popularity Vote Up Vote Down


 

@Sue6373160

My five cents would be that you want the ripple to be a quite neutral grey. A picture of the UI would help make the decision easier.

EDIT: From what I understand, the spec has an example that is related to your case where the ripple is pretty much white.

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme