https://kotlinlang.org logo
Channels
Powered by
#compose
Title
# compose
s

Sam

10/09/2020, 12:27 AM
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:
Copy code
Color(red = r, green = g, blue = b, alpha = 1f, colorSpace = ColorSpaces.DisplayP3)
r

romainguy

10/09/2020, 12:29 AM
How do you verify it's the right color?
s

Sam

10/09/2020, 12:31 AM
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:
Copy code
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

10/09/2020, 1:02 AM
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

10/09/2020, 1:04 AM
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.
n

nickbutcher

10/09/2020, 1:43 PM
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

10/09/2020, 5:16 PM
@nickbutcher this is exactly what I used last night and it worked great!
12 Views
Powered by