1 00:00:01,050 --> 00:00:04,070 Hello I'm Gaffigan and welcome Bob Dylan. 2 00:00:04,100 --> 00:00:09,280 What you do realize in today's video we will be talking about floating action button. 3 00:00:09,300 --> 00:00:10,080 So what is it. 4 00:00:11,160 --> 00:00:16,320 It is a so-called globally floating above the user interface and can be used to trigger some positive 5 00:00:16,320 --> 00:00:17,260 actions. 6 00:00:17,280 --> 00:00:24,020 And when I say positive I mean share or create extra sexual it's available in two sizes. 7 00:00:24,060 --> 00:00:25,290 Normal in many. 8 00:00:25,740 --> 00:00:28,880 So let's discover floating action button today. 9 00:00:28,890 --> 00:00:30,000 Let's create a new project 10 00:00:33,190 --> 00:00:37,270 let's call the project during action button or fab tutorial. 11 00:00:37,420 --> 00:00:40,650 So let's call it fab tutorial. 12 00:00:41,110 --> 00:00:43,180 Let's hit the next button again. 13 00:00:43,180 --> 00:00:48,280 We're going to keep on monuments that just repeat why so that we can do no obligation on almost 100 14 00:00:48,280 --> 00:00:50,560 percent of the devices funding I'm doing in the world. 15 00:00:51,130 --> 00:00:52,120 Let's hit the next button. 16 00:00:53,710 --> 00:00:55,300 Let's start with an empty activity. 17 00:00:56,860 --> 00:00:59,590 Let's go to first light duty as main activity. 18 00:01:00,270 --> 00:01:02,560 Well onwards studio is building our project. 19 00:01:02,620 --> 00:01:09,100 So let's wait while products build and we're ready to go on to use a floating action button. 20 00:01:09,100 --> 00:01:10,750 We need to our dependency in the grid. 21 00:01:10,810 --> 00:01:12,300 So let's do that first. 22 00:01:12,310 --> 00:01:18,100 So coming to greater application to let's other dependence issues. 23 00:01:18,100 --> 00:01:30,560 So implementation com dot Android dot support design the vision which is twenty six point one point 24 00:01:30,560 --> 00:01:31,030 zero. 25 00:01:31,670 --> 00:01:34,750 Let's sing the greater Well the greater St.. 26 00:01:34,790 --> 00:01:36,920 I'm willing to do the flooding option button. 27 00:01:36,920 --> 00:01:40,230 So let's close this on let's close this file. 28 00:01:40,340 --> 00:01:46,490 Moving on to the left file which is activity main example the floating action button needs to be close 29 00:01:46,790 --> 00:01:48,060 in a coordinate rollout. 30 00:01:48,140 --> 00:01:49,080 So let's do that. 31 00:01:49,370 --> 00:01:52,770 So let's just get rid of this constraint cloud and order coordinate all melt. 32 00:01:53,800 --> 00:02:02,670 OK let's start affording action button so loading action button where drop content high drop content 33 00:02:03,290 --> 00:02:11,160 let's go I did it with an icon so a saucy we need a droid both so let's create one project resources 34 00:02:11,520 --> 00:02:21,080 right click new Lecter asset let's click on this I can button and let's just use I can. 35 00:02:21,480 --> 00:02:30,000 OK let's rename it let's the next button on just created well Joy is ready to use so let's just use 36 00:02:30,000 --> 00:02:34,430 it to use it goes I see I know God got or I can use. 37 00:02:34,440 --> 00:02:36,290 So that's this whole review. 38 00:02:36,780 --> 00:02:38,490 OK let's bring it sure. 39 00:02:38,940 --> 00:02:41,040 So as you can see it's on the top left corner. 40 00:02:41,430 --> 00:02:43,590 So let's bring it to the bottom. 41 00:02:43,680 --> 00:02:50,050 So let gravity bottom on and OK. 42 00:02:50,450 --> 00:02:56,370 And as for Google's material design guidelines the floating action button needs to have at least 16 43 00:02:56,370 --> 00:02:57,230 degree of margin. 44 00:02:57,270 --> 00:02:58,110 So let's try. 45 00:02:58,190 --> 00:02:58,560 OK. 46 00:02:59,250 --> 00:03:01,920 So margin say 16 DP. 47 00:03:02,850 --> 00:03:04,770 Well that looks good. 48 00:03:05,520 --> 00:03:08,460 Let's give the top size as normal. 49 00:03:09,470 --> 00:03:10,020 OK. 50 00:03:10,740 --> 00:03:13,430 Let's below obligation and have a look. 51 00:03:13,470 --> 00:03:14,740 Well our obligation is vote. 52 00:03:14,740 --> 00:03:15,790 So let's have a look. 53 00:03:16,360 --> 00:03:20,280 Okay offloading action button is visible on like nothing's happening. 54 00:03:21,180 --> 00:03:24,670 Okay so let's order some animation here. 55 00:03:25,260 --> 00:03:30,800 So let's be primary color dark and let's. 56 00:03:30,810 --> 00:03:31,950 I don't want lip listening. 57 00:03:31,950 --> 00:03:34,800 So let's just close this coming to our main activity. 58 00:03:34,800 --> 00:03:38,410 But before that that's an idea for this loading option button. 59 00:03:38,580 --> 00:03:39,970 So let's call it FOB. 60 00:03:40,670 --> 00:03:45,660 So coming to the java file we need an instance of the floating action button so let's create one. 61 00:03:46,380 --> 00:03:49,370 So private floating action button 62 00:03:53,040 --> 00:03:53,820 let's call it 63 00:03:56,480 --> 00:03:57,130 FOB. 64 00:03:57,740 --> 00:03:59,310 Okay let's initialize it. 65 00:03:59,400 --> 00:04:01,210 Farmers will do fine. 66 00:04:01,240 --> 00:04:03,680 But Ida auto I.T. FOB. 67 00:04:04,030 --> 00:04:05,730 That's a item on the listener now. 68 00:04:05,770 --> 00:04:10,450 So far said on Good Listener new on good listener. 69 00:04:11,040 --> 00:04:11,300 Okay. 70 00:04:11,320 --> 00:04:14,910 That's is generally the those two so toast but made Dex. 71 00:04:14,920 --> 00:04:18,140 That's the context so I may not do due to a loss. 72 00:04:18,280 --> 00:04:27,340 Sorry may not do any of this lets out a message so let's say I clicked FOB and that's the duration so 73 00:04:27,340 --> 00:04:28,670 we just lent short. 74 00:04:29,150 --> 00:04:31,700 Let's just call the show function. 75 00:04:31,720 --> 00:04:34,520 Give it to let's run an application again. 76 00:04:34,560 --> 00:04:35,210 GIGOT. 77 00:04:38,440 --> 00:04:40,860 Well the obligations both so let's have a look. 78 00:04:43,270 --> 00:04:44,500 Let's click on this. 79 00:04:44,530 --> 00:04:50,380 So as you can see there's some bluish ripple effect when I click on it shows a don't click FOB. 80 00:04:50,890 --> 00:04:58,360 OK so we saw a normal hearing option but you know let's check out the many fine vision so coming here 81 00:04:58,740 --> 00:05:01,150 and let's just change the font size too many. 82 00:05:02,410 --> 00:05:04,300 Okay let's run our application again. 83 00:05:05,200 --> 00:05:07,540 Well applications up so let's see. 84 00:05:08,160 --> 00:05:11,420 And as you can see off loading my action button is small. 85 00:05:11,590 --> 00:05:16,360 So the manifested vision is what and the normal vision is of the 60s. 86 00:05:17,500 --> 00:05:19,880 Okay let's click here on it shows like FOB. 87 00:05:20,520 --> 00:05:23,740 Well that's also floating action button guys. 88 00:05:23,860 --> 00:05:28,300 If you have any doubts any queries so far feel free to drop a comment and we'll go through it. 89 00:05:29,440 --> 00:05:30,380 But I think the.