https://kotlinlang.org logo
#compose
Title
# compose
k

KotlinLeaner

02/12/2023, 12:43 PM
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.
Copy code
private fun rangeValues() {
        val lowRange = Pair(89, 59) // Less than 90 & Less than 60
        val normalRange = Pair(Pair(90, 119), Pair(60, 79)) // 90 - 119 & 60 - 80
        val elevatedRange = Pair(Pair(120, 129), 79) // 120 - 129 & 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.
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!!
Please suggest the Stable version of Compose stuff. My mentor will not allow to use alpha and Beta stuffs.
c

Chrimaeon

02/12/2023, 1:44 PM
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
k

KotlinLeaner

02/12/2023, 1:49 PM
Thanks
y

yschimke

02/12/2023, 2:36 PM
This is a segmented circular progress indicator for Wear. Might give you ideas
8cb7bd21-fb75-4c62-baee-bd3eb0902fa2.png
k

KotlinLeaner

02/12/2023, 4:33 PM
Thanks a million
25 Views