Hello community :wave::skin-tone-3: I have a Compose UI question: Does anyone know how to build a ...

# compose

[svenjacobs]

Hello community 👋🏼

I have a Compose UI question:

Does anyone know how to build a linear progress bar with labels like this? The tricky part is that the labels must be white on green and black on grey. Especially when the progress partially “dissects” a label, it must be both white (left side of label) and black (right side of label). How would I go about it? Any hints or keywords where I can start looking for a solution?

[svenjacobs]

This is how it should NOT look like 😉

[Stylianos Gakis]

Draw it twice and clip the one behind with the same path as the progress bar perhaps? The color behind should be black and on the second render with the clip it should be white. Just a thought

[svenjacobs]

Yeah, I just thought about this, too. Do you mean clip with a custom shape or draw the whole element myself with a Canvas?

[Stylianos Gakis]

I was thinking of just making a path for the progress bar itself, but maybe drawing everything on canvas including the text might be easier. I really am not proficient with these kind of apis to be honest with ya

[svenjacobs]

Me neither 😉

[Albert Chang]

You can use some combination of `BlendMode`s. Here's a quick sample.

Untitled.kt

[Albert Chang]

image.png

[Stylianos Gakis]

Albert coming in clutch as always. That’s amazing and does not even render the content twice, thanks for sharing it!

[svenjacobs]

I just need to adapt it a bit, because the progress bar contains two text labels

[Stylianos Gakis]

That should just be adding this modifier to the Row instead of the text

Row(
  horizontalArrangement = Arrangement.SpaceBetween,
  modifier = Modifier.fillMaxWidth().graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
    .drawWithContent {
      drawContent()
      val cornerRadius = CornerRadius(size.height / 2)
      // Overwrite text color
      val progressPercentage = 0.1f
      drawRoundRect(
        color = Color.White,
        size = Size(size.width * progressPercentage, size.height),
        cornerRadius = cornerRadius,
        blendMode = BlendMode.SrcIn
      )
      // Draw green background
      drawRoundRect(
        color = Color(0xFF008528),
        size = Size(size.width * progressPercentage, size.height),
        cornerRadius = cornerRadius,
        blendMode = BlendMode.DstOver
      )
      // Draw gray background
      drawRoundRect(
        color = Color(0xFFD7DBE0),
        cornerRadius = cornerRadius,
        blendMode = BlendMode.DstOver
      )
    }
) {
  Text(
    text = "12345",
    fontWeight = FontWeight.Bold,
    color = Color(0xFF404B5B),
    modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
  )
  Text(
    text = "67890",
    fontWeight = FontWeight.Bold,
    color = Color(0xFF404B5B),
    modifier = Modifier.padding(horizontal = 16.dp, vertical = 8.dp)
  )
}

[Stylianos Gakis]

image.png