A modern programming language that makes developers happier.

kotlinlang

Screenshot 2023-02-12 at 12.38.42.png

Hi guys, I want to make Linear Progress bar with multiple vertical bar. I have 6 scenario and I want this scenario as limit in progress bar. So what is the idiomatic way of doing in jetpack compose to build progress bar with multiple divider on it. All this 6 divider must be on top of progress bar i.e. progress bar will be behind and divider will be in top.

```private fun rangeValues() {
        val lowRange = Pair(89, 59) // Less than 90 &amp; Less than 60
        val normalRange = Pair(Pair(90, 119), Pair(60, 79)) // 90 - 119 &amp; 60 - 80
        val elevatedRange = Pair(Pair(120, 129), 79) // 120 - 129 &amp; Less than 80
        val highRange = Pair(Pair(130, 139), Pair(80, 89)) // 130 - 139 or 80 - 89
        val veryHighRange = Pair(Pair(140, 179), Pair(90, 119)) // 140 or higher or 90 or higher
        val extremelyHighRange = Pair(180, 120) // 180 or higher or 120 or higher
    }```


This is I have range values. This is the value of *Systolic* and *Diastolic* in BP. I am adding image, so you can see clearly. I just made this image in Photo studio so it may be not correclty.
&gt; My all 6 six lines will be straight vertically and equally divider in the bar.


Can you guys guide me? How to achieve this work with the help of Compose magic. Thanks!!
&gt; Please suggest the Stable version of Compose stuff. My mentor will not allow to use alpha and Beta stuffs.


Use a `Canvas()` and draw it on your own - its just drawing 7 lines depending on the parameters. <https://developer.android.com/jetpack/compose/graphics/draw/overview>

This is a segmented circular progress indicator for Wear. Might give you ideas

<https://github.com/google/horologist/blob/main/composables/src/main/java/com/google/android/horologist/composables/SegmentedProgressIndicator.kt|https://github.com/google/horologist/blob/main/composables/src/main/java/com/google/android/horologist/composables/SegmentedProgressIndicator.kt>