2

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?

3

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.

0

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.

  • It's a just a button with a black background. I will try out the neutral grey. What do you think about this - increase the brightness (B from HSB) for any color and set that as the ripple color??? It seems to be working for the black background. – Ashwin Oct 27 '15 at 6:45
  • (Oh joy, it seems I can comment.) I have to admit it isn't too easy to imagine without seein it. I (personally) think that while the background is consistently black that could make sense. – Mörkö Oct 27 '15 at 6:49
0

For reference, these are the colors defined in Android AppCompat library.

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

Use ripple_material_dark in dark background / light text or icon.

Use ripple_material_light in light background / dark text or icon.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.