s

    Sam

    1 year ago
    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)
    r

    romainguy

    1 year ago
    How do you verify it's the right color?
    s

    Sam

    1 year ago
    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.
    I am running on an actual device, a new Pixel 4a
    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)
        }
    So it may not actually be related to wideColorGamut/p3, but rather
    Modifier.background
    r

    romainguy

    1 year ago
    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
    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)
    s

    Sam

    1 year ago
    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

    nickbutcher

    1 year ago
    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
    s

    Sam

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