Inside this column, set the horizontal alignment alignment and set the vertical arrangement arrangement
dot space by and set it eight dpi.
Then set the modifier.
We can use the alignment alignment button and okay, now we need to specify the the content of the expanded
buttons.
Okay.
So let me start with the first button which is extended floating action button.
Alt plus enter to import the function.
And here this is a very interesting extended floating action button which is a new type of floating
buttons.
And also here we need another extended floating action button.
We have two buttons.
You can specify more.
We're going to create more whenever needed.
So the first button here you can use.
For example, this is used to drill root for example or anything.
When it's expanded expanded we can remove it.
Or when the user clicks on this set the expanded to false.
Okay, we need to make it false.
Then set the icon here to default edit.
So select edit.
Here you can select another composable here inside the text.
So I'll specify a text composable.
Let me add drill root.
For example in the next extended floating action button specify the onclick we need for example to clear
the root.
For example clear markers.
Also you can set the expanded to false similar to what we've done before.
Set the icon to another icon.
Composable.
Use that the default icons dot for example clear, then description null and set the text here to text
composable clear route.
Okay, this is the two extended floating action button elements.
And the last thing we need to add is the main floating action button, which is uh, not, uh, not
the expanded one, which is the the collapsed one.
Okay.
So outside the scope of animated visibility, we need to create the extended or not extended, we need
to use the floating action button.
So alt plus enter okay.
So this is the on click expanded set it not to expand it.
So if it is true go and create it.
Uh and make it as false.
If it is false, create it as true okay.
Then set the modifier align to uh button and set the some paddings.
For example 16 DP then create an icon here, which is for example plus or place or anything.
So alt plus enter to.
For example I need menu which is good.
Also you can specify another types.
So let me show you.
We have two states.
We have expanded or collapsed.
So if it is expanded if expanded true then set the icons default menu.
Otherwise set it to close.
Okay let's run and see.
Let's call it inside the Uber clone and call this expandable fab.
Import the function and let's run again.
There we go.
This is our expandable floating action button.
We need to display it here.
So let me go up to the expandable fab.
So here the box is working fine.
The problem is not from from this box we need to control the modifier from here.
So let me pass the modifier.
Equals to modifier of this dot align alignment.
Dot button.
Start.
Dot padding 16 dpi okay alt plus enter to import this padding and we need to.
Specify this modifier here so the modifier parameter would be used.
So here set the modifier to modifier and use the existing modifier.
Keep the previous modifiers the same, but just pass this modifier in order to control the placement
and the position of this expandable fab.
Okay, so this is our fab.
You can notice that we have those.
Also.
We can control the button start and the button end.
So here if we need to make it fix.
So like this without any animation.
Just set to the animation button.
Start for the floating action button so you can define whatever you want.
So um, if it is expanded, make it close.
We need to, uh, to switch them and otherwise set it to menu.
Let's run again.
And this is our lovely expandable floating action button.
One last thing we need to make is the padding.
And here, inside this column of the animated visibility included inside animated visibility, set the
button padding 70 dpi in order to make it more clear and display things clear.
Okay, here we go.
This is our application.
This is our expandable fab.
And you can see that this extended floating action button are now visible.
Okay.
So do notice.
Congratulations.
This is our expandable fab.