Jetpack Compose how to build custom Color by overlaying 2 existing colors in code?-CodePudding

Designers often building custom colors by putting existing colros from "our" custom theme one of top of another with alpha applied. How can I calculate resulting Color without applying multiple backgrounds one of top of another? Something like

val background = MaterialTheme.colors.MyDanger.copy(alpha = 0.12f)   MaterialTheme.colors.CustomTint16

Plus is not defined for Colors as it's not Commutative, but is there a way to just put one Color on top on another in Code and apply only result?

CodePudding user response：

Example1:

// Ratio value has to be 0.5 to achive even mix.
//The 3rd argument is ratio(the proportion while blending the colors). eg. 
//If you want 30% of color1 & 70% of color2, then do ColorUtils.blendARGB(***, ***, 0.3F); 
int resultColor = androidx.core.graphics.ColorUtils.blendARGB(color1, color2, 0.5F);

Example2:

public static int mixColor(int color1, int color2, float ratio) {
    final float inverse = 1 - ratio;
    float a = (color1 >>> 24) * inverse   (color2 >>> 24) * ratio;
    float r = ((color1 >> 16) & 0xFF) * inverse   ((color2 >> 16) & 0xFF) * ratio;
    float g = ((color1 >> 8) & 0xFF) * inverse   ((color2 >> 8) & 0xFF) * ratio;
    float b = (color1 & 0xFF) * inverse   (color2 & 0xFF) * ratio;
    return ((int) a << 24) | ((int) r << 16) | ((int) g << 8) | (int) b;
}

CodePudding user response：

val result = color1.compositeOver(color2)

Is what I was looking for