WEBVTT 00:04.880 --> 00:13.880 Inside this column, set the horizontal alignment alignment and set the vertical arrangement arrangement 00:13.880 --> 00:17.160 dot space by and set it eight dpi. 00:17.520 --> 00:19.320 Then set the modifier. 00:19.600 --> 00:29.800 We can use the alignment alignment button and okay, now we need to specify the the content of the expanded 00:29.800 --> 00:30.680 buttons. 00:30.720 --> 00:31.240 Okay. 00:31.400 --> 00:38.800 So let me start with the first button which is extended floating action button. 00:38.840 --> 00:41.360 Alt plus enter to import the function. 00:41.360 --> 00:49.080 And here this is a very interesting extended floating action button which is a new type of floating 00:49.080 --> 00:49.760 buttons. 00:50.040 --> 00:56.480 And also here we need another extended floating action button. 00:56.480 --> 00:57.720 We have two buttons. 00:57.720 --> 00:59.200 You can specify more. 00:59.360 --> 01:03.000 We're going to create more whenever needed. 01:03.000 --> 01:06.540 So the first button here you can use. 01:06.740 --> 01:13.260 For example, this is used to drill root for example or anything. 01:13.460 --> 01:16.900 When it's expanded expanded we can remove it. 01:17.100 --> 01:24.380 Or when the user clicks on this set the expanded to false. 01:24.420 --> 01:27.580 Okay, we need to make it false. 01:27.580 --> 01:31.980 Then set the icon here to default edit. 01:31.980 --> 01:34.020 So select edit. 01:34.060 --> 01:38.820 Here you can select another composable here inside the text. 01:38.820 --> 01:41.180 So I'll specify a text composable. 01:41.380 --> 01:43.900 Let me add drill root. 01:44.100 --> 01:53.940 For example in the next extended floating action button specify the onclick we need for example to clear 01:54.060 --> 01:54.900 the root. 01:54.900 --> 01:57.300 For example clear markers. 01:57.300 --> 02:02.660 Also you can set the expanded to false similar to what we've done before. 02:02.860 --> 02:06.140 Set the icon to another icon. 02:06.140 --> 02:07.100 Composable. 02:07.340 --> 02:16.450 Use that the default icons dot for example clear, then description null and set the text here to text 02:16.450 --> 02:18.970 composable clear route. 02:19.010 --> 02:23.850 Okay, this is the two extended floating action button elements. 02:23.850 --> 02:31.250 And the last thing we need to add is the main floating action button, which is uh, not, uh, not 02:31.250 --> 02:34.530 the expanded one, which is the the collapsed one. 02:34.690 --> 02:35.210 Okay. 02:35.370 --> 02:44.650 So outside the scope of animated visibility, we need to create the extended or not extended, we need 02:44.650 --> 02:46.890 to use the floating action button. 02:46.890 --> 02:48.930 So alt plus enter okay. 02:49.170 --> 02:54.330 So this is the on click expanded set it not to expand it. 02:54.330 --> 02:56.690 So if it is true go and create it. 02:56.770 --> 02:59.370 Uh and make it as false. 02:59.370 --> 03:03.250 If it is false, create it as true okay. 03:03.730 --> 03:10.370 Then set the modifier align to uh button and set the some paddings. 03:10.490 --> 03:21.880 For example 16 DP then create an icon here, which is for example plus or place or anything. 03:22.080 --> 03:24.000 So alt plus enter to. 03:24.440 --> 03:28.280 For example I need menu which is good. 03:28.320 --> 03:32.000 Also you can specify another types. 03:32.040 --> 03:33.760 So let me show you. 03:33.800 --> 03:35.480 We have two states. 03:35.800 --> 03:38.440 We have expanded or collapsed. 03:38.440 --> 03:45.480 So if it is expanded if expanded true then set the icons default menu. 03:45.520 --> 03:47.880 Otherwise set it to close. 03:47.920 --> 03:49.640 Okay let's run and see. 03:49.800 --> 03:56.080 Let's call it inside the Uber clone and call this expandable fab. 03:56.120 --> 03:59.400 Import the function and let's run again. 03:59.440 --> 04:00.280 There we go. 04:00.480 --> 04:03.960 This is our expandable floating action button. 04:03.960 --> 04:05.600 We need to display it here. 04:05.960 --> 04:09.000 So let me go up to the expandable fab. 04:09.000 --> 04:11.320 So here the box is working fine. 04:11.360 --> 04:18.180 The problem is not from from this box we need to control the modifier from here. 04:18.180 --> 04:21.260 So let me pass the modifier. 04:21.300 --> 04:26.060 Equals to modifier of this dot align alignment. 04:26.060 --> 04:27.580 Dot button. 04:27.740 --> 04:28.580 Start. 04:28.620 --> 04:37.420 Dot padding 16 dpi okay alt plus enter to import this padding and we need to. 04:37.460 --> 04:44.660 Specify this modifier here so the modifier parameter would be used. 04:44.900 --> 04:51.460 So here set the modifier to modifier and use the existing modifier. 04:51.500 --> 05:00.820 Keep the previous modifiers the same, but just pass this modifier in order to control the placement 05:00.820 --> 05:03.340 and the position of this expandable fab. 05:03.540 --> 05:05.580 Okay, so this is our fab. 05:05.820 --> 05:09.220 You can notice that we have those. 05:09.340 --> 05:09.700 Also. 05:09.740 --> 05:14.660 We can control the button start and the button end. 05:14.780 --> 05:18.020 So here if we need to make it fix. 05:18.020 --> 05:21.320 So like this without any animation. 05:21.320 --> 05:23.920 Just set to the animation button. 05:23.920 --> 05:30.160 Start for the floating action button so you can define whatever you want. 05:30.440 --> 05:34.560 So um, if it is expanded, make it close. 05:34.600 --> 05:39.880 We need to, uh, to switch them and otherwise set it to menu. 05:40.160 --> 05:41.400 Let's run again. 05:41.560 --> 05:46.160 And this is our lovely expandable floating action button. 05:46.200 --> 05:50.520 One last thing we need to make is the padding. 05:50.640 --> 05:58.680 And here, inside this column of the animated visibility included inside animated visibility, set the 05:58.720 --> 06:06.400 button padding 70 dpi in order to make it more clear and display things clear. 06:06.440 --> 06:07.960 Okay, here we go. 06:08.320 --> 06:10.200 This is our application. 06:10.360 --> 06:13.360 This is our expandable fab. 06:13.360 --> 06:19.000 And you can see that this extended floating action button are now visible. 06:19.040 --> 06:19.560 Okay. 06:19.720 --> 06:21.000 So do notice. 06:21.040 --> 06:22.120 Congratulations. 06:22.120 --> 06:24.120 This is our expandable fab.