How would I go about creating a composable that has a collapsed form, showing minimal content and a ...

# compose

[zt]

How would I go about creating a composable that has a collapsed form, showing minimal content and a fully expanded form which shows everything. I'm trying to copy how the miniplayer/player is in YouTube. I want it so the components move and resize as its going to a different state. Is that possible in compose?

[robercoding]

To be honest I don't know the best way to do this but I also was thinking of trying to reproduce this animation in Compose
Not sure if MotionLayout would help something here

But I always think it's possible doing it in this way:
Getting the current height of the collapsed screen and comparing it to the full height then get the percentage based between 0 to 1

With that, you can increase the scale, alpha or etc the values you want to show or not
e.g:
• current collapsed height = 500
• screen height is = 1000
• 500/1000 = 0.5
And now you can use the 0.5 as alpha or scale etc..
If you want the alpha to start from a specific height then you need to do another math operation

Again I don't have any idea how to do it, what's the best way and what challenges imply this animation but that's what I got in mind

Were you thinking of something else?
(PS: Subscribing to the thread just in case 😄)

Edit: I'm pretty sure there should be an easier way 😅

[myanmarking]

just regular if(else) for the expanded content paired with AnimateContentSize in the parent composable should do it ?

[Chris Sinco [G]]

Yes it’s possible with a combination of state and using things like AnimatedContent. This example with collapsed to an expanded version of the cart might be helpful:

https://youtu.be/Wyn8I4dj-eA▾

[robercoding]

How do you achieve youtube's player animation with AnimatedContent?

I think for this specific scenario I would need to define where I want my values to start showing or hiding (alpha, scale etc) and based on how much expanded it is, show the values.

That's impossible with AnimationContent API, right?
Like AnimatedContent is automatic and goes from one state to another

I want the user to drag vertically as much as he wants and based on the position do some "_animation_". Like youtube's player

[Chris Sinco [G]]

MotionLayout in theory seems to be the easiest way to do it but I haven’t tried the Compose version so can’t speak to how to do it in specifics

[Chris Sinco [G]]

I want it so the components move and resize as its going to a different state. Is that possible in compose?

Yes it’s possible though you probably want to animate position and size with the graphicsLayer modifier to reduce recompositions. There’s also the moveableContentOf API that can help as well, though I haven’t played around with it much.

[Chris Sinco [G]]

What have you tried so far?

[robercoding]

The only thing that has worked for me in Compose API (Not MotionLayout), was to do some quick maths to calculate where I want to start fading the alpha (Like halfway the scroll):

This must be done with a predefined size (I think) + get info about the current offset so I can calculate how far I went scrolling in a certain amount of height.
And get the distance from 0 (minimum) to 1 (maximum).
And then do some maths like for example hiding a component from distance 0.5(halfway) to 0.8
And for other values animate it from distance 0 to distance 1 and other distances

But I still find myself in a lot of work that I believe it can be solved in other ways, like motion layout, but the current UI uses the Compose UI toolkit instead of ConstraintLayout

Yes! I know the existing graphicsLayer (I didn't know at first)

[robercoding]

There’s also the moveableContentOf API that can help as well

Yes, I took a look at it, but seems that there's not much info about it and couldn't see a lot of articles mentioning it or anything, and much less with animations

[Chris Sinco [G]]

These examples in MotionLayout Compose might be helpful: https://github.com/androidx/constraintlayout/tree/main/demoProjects/ExamplesComposeMotionLayout

[Chris Sinco [G]]

I haven’t played around with it much but looking at the README it looks promising

[robercoding]

Oh I see, I think this is new!?? I didn't see this before!

I'll try to replicate youtube's player animation, thanks a lot!!

[Chris Sinco [G]]

Would be great to see how it goes!

[robercoding]

I'm in the middle of other tasks, but no worries will ping you back when I got something! 😉