android color between two colors, based on percentage?
I would like to calculate the color depending on a percentage value:
float percentage = x/total;
int color;
if (percentage >= 0.95) {
color = Color.GREEN;
} else if (percentage <= 0.5) {
color = Color.RED;
} else {
// color = getColor(Color.Green, Color.RED, percentage);
}
How can I calculate that last thing? It would be OK if yellow appears at 50%.
I tried this:
private int getColor(int c0, int c1, float p) {
int a = ave(Color.alpha(c0), Color.alpha(c1), p);
int r = ave(Color.red(c0), Color.red(c1), p);
int g = ave(Color.green(c0), Color.green(c1), p);
int b = ave(Color.blue(c0), Color.blue(c1), p);
return Color.argb(a, r, g, b);
}
private int ave(int src, int dst, float p) {
return src + java.lang.Math.round(p * (dst - src));
}
Well this works, but I would like the colors at around 50% being more lightend as I use them on a grey background.. how can I accomplish that?
Thanks!
UPDATE
I tried to convert to YUV like it was suggested in the comments. But I still have the same problem that at 50% it's to dark.
Additional in this solution I have at <5% now white as color. If I do not calculate float y = ave(...);
, but just take float y = c0.y
it's a little better, but at <20% I have then cyan color ... I'm not so much into color-formats :-/
Maybe I'm doing something wrong in the calculation? The constants are taken from Wikipedia
public class ColorUtils {
private static class Yuv {
public float y;
public float u;
public float v;
public Yuv(int c) {
int r = Color.red(c);
int g = Color.green(c);
int b = Color.blue(c);
this.y = 0.299f * r + 0.587f * g + 0.114f * b;
this.u = (b - y) * 0.493f;
this.v = (r - y) * 0.877f;
}
}
public static int getColor(int color0, int color1, float p) {
Yuv c0 = new Yuv(color0);
Yuv c1 = new Yuv(color1);
float y = ave(c0.y, c1.y, p);
float u = ave(c0.u, c1.u, p);
float v = ave(c0.v, c1.v, p);
int b = (int) (y + u / 0.493f);
int r = (int) (y + v / 0.877f);
int g = (int) (1.7f * y - 0.509f * r - 0.194f * b);
return Color.rgb(r, g, b);
}
private static float ave(float src, float dst, float p) {
return src + Math.round(p * (dst - src));
}
}
Solution 1:
You can try using ArgbEvaluator class from android API: http://developer.android.com/reference/android/animation/ArgbEvaluator.html :
new ArgbEvaluator().evaluate(0.75, 0x00ff00, 0xff0000);
Note that there is a bug ( http://code.google.com/p/android/issues/detail?id=36158 ) in alpha channel calculation so you should use values without alpha value.
Solution 2:
My $0.02, I found this answer and coded up the proper solution. (Thanks to Alnitak for the HSV tip!)
For Copy+Paste:
private float interpolate(float a, float b, float proportion) {
return (a + ((b - a) * proportion));
}
/** Returns an interpoloated color, between <code>a</code> and <code>b</code> */
private int interpolateColor(int a, int b, float proportion) {
float[] hsva = new float[3];
float[] hsvb = new float[3];
Color.colorToHSV(a, hsva);
Color.colorToHSV(b, hsvb);
for (int i = 0; i < 3; i++) {
hsvb[i] = interpolate(hsva[i], hsvb[i], proportion);
}
return Color.HSVToColor(hsvb);
}
Solution 3:
As an updated solution, you can use ColorUtils#blendARGB
from the Android support or AndroidX APIs:
val startColor = ContextCompat.getColor(context, R.color.white)
val endColor = ContextCompat.getColor(context, R.color.yellow)
ColorUtils.blendARGB(startColor, endColor, 0.75)