https://kotlinlang.org logo
#compose-android
Title
# compose-android
m

Mahmoo

09/29/2023, 4:28 PM
Trying to create a UI like this for a music player application... I am thinking of drawing the row(which contains these vertical bars) from left to right but how to do so? Need help with approach
s

Stylianos Gakis

09/29/2023, 4:31 PM
Our waves kinda do a thing where towards the middle they usually appear taller on average, and towards the end they appear shorter on average, but you can definitely tweak that to your needs
m

Mahmoo

09/29/2023, 4:36 PM
Oh yeah...when I am generating the list of bars.. i can make the changes but yeah... you have an amazing UI Thanks a lot 🙌
🙇 1
one more thing I wanted to ask Does the size(height) of the bars change or is it static in the implementation that you shared?
s

Stylianos Gakis

09/29/2023, 4:42 PM
Hmm, it is static, if the size of the composable changes of course the bars will also change, but it won’t do things like move the bars as the audio is playing.
r

romainguy

09/29/2023, 4:42 PM
@Stylianos Gakis it’s a bit overkill doing it this way
1
This whole thing could be a single custom Composable that draws the wave using Canvas/DrawScope
(way cheaper in terms of composition/layout/draw)
s

Stylianos Gakis

09/29/2023, 4:44 PM
Admittedly, this is some of the first compose code we introduced in the app way back when we started using Compose 🫣 I would definitely not go with BoxWithConstraints right now. Just thought I’d help Batrick with an idea to get going, but I totally agree with you Romain.
🙌 1
r

romainguy

09/29/2023, 4:44 PM
No no, not boxwithconstraint either!
Then you have a subcomposition
s

Stylianos Gakis

09/29/2023, 4:44 PM
Yeah, should’ve mentioned that while linking I suppose, sorry about that.
m

Mahmoo

09/29/2023, 4:45 PM
No problem... thanks for insights
s

Stylianos Gakis

09/29/2023, 4:47 PM
Batrick, if you do want to give this a try with simple Canvas and do everything in DrawScope, I would really like to see what you end up with.
👍 1
🆗 1
plus1 1
y

yschimke

09/30/2023, 5:28 AM
I did a SoundCloud style waveform using canvas and it was simpler than a bunch of compostables. +1 to Canvas. Will see if I have that code somewhere public
m

Mahmoo

10/01/2023, 7:17 PM
https://pastebin.com/w1xHn7DX Hey guys...I have come up with a approach. The idea is to draw the the canvas with clip so as to cut out the lines and in the background I have a Box(with some color to get progress feel when its width is animated from 0f to 1f) However I am not able to find drawScope function which clips out the list of rects from the canvas.. which is why i have to loop over the list and the progress are draw the background rect again and again..
My main target is to cut out the bars initailly so that later on when my background is animating to its full width then it'll appear as progress
what do you suggest @Stylianos Gakis @romainguy ?
r

romainguy

10/01/2023, 7:19 PM
You don't need a path nor path clipping
Just draw rounded rects of varying heights
1
m

Mahmoo

10/01/2023, 7:21 PM
but I also have a usecase to fill the progress from left to right ..with smooth animation
r

romainguy

10/01/2023, 7:21 PM
You can animate a clipRect
m

Mahmoo

10/01/2023, 7:24 PM
can you explain a bit I am running clipRect in a loop... how do I animate their progress?
I have the progress of music player... how do I use it to draw this?
r

romainguy

10/01/2023, 7:26 PM
So you clipRect then inside that you do your loop to draw all the invidiual segments
And you animate the width of the clipRect based on progress
m

Mahmoo

10/01/2023, 7:57 PM
can you share a reference? couldn't understand this
so its done...basically I am adding list of path to my Path object...outside of canvas using remember block and then I do this within the canvas...and it works fine without any lag...is it the right way to do it?
Copy code
drawRect(
    color = Color.Red,
    size = Size(size.width * progress, size.height)
)

clipPath(path = path, clipOp = ClipOp.Difference) {
    drawRoundRect(
        color = Color.Green,
        size = Size(canvasWidth, canvasHeight),
        topLeft = Offset(width * 0.0f, height * 0.0f),
        cornerRadius = CornerRadius(width * 0.05f, width * 0.05f)
    )
}
r

romainguy

10/01/2023, 8:58 PM
Just
clipRect(...) { for (bar in bars) { drawRoundRect(...) } }
👍 1
c

Colton Idle

10/05/2023, 6:25 AM
Although I am no good at custom drawing and stuff. I feel like I would probably just copy what this video describes since it just seems like id be able to apply it pretty much exactly.
7 Views