WEBVTT 00:00.080 --> 00:00.880 Welcome back. 00:00.880 --> 00:05.800 In this video we're going to create the expandable floating action button. 00:05.960 --> 00:13.120 So inside this box we're going to place the extended floating action button and expandable floating 00:13.120 --> 00:13.840 action button. 00:13.880 --> 00:15.960 Inside this package. 00:15.960 --> 00:22.800 Create a new package, name it as utilities, create a new Kotlin class or file. 00:22.840 --> 00:26.560 Sorry, name it as expandable fab. 00:26.600 --> 00:30.280 Start with a new composable function. 00:30.280 --> 00:33.680 Name it as expandable fab. 00:33.840 --> 00:37.120 Start with var expanded. 00:37.120 --> 00:40.000 Remember mutable state of Alt+. 00:40.000 --> 00:51.160 Enter to import the function and press enter to add mutable state of this variable will save the state 00:51.160 --> 01:01.920 of it is expanded or not, and I'll use by Alt plus enter to import the the set value of runtime, and 01:02.120 --> 01:05.760 this variable will hold the state of. 01:05.800 --> 01:11.470 If it is expanded or not, then Create a new box. 01:11.470 --> 01:22.870 Set the modifier to wrap content content size, and inside this box scoop we need to create the expanded 01:23.070 --> 01:23.790 button. 01:23.790 --> 01:32.390 Those icons or buttons are hidden until the user clicks on the floating action button. 01:32.470 --> 01:35.630 Let's start with animated visibility. 01:36.030 --> 01:38.110 Inside this visibility. 01:38.310 --> 01:41.110 Animated visibility composable. 01:41.270 --> 01:44.710 We have a visible set it to expanded. 01:44.750 --> 01:46.790 This is the variable that we have. 01:46.990 --> 01:49.830 We need to enter fade in. 01:50.030 --> 01:54.030 This is just the animation plus expand vertically. 01:54.030 --> 01:54.630 Don't worry. 01:54.670 --> 02:00.310 We're gonna, um, we're gonna clarify everything in the next couple of minutes. 02:00.350 --> 02:10.510 Just follow me and set the exit, fade out and set the modifier modifier dot align and alignment here 02:10.670 --> 02:11.670 the button end. 02:11.750 --> 02:13.510 The animated visibility. 02:13.550 --> 02:18.150 Composable is part of jetpack composes animation API. 02:18.420 --> 02:27.420 It animates the appearance and disappearance of its content based on the visible state, with customizable 02:27.620 --> 02:30.420 enter or exit animations. 02:30.860 --> 02:39.300 The purpose is to show or hide content with smooth animations when visible changes. 02:39.300 --> 02:46.740 So when the visible variable which is expanded and as I told you, it's a boolean, it triggers and 02:46.740 --> 02:51.780 controls the state of it if it's expanded or not. 02:51.780 --> 02:54.020 And either it's visible or not. 02:54.220 --> 02:55.420 When visible. 02:55.420 --> 03:04.300 When the expanded is true, plays enter, animations fade in and expand vertically vertical expansion 03:04.540 --> 03:07.780 and when visible, visible is false. 03:07.940 --> 03:12.220 Then go and play this animation, this exit animation. 03:12.220 --> 03:16.860 So this is and this is the animation for the enter if it is true. 03:17.180 --> 03:19.860 Otherwise this is for exit. 03:19.860 --> 03:24.980 When the remember or expanded variable is false okay. 03:25.260 --> 03:29.880 The content is fully removed from the composition when hidden. 03:30.080 --> 03:39.520 Unlike alpha equals to zero visible again guys visible controls whether content is shown or hidden. 03:39.720 --> 03:46.920 As I told you, it's related to the expanded variable that we created before in order to control the 03:46.920 --> 03:47.760 visibility. 03:47.880 --> 03:52.880 Enter combined animations for when content appears. 03:53.000 --> 03:57.520 Exit combined animations for when content disappears. 03:57.640 --> 04:05.360 Modifier positions the container at the bottom end of its parent requires a box space. 04:05.560 --> 04:09.640 So this is the button and I can use the button start. 04:09.800 --> 04:15.720 Because if we look here we have this control the zoom level controls. 04:15.960 --> 04:21.760 So I need to place the expendable fab here to the left. 04:21.760 --> 04:24.160 So I used button start. 04:24.200 --> 04:24.680 Okay. 04:24.880 --> 04:33.800 Now let's modify the, um the content of this animated visibility and the box. 04:33.960 --> 04:37.240 So let me start with a column.