Trying to create a UI like this for a music player...

# compose-android

[Mahmoo]

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

[Stylianos Gakis]

We got some code here https://github.com/HedvigInsurance/android/blob/cf910d6252982af95d7e69f1e6a56d291c[…]vig/android/audio/player/internal/FakeWaveAudioPlayerContent.kt which outputs this preview. Might be useful to you.

[Stylianos Gakis]

Maybe better to look inside here directly, purely for the bars, without the play/pause etc https://github.com/HedvigInsurance/android/blob/9e719d9f8197ac8f284e05c4e2a2b47624[…]tlin/com/hedvig/android/audio/player/internal/FakeAudioWaves.kt

[Stylianos Gakis]

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

[Mahmoo]

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 🙌

[Mahmoo]

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?

[Stylianos Gakis]

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.

[romainguy]

@Stylianos Gakis it’s a bit overkill doing it this way

[romainguy]

This whole thing could be a single custom Composable that draws the wave using Canvas/DrawScope

[romainguy]

(way cheaper in terms of composition/layout/draw)

[Stylianos Gakis]

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.

[romainguy]

No no, not boxwithconstraint either!

[romainguy]

Then you have a subcomposition

[Stylianos Gakis]

Yeah, should’ve mentioned that while linking I suppose, sorry about that.

[Mahmoo]

No problem... thanks for insights

[Stylianos Gakis]

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.

[yschimke]

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

[Mahmoo]

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..

[Mahmoo]

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

[Mahmoo]

what do you suggest @Stylianos Gakis @romainguy ?

[romainguy]

You don't need a path nor path clipping

[romainguy]

Just draw rounded rects of varying heights

[Mahmoo]

but I also have a usecase to fill the progress from left to right ..with smooth animation

[romainguy]

You can animate a clipRect

[Mahmoo]

can you explain a bit

I am running clipRect in a loop... how do I animate their progress?

[Mahmoo]

I have the progress of music player... how do I use it to draw this?

[romainguy]

So you clipRect then inside that you do your loop to draw all the invidiual segments

[romainguy]

And you animate the width of the clipRect based on progress

[Mahmoo]

can you share a reference? couldn't understand this

[Mahmoo]

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?

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)
    )
}

[romainguy]

Just clipRect(...) { for (bar in bars) { drawRoundRect(...) } }

[Colton Idle]

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.