In guidance with Material Design, how much darker should the statusbar be than the actionbar? I have a color set for the actionbar at runtime and have no way of knowing this colour at programming time, so how can I get the correct statusbar colour?
I know i can darken a colour using this
this.getSupportActionBar().setBackgroundDrawable(new ColorDrawable(colorPrimary)); float[] hsv = new float[3]; Color.colorToHSV(colorPrimary, hsv); hsv[2] *= 0.8f; int colorPrimaryDark = Color.HSVToColor(hsv); if(Build.VERSION.SDK_INT>=21) Chat.this.getWindow().setStatusBarColor(colorPrimaryDark);
But I'm not sure how much to darken it
Material design color palette was not generated by manipulating the color in HSV. It was done with HSL (Hue, Saturation, Lightness).
Here is a utility class that will darken/lighten a color using HSL
package com.ammar.materialcolorizer; import android.graphics.Color; /** * A utility class for darkening and lightening colors in the same way as * material design color palettes * Created by Ammar Mardawi on 12/4/16. */ public class ColorUtil { /** * Darkens a given color * @param base base color * @param amount amount between 0 and 100 * @return darken color */ public static int darken(int base, int amount) { float[] hsv = new float[3]; Color.colorToHSV(base, hsv); float[] hsl = hsv2hsl(hsv); hsl[2] -= amount / 100f; if (hsl[2] 1) hsl[2] = 1f; hsv = hsl2hsv(hsl); return Color.HSVToColor(hsv); } /** * Converts HSV (Hue, Saturation, Value) color to HSL (Hue, Saturation, Lightness) * Credit goes to xpansive * https://gist.github.com/xpansive/1337890 * @param hsv HSV color array * @return hsl */ private static float[] hsv2hsl(float[] hsv) { float hue = hsv[0]; float sat = hsv[1]; float val = hsv[2]; //Saturation is very different between the two color spaces //If (2-sat)*val 1f) nsat = 1f; return new float[]{ //[hue, saturation, lightness] //Range should be between 0 - 1 hue, //Hue stays the same // check nhue and nsat logic nsat, nhue / 2f //Lightness is (2-sat)*val/2 //See reassignment of hue above }; } /** * Reverses hsv2hsl * Credit goes to xpansive * https://gist.github.com/xpansive/1337890 * @param hsl HSL color array * @return hsv color array */ private static float[] hsl2hsv(float[] hsl) { float hue = hsl[0]; float sat = hsl[1]; float light = hsl[2]; sat *= light
According to Material Design Color Generator, to generate primaryColorDark, you need to darken by 12. Here is how to generate the full color palette exactly as Material Design Color Generator:
setColor("50", ColorUtil.lighten(color, 52), mTv50); setColor("100", ColorUtil.lighten(color, 37), mTv100); setColor("200", ColorUtil.lighten(color, 26), mTv200); setColor("300", ColorUtil.lighten(color, 12), mTv300); setColor("400", ColorUtil.lighten(color, 6), mTv400); setColor("500", ColorUtil.lighten(color, 0), mTv500); setColor("600", ColorUtil.darken(color, 6), mTv600); setColor("700", ColorUtil.darken(color, 12), mTv700); setColor("800", ColorUtil.darken(color, 18), mTv800); setColor("900", ColorUtil.darken(color, 24), mTv900);
Google suggests using the 500 colors as the primary colors in your app and the other colors as accents colors.
Toolbars and larger color blocks should use the 500 color of the primary color of your app.
So primaryColor should be tint 500.
The status bar should be the darker 700 tint of your primary color.
So primaryColorDark should be tint 700.
So I guess the primaryColorDark should be 200 tint darker than the primaryColor.
https://www.google.com/design/spec/style/color.html
One way of knowing exactly how much darker it should be is using Material Color Tool. Just enter the hex value of your primary color and it will generate the light and dark versions for you.
IMHO, how "darker" should it must be, it's on your own.
If you are using Android Studio, when in colors.xml, double-click in the preview of the color, switch to HSV mode, and decrease the brightness. (similar to what are you doing programmatically)
