Welcome back.
In this video we're going to create the expandable floating action button.
So inside this box we're going to place the extended floating action button and expandable floating
action button.
Inside this package.
Create a new package, name it as utilities, create a new Kotlin class or file.
Sorry, name it as expandable fab.
Start with a new composable function.
Name it as expandable fab.
Start with var expanded.
Remember mutable state of Alt+.
Enter to import the function and press enter to add mutable state of this variable will save the state
of it is expanded or not, and I'll use by Alt plus enter to import the the set value of runtime, and
this variable will hold the state of.
If it is expanded or not, then Create a new box.
Set the modifier to wrap content content size, and inside this box scoop we need to create the expanded
button.
Those icons or buttons are hidden until the user clicks on the floating action button.
Let's start with animated visibility.
Inside this visibility.
Animated visibility composable.
We have a visible set it to expanded.
This is the variable that we have.
We need to enter fade in.
This is just the animation plus expand vertically.
Don't worry.
We're gonna, um, we're gonna clarify everything in the next couple of minutes.
Just follow me and set the exit, fade out and set the modifier modifier dot align and alignment here
the button end.
The animated visibility.
Composable is part of jetpack composes animation API.
It animates the appearance and disappearance of its content based on the visible state, with customizable
enter or exit animations.
The purpose is to show or hide content with smooth animations when visible changes.
So when the visible variable which is expanded and as I told you, it's a boolean, it triggers and
controls the state of it if it's expanded or not.
And either it's visible or not.
When visible.
When the expanded is true, plays enter, animations fade in and expand vertically vertical expansion
and when visible, visible is false.
Then go and play this animation, this exit animation.
So this is and this is the animation for the enter if it is true.
Otherwise this is for exit.
When the remember or expanded variable is false okay.
The content is fully removed from the composition when hidden.
Unlike alpha equals to zero visible again guys visible controls whether content is shown or hidden.
As I told you, it's related to the expanded variable that we created before in order to control the
visibility.
Enter combined animations for when content appears.
Exit combined animations for when content disappears.
Modifier positions the container at the bottom end of its parent requires a box space.
So this is the button and I can use the button start.
Because if we look here we have this control the zoom level controls.
So I need to place the expendable fab here to the left.
So I used button start.
Okay.
Now let's modify the, um the content of this animated visibility and the box.
So let me start with a column.