How can I custom progress bar with button in jetpack compose?

Question

I am trying to do custom progress bar like this in jetpack compose.

When I slide the user button to the right and left, it will increase and decrease with values of 0.25. The first value will be 0.25 and the last value will be 1, that is, it will consist of 4 stages.

here is what i did

@Composable
fun CustomProgressBar() {

    var progress by remember { mutableStateOf(0.25f) }


    Column(
        modifier = Modifier.padding(16.dp)
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically
        ) {
            Box(
                modifier = Modifier
                    .weight(1f)
                    .height(16.dp)
                    .background(Color.LightGray)
            ) {
                Box(
                    modifier = Modifier
                        .fillMaxWidth(progress)
                        .height(16.dp)
                        .background(DefaultDYTColor)
                )
            }
            Button(
                onClick = {
                    if (progress < 1f) {
                        progress += 0.25f
                    }
                }
            ) {
                Text("increase")
            }
        }
        Text(
            text = "$progress",
            modifier = Modifier.align(Alignment.CenterHorizontally)
        )
    }
}

this is wrong but I want to share my code to explain what I did at least.

hear is my code result

you can look at the slider code copy it and see if you modify the thumb — Raghunandan, May 17 '23 at 04:57

score 2 · Accepted Answer · answered May 17 '23 at 07:28

You can use a Slider. With M3 (androidx.compose.material3.Slider) you can use the thumb attribute to apply a custom thumb.

Something like:

    var sliderPosition by remember { mutableStateOf(0f) }
    val interactionSource = MutableInteractionSource()

    Column {

        Slider(
            modifier = Modifier.semantics { contentDescription = "Localized Description" },
            value = sliderPosition,
            onValueChange = { sliderPosition = it },
            valueRange = 0f..1f,
            steps = 3,
            interactionSource = interactionSource,
            onValueChangeFinished = {
                // launch some business logic update with the state you hold
            },
            thumb = {
                val shape = RoundedCornerShape(4.dp)
                Box(
                    modifier = Modifier
                        .size(70.dp,25.dp)
                        .indication(
                            interactionSource = interactionSource,
                            indication = rememberRipple(
                                bounded = false,
                                radius = 20.dp
                            )
                        )
                        .hoverable(interactionSource = interactionSource)
                        .background(Blue200, shape),
                    contentAlignment = Alignment.Center
                ){
                    Text(sliderPosition.toString() +"Kg")
                }
            },
        )
    }

Thank you for answer but I dont use material 3 . I use Material because I cant use thumb in material. Do you have any suggestion for Material ? By the way your answer probably will work so I will accept your answer. — NewPartizal, May 17 '23 at 08:22
I achieved using this repo from github : https://github.com/SmartToolFactory/Compose-Colorful-Sliders . it is very useful repo . I customize myself and it worked. — NewPartizal, May 17 '23 at 09:13

How can I custom progress bar with button in jetpack compose?

1 Answers1