LinearProgressIndicator appears split in two in androidx.compose.material3 version 1.3.0

Question

I am using LinearProgressIndicator in my Kotlin Compose project. After upgrading androidx.compose.material3 from version 1.2.0 to 1.3.0, I noticed that the LinearProgressIndicator no longer displays as expected. It should appear as a single, continuous progress bar, but instead, it looks split in two, with an extra dot appearing at the end.

The code is as follows:

@Composable
fun CustomProgressBar() {
    LinearProgressIndicator(
        progress = { 0.5f },
        trackColor = Color.Gray,
        modifier = Modifier
            .width(200.dp)
            .height(15.dp),
        color = Color.Blue,
        strokeCap = StrokeCap.Round,
    )
}

Has anyone encountered this issue, or is there a known workaround to fix the display of LinearProgressIndicator in version 1.3.0?

Answer 1

I found the source of this issue: androidx.compose.material3 1.3.0 added two new parameters to LinearProgressIndicator: gapSize and drawStopIndicator.

This is explained in the KDoc documentation as follows:

gapSize - size of the gap between the progress indicator and the track

drawStopIndicator - lambda that will be called to draw the stop indicator

gapSize: Dp = ProgressIndicatorDefaults.LinearIndicatorTrackGapSize,

drawStopIndicator: DrawScope.() -> Unit = {
        drawStopIndicator(
            drawScope = this,
            stopSize = ProgressIndicatorDefaults.LinearTrackStopIndicatorSize,
            color = color,
            strokeCap = strokeCap
        )
},

When I gave the gapSize and drawStopIndicator Indicator parameters, I got the appearance I wanted and solved this problem.

LinearProgressIndicator(
        progress = { 0.5f },
        trackColor = Color.Gray,
        modifier = Modifier
            .width(200.dp)
            .height(15.dp),
        color = Color.Blue,
        strokeCap = StrokeCap.Round,
        gapSize = (-15).dp,
        drawStopIndicator = {}
    )

When we give the drawStopIndicator an empty function {}, we can hide the point at the end of the progress bar.

When strokeCap ​​= StrokeCap.Round, giving gapSize = 0 does not provide a solution, it needs to be given a negative value. If strokeCap ​​= StrokeCap.Butt or strokeCap ​​= StrokeCap.Square is set, giving gapSize = 0 will work.