1 00:00:00,930 --> 00:00:01,600 Welcome back. 2 00:00:01,620 --> 00:00:05,730 And this video, we are going to add this floating action button that you see here at the bottom. 3 00:00:05,970 --> 00:00:11,460 And you can see it changes its appearance based on the scrolling state. 4 00:00:11,880 --> 00:00:16,410 So once we are at the bottom or further down, you see it's just an icon. 5 00:00:16,770 --> 00:00:21,180 And once we are at the very top, it's this ad compose or just compose with the icon. 6 00:00:21,900 --> 00:00:24,870 So the text has been added to it as well. 7 00:00:25,320 --> 00:00:31,290 So now let's go ahead and implement that to our application, and therefore we will just create a new 8 00:00:31,290 --> 00:00:32,040 component. 9 00:00:32,369 --> 00:00:35,880 So let me go ahead and create a new Kotlin class file. 10 00:00:36,300 --> 00:00:42,330 I'm going to call this one Gmail Fab Fab standing for floating action button. 11 00:00:43,050 --> 00:00:51,000 OK, so this will be a composable so as add as composable and it's call this one Gmail fab like so. 12 00:00:54,110 --> 00:00:59,090 As you might have seen, there was also something that will be based on the state, which is how it 13 00:00:59,090 --> 00:00:59,840 changes, right? 14 00:01:00,230 --> 00:01:02,610 But for now, we're not going to pass the state. 15 00:01:02,630 --> 00:01:04,190 We're going to do that later on. 16 00:01:04,519 --> 00:01:08,330 For now, let's just add a floating action button in here. 17 00:01:08,540 --> 00:01:13,250 So there is this composable called floating action button that we can use. 18 00:01:13,640 --> 00:01:16,550 And as a content, I'm just going to use an icon here. 19 00:01:17,000 --> 00:01:24,070 So we need to import I for this to work, and then we can use the image vector, which will be icons 20 00:01:24,110 --> 00:01:27,180 dot default, Dot added. 21 00:01:28,070 --> 00:01:31,430 And as a content description, I'm going to it and to nothing. 22 00:01:31,730 --> 00:01:33,440 And we need to import add it as well. 23 00:01:33,590 --> 00:01:37,800 So you see, those are the icons that have been added to now. 24 00:01:38,470 --> 00:01:40,310 Now there's floating action button. 25 00:01:40,640 --> 00:01:43,040 I'm going to give it a background. 26 00:01:43,160 --> 00:01:50,000 So here after the on click property, I'm going to add the background color property, which is this 27 00:01:50,000 --> 00:01:50,460 one here. 28 00:01:50,780 --> 00:01:53,120 And as the color, I'm going to use material theme. 29 00:01:55,010 --> 00:01:57,830 Dot colors, dot surface. 30 00:01:58,340 --> 00:02:00,110 So there is this. 31 00:02:02,200 --> 00:02:08,229 Material theme here, and it has this color did this to surface color, so this is the surface color 32 00:02:08,229 --> 00:02:15,250 is used on surfaces of components such as cards, sheets and menus, and it also works very well for 33 00:02:15,310 --> 00:02:16,450 our floating action button. 34 00:02:16,720 --> 00:02:19,240 Now you could, of course, use any other color if you wanted to. 35 00:02:19,690 --> 00:02:25,900 So now let's use this Gmail Fab instead of our main activity and instead of the scaffold, because that's 36 00:02:25,900 --> 00:02:34,780 where we have our top bar to bar that Gmail drawer and our whole menu bar because there is also the 37 00:02:34,780 --> 00:02:37,480 floating action button property. 38 00:02:37,570 --> 00:02:42,100 So our scaffold has this property as well, and we can just use our Gmail Fab in there. 39 00:02:42,580 --> 00:02:51,520 So now let's import Gmail fat because it exists in a different context and we need to import it so that 40 00:02:51,520 --> 00:02:52,330 we can access it. 41 00:02:52,540 --> 00:02:55,090 So it's in our Gmail clone components. 42 00:02:59,420 --> 00:03:02,390 Now this has to be inside of a London. 43 00:03:02,900 --> 00:03:08,450 OK, so as we've seen with the bottom bar and so forth, so let me bring it into the same format so 44 00:03:08,450 --> 00:03:09,620 we can breathe better. 45 00:03:10,160 --> 00:03:17,660 So now we should see our Gmail fab in our application once it's loaded and we see there it is. 46 00:03:18,140 --> 00:03:20,330 So even if we scroll now, nothing changes. 47 00:03:20,330 --> 00:03:26,270 And that's what we're going to change now because I want to display compose as a text here based on 48 00:03:26,270 --> 00:03:26,900 the scroll state. 49 00:03:26,920 --> 00:03:29,270 So this will teach you how to use the scroll state. 50 00:03:29,870 --> 00:03:34,970 You have seen the scaffold state before and we've seen the scroll state before as well for the Gmail 51 00:03:34,970 --> 00:03:36,110 draw menu, actually. 52 00:03:36,470 --> 00:03:37,790 So let's use it once again. 53 00:03:39,470 --> 00:03:43,700 Therefore, let's go over to our Gmail Fab and add scroll state in here. 54 00:03:44,120 --> 00:03:48,420 So scroll state, which will be the composable scroll states. 55 00:03:48,420 --> 00:03:52,940 So this compose foundation, there are multiple ones, there is the one from your page or two two as 56 00:03:52,940 --> 00:03:55,400 well, but you should use this one specifically. 57 00:03:56,300 --> 00:04:03,500 And then we can now check for the scroll state so we can check of the scroll state has a value of greater 58 00:04:03,500 --> 00:04:04,310 than 100. 59 00:04:05,090 --> 00:04:09,380 If that's the case, then we want to have an extended floating action button. 60 00:04:09,620 --> 00:04:11,720 So not just a normal one, but an extended one. 61 00:04:12,050 --> 00:04:13,820 So here we need to create a text. 62 00:04:15,000 --> 00:04:21,899 So in here, I can just go ahead and put that into a separate line, so it will be a little more readable, 63 00:04:21,899 --> 00:04:23,940 actually, let me put text also in a separate line. 64 00:04:24,390 --> 00:04:26,990 Otherwise, it will be a little confusing. 65 00:04:27,000 --> 00:04:33,810 So here we just have this text composable where we set the text to be compose and it should be like 66 00:04:33,810 --> 00:04:39,480 this text will be composed with a capital C. We need to import text for this. 67 00:04:40,440 --> 00:04:48,300 The issue I want and I'm going to set the font size while I'm at it as well, and this will go inside 68 00:04:48,300 --> 00:04:49,380 of this one. 69 00:04:49,500 --> 00:04:55,500 So font size should be, let's say, six A.P. We need to import a speech for this as well. 70 00:04:56,040 --> 00:05:00,330 OK, so this is our text now, and it goes all the way up to here. 71 00:05:00,840 --> 00:05:04,350 And then we have our own click event, which doesn't do anything. 72 00:05:04,680 --> 00:05:06,570 And then I'm going to add an icon. 73 00:05:07,080 --> 00:05:09,280 I'm going to use the same icon that we used before. 74 00:05:09,300 --> 00:05:12,540 So let me just add it in here after. 75 00:05:13,590 --> 00:05:14,880 The on click event. 76 00:05:18,580 --> 00:05:25,000 Which will actually be the can property that we have to override, like so with the icon. 77 00:05:25,250 --> 00:05:27,460 OK, so this will give us the icon. 78 00:05:28,150 --> 00:05:31,570 And let's also set the background color of it while we're at it. 79 00:05:31,780 --> 00:05:36,370 So background color will also be this material colors surface. 80 00:05:36,730 --> 00:05:43,780 So no, we're just saying if the scroll stayed is over 100, we do this and otherwise we have a normal 81 00:05:43,780 --> 00:05:45,040 floating action button. 82 00:05:47,910 --> 00:05:48,390 All right. 83 00:05:48,540 --> 00:05:53,160 I know we just need to take care of actually passing this scrawls state. 84 00:05:53,820 --> 00:05:57,900 OK, so now we could use this scroll state director, you see Gmail. 85 00:05:57,930 --> 00:05:59,940 Fab isn't very happy at this point. 86 00:06:00,300 --> 00:06:03,630 We need to add this crucial state in there as well. 87 00:06:05,380 --> 00:06:05,950 Like so. 88 00:06:07,800 --> 00:06:10,950 Now, if we test this, it doesn't seem to work. 89 00:06:11,310 --> 00:06:12,030 Why is that? 90 00:06:12,630 --> 00:06:15,840 Because if we you see here, you see the difference. 91 00:06:15,990 --> 00:06:17,220 So if we now scroll. 92 00:06:18,890 --> 00:06:23,700 Then it changes, so in the background, look at it, announced Compose. 93 00:06:23,960 --> 00:06:28,680 If we're at the very top, then it's this little icon itself. 94 00:06:28,970 --> 00:06:34,550 So we're sending the wrong scroll state because the scroll state, if you recall, was created here. 95 00:06:34,670 --> 00:06:39,170 So we created this remember scroll state, which was part of our Gmail app. 96 00:06:40,820 --> 00:06:46,250 So we now need to have the same thing in our mail list, because if you recall, this was our little 97 00:06:46,850 --> 00:06:48,020 component here. 98 00:06:48,230 --> 00:06:55,040 Our mail list components, which also needs to have such a state in here. 99 00:06:56,060 --> 00:07:03,590 So here our email list also needs to get a scroll state scroll state, then the scroll state needs to 100 00:07:03,590 --> 00:07:05,860 be imported, obviously. 101 00:07:05,900 --> 00:07:06,800 So let's import. 102 00:07:07,970 --> 00:07:13,250 This gross state, not the one from Jupiter, we need to compose, scroll to state this one Compose 103 00:07:13,250 --> 00:07:14,330 Foundation's Cross State. 104 00:07:15,020 --> 00:07:22,940 OK, now we just need to make sure that we set this scroll state and the moment we can do that is inside 105 00:07:22,940 --> 00:07:28,100 of our lazy column and side of our heading that we're setting. 106 00:07:28,820 --> 00:07:31,370 So here the lazy column is our list, right? 107 00:07:31,550 --> 00:07:32,180 You recall. 108 00:07:32,570 --> 00:07:33,080 So now. 109 00:07:34,190 --> 00:07:39,500 Let's make sure that we add a scrollable to here. 110 00:07:40,160 --> 00:07:43,850 So now we can pass a scroll state and the orientation of the scrolling. 111 00:07:44,300 --> 00:07:46,640 So we're going to say we're going to scroll vertically. 112 00:07:47,450 --> 00:07:50,570 So this will be for our lazy column of our May list. 113 00:07:50,870 --> 00:07:52,640 If you recall, there's just this thing here. 114 00:07:52,670 --> 00:07:58,220 OK, so we could scroll already, but we never used to scroll state for anything other than, well, 115 00:07:58,220 --> 00:07:59,000 nothing, basically. 116 00:07:59,400 --> 00:08:03,260 But now we are going to use the scroll state and pass it to here as well. 117 00:08:05,000 --> 00:08:14,030 And at this point, our main activities, Gmail Floating Action Button will be able to take the scroll 118 00:08:14,030 --> 00:08:14,360 state. 119 00:08:14,540 --> 00:08:20,120 Now obviously, our mail list also needs to pass or to have passed us scroll states to it. 120 00:08:20,840 --> 00:08:23,090 So let's think so should be fine. 121 00:08:23,690 --> 00:08:31,450 I'll run it again and see whether our floating action button appears while we are further down. 122 00:08:32,720 --> 00:08:35,450 And you see how it works. 123 00:08:36,500 --> 00:08:40,909 When we're at the top, see consider compose button when we're to button just a button because it wants 124 00:08:40,909 --> 00:08:45,410 to display us the actual email, it doesn't want to interfere with the email or so. 125 00:08:46,370 --> 00:08:46,730 All right. 126 00:08:47,090 --> 00:08:49,750 So that's how you can add a floating action button.