Channels
#compose-android
Title
# compose-android
m
Mahmoo
09/29/2023, 4:28 PMTrying 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 PMWe 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.
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
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 PMOh 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 PMHmm, 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 PMAdmittedly, 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 PMNo no, not boxwithconstraint either!
Then you have a subcomposition
s
Stylianos Gakis
09/29/2023, 4:44 PMYeah, should’ve mentioned that while linking I suppose, sorry about that.
m
Mahmoo
09/29/2023, 4:45 PMNo problem... thanks for insights
s
Stylianos Gakis
09/29/2023, 4:47 PMBatrick, 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 AMI 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 PMhttps://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 PMYou don't need a path nor path clipping
Just draw rounded rects of varying heights
➕ 1
m
Mahmoo
10/01/2023, 7:21 PMbut I also have a usecase to fill the progress from left to right ..with smooth animation
r
romainguy
10/01/2023, 7:21 PMYou can animate a clipRect
m
Mahmoo
10/01/2023, 7:24 PMcan 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 PMSo 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 PMcan 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 PMJust
clipRect(...) { for (bar in bars) { drawRoundRect(...) } }👍 1
c
Colton Idle
10/05/2023, 6:25 AMAlthough 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