How do I enable P3 color for Jetpack Compose? I have `<activity android:colorMode="wideColorGamut...

# compose

[Sam]

How do I enable P3 color for Jetpack Compose? I have <activity android:colorMode="wideColorGamut" …> in AndroidManifest.xml and using the colorSpace but it definitely does not look like the right color:

Color(red = r, green = g, blue = b, alpha = 1f, colorSpace = ColorSpaces.DisplayP3)

[romainguy]

How do you verify it's the right color?

[Sam]

Looking at the comp in Sketch on my Apple Pro Display XDR, plus looking at the same color values on our iPhone app that is using P3 color profile as well.

[Sam]

I am running on an actual device, a new Pixel 4a

[Sam]

The problem seems to be with drawLayer that takes is able to take a background brush of type LinearGradient but only uses the last color within the gradient:

SurfaceLayout(
        modifier.drawLayer(shadowElevation = elevationPx, shape = shape)
            .zIndex(elevation.value)
            .then(if (border != null) Modifier.border(border, shape) else Modifier)
            .background(
                brush = LinearGradient.pink,
                shape = shape
            )
            .clip(shape)
    ) {
        Providers(ContentColorAmbient provides contentColor, children = content)
    }

[Sam]

So it may not actually be related to wideColorGamut/p3, but rather Modifier.background

[romainguy]

To check the color I would recommend taking a screenshot from Android Studio, it should export a P3 PNG file and you can inspect the color there instead

[romainguy]

Much better than trying to compare between displays (esp. since on Android there are different color modes in the settings, if you really want to do side by side comparisons I would recommend picking “Natural” as your display color mode)

[Sam]

As I look more at the code, I think it is my misunderstanding of LinearGradient , specifically the endX and endY parameters. The brush is expected to know the size of the button/surface, these values look to be relative to the size of what is being drawn. I had the wrong values here, effectively saturating the whole surface with teh second color.

[nickbutcher]

take a look at the drawWithCache Modifier which should help you to create and cache your gradient brush when the size is known e.g. https://github.com/android/compose-samples/blob/main/Jetsnack/app/src/main/java/com/example/jetsnack/ui/components/Gradient.kt#L42

[Sam]

@nickbutcher this is exactly what I used last night and it worked great!