Change color of text as progressbar fills jetpack Compose Android

Question

How to change the color of the text as the progressbar fills in jetpack Compose Android

enter image description here

I did tried everything also gradient and also to search on internet , no results

Answer 1

You can easily do this using BlendModes as

Box(
    modifier = Modifier
        .border(2.dp, Color.Gray, RoundedCornerShape(8.dp))
        .clip(RoundedCornerShape(8.dp))
        .fillMaxWidth()
        .drawWithContent {
            with(drawContext.canvas.nativeCanvas) {
                val checkPoint = saveLayer(null, null)

                // Destination
                drawContent()

                // Source
                drawRect(
                    color = Color.Gray,
                    size = Size(size.width * progress, size.height),
                    blendMode = BlendMode.SrcOut
                )
                restoreToCount(checkPoint)
            }
        }
        .padding(12.dp),
    contentAlignment = Alignment.Center
) {
    Text(text = "Video starting in 3 seconds", color = Color.Gray, fontSize = 20.sp)
}

just assign a progress parameter and animate it. I made a full implementation

@Preview
@Composable
private fun ColorProgressBar() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(10.dp)
    ) {

        var target by remember {
            mutableStateOf(0f)
        }

        val progress by animateFloatAsState(
            targetValue = target,
            animationSpec = tween(durationMillis = 3000, easing = LinearEasing)
        )
        Button(
            modifier = Modifier.fillMaxWidth(),
            onClick = {
                target = if (target == 0f) 1f else 0f
            }) {
            Text("Start")
        }
        Spacer(modifier = Modifier.height(20.dp))

        Box(
            modifier = Modifier
                .border(2.dp, Color.Gray, RoundedCornerShape(8.dp))
                .clip(RoundedCornerShape(8.dp))
                .fillMaxWidth()
                .drawWithContent {
                    with(drawContext.canvas.nativeCanvas) {
                        val checkPoint = saveLayer(null, null)

                        // Destination
                        drawContent()

                        // Source
                        drawRect(
                            color = Color.Gray,
                            size = Size(size.width * progress, size.height),
                            blendMode = BlendMode.SrcOut
                        )
                        restoreToCount(checkPoint)
                    }
                }
                .padding(12.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "Video starting in 3 seconds", color = Color.Gray, fontSize = 20.sp)
        }

        Spacer(modifier = Modifier.height(20.dp))

        Box(
            modifier = Modifier
                .border(2.dp, Color.Gray, RoundedCornerShape(8.dp))
                .clip(RoundedCornerShape(8.dp))
                .fillMaxWidth()
                .drawWithContent {
                    with(drawContext.canvas.nativeCanvas) {
                        val checkPoint = saveLayer(null, null)

                        // Destination
                        drawContent()

                        // Source
                        drawRect(
                            color = Color.Gray,
                            size = Size(size.width * progress, size.height),
                            blendMode = BlendMode.Xor
                        )
                        restoreToCount(checkPoint)
                    }
                }
                .padding(12.dp),
            contentAlignment = Alignment.Center
        ) {
            Text(text = "${(progress * 100).toInt()}%", color = Color.Gray, fontSize = 20.sp)
        }
    }
}