CODEWITHSUNDEEP
androidkotlinprogress-barandroid-jetpack-composeandroid-progressbar
dipdipdip
dipdipdip

Reputation: 2566

Vertical LinearProgressIndicator in Jetpack Compose

I want to show a vertical LinearProgressIndicator, meaning full height, small width, animating from top to bottom. I tried to simply rotating it by 90°, which surprisingly worked somehow, e.g.:

Modifier
    .height(8.dp)
    .fillMaxWidth()
    .graphicsLayer {
        rotationZ = 90f
        transformOrigin = TransformOrigin(0f, 0f)
    }

But it seems limited to the width of the Composable, hence not filling the whole height. Changing the order of modifiers or using width/fillMaxHeight didn't work either.

Upvotes: 2

Views: 3600

Answers (2)

Bhushan Maniyar
Bhushan Maniyar

Reputation: 121

Output One thing you can do with column and weight to get the expected output

@Composable
fun VerticalProgress(
    progress: Float,
    modifier: Modifier = Modifier
) {
    val mProgress = animateFloatAsState(targetValue = progress / 100)
    Column(
        modifier = modifier
            .clip(RoundedCornerShape(12.dp))
            .background(Color.LightGray)
            .width(16.dp)
    ) {
        Box(
            modifier = Modifier
                .weight(if ((1 - mProgress.value) == 0) 0.0001 else 1 - mProgress.value)
                .fillMaxWidth()
        )
        Box(
            modifier = Modifier
                .clip(RoundedCornerShape(12.dp))
                .weight(mProgress.value)
                .fillMaxWidth()
                .background(
                    Brush.verticalGradient(
                        listOf(
                            Color(0xffE000FF),
                            Color(0xffE000FF),
                            Color(0xFF7700FF),
                            Color(0xFF7700FF),
                        )
                    )
                )
        )
    }
}

Upvotes: 3

Phil Dukhov
Phil Dukhov

Reputation: 88497

The LinearProgressIndicator is designed according to Material Guidelines, which only includes a horizontal progress indicator.

For the vertical indicator you will have to create your own element. You can take LinearProgressIndicator source code as a sample, it is quite simple.

Upvotes: 2

Related Questions