A modern programming language that makes developers happier.

kotlinlang

image.png

Hello , can any one help me to achieve this type progress bar with invers text color &gt;
When there have no progress text color should be gray other wise white where is progress

I have solution. I just use gradients and simple calculations.

```@Composable
fun ValdaiProgressBar(
    text: String,
    modifier: Modifier = Modifier,
    progress: Float = 0f,
    colors: ValdaiProgressBarColors = ValdaiProgressBarDefaults.colors()
) {
    val density = LocalDensity.current
    BoxWithConstraints(modifier.widthIn(min = 100.dp).height(52.dp).clip(RoundedCornerShape(34.dp)).drawBehind {
        drawRect(colors.containerColor)
        drawRoundRect(
            color = colors.progressColor,
            topLeft = Offset.Zero,
            size = Size(size.width * progress, size.height),
            cornerRadius = CornerRadius(50.dp.toPx())
        )
    }) {
        var textWidth by remember {
            mutableStateOf(0)
        }
        val textProgress by remember(progress) {
            derivedStateOf {
                with(density) {

                    (constraints.minWidth * progress - 10.dp.toPx()) / textWidth

                }
            }
        }
        val brush = Brush.horizontalGradient(
            0f to colors.contentProgressColor,
            textProgress - 0.01f to colors.contentProgressColor,

            textProgress - 0.01f to colors.contentColor,
            textProgress to colors.contentColor
        )
        Text(text = text, modifier = Modifier.align(Alignment.CenterStart).padding(start = 10.dp).onPlaced {
            textWidth = it.size.width
        }, style = MaterialTheme.typography.labelMedium.copy(brush = brush))

    }
}```

ValdaiProgressBarColors for my example

```@Immutable
class ValdaiProgressBarColors(
    val containerColor: Color,
    val contentColor: Color,
    val progressColor: Color,
    val contentProgressColor: Color
)

object ValdaiProgressBarDefaults {
    @Composable
    fun colors(
        containerColor: Color = MaterialTheme.colorScheme.primaryContainer,
        contentColor: Color = MaterialTheme.colorScheme.onPrimaryContainer,
        progressColor: Color = MaterialTheme.colorScheme.primary,
        contentProgressColor: Color = MaterialTheme.colorScheme.onPrimary,
    ) = ValdaiProgressBarColors(containerColor, contentColor, progressColor, contentProgressColor)
}```

<@U07EJKCHLHL> Bro your solution worked thanks