1 00:00:01,510 --> 00:00:02,150 Hello there. 2 00:00:02,410 --> 00:00:05,810 I'm Gaffigan and welcome to my android tutorials. 3 00:00:05,890 --> 00:00:09,630 In today's video we've been talking about collapsing toolbar. 4 00:00:10,090 --> 00:00:11,670 So what is it. 5 00:00:11,680 --> 00:00:16,810 It is a wrapper for a toolbar which gives a collapsing effect to an application bar. 6 00:00:17,260 --> 00:00:18,820 So let's discover more about it. 7 00:00:18,880 --> 00:00:22,100 Let's start with a new project Okay 8 00:00:25,510 --> 00:00:28,720 so let's call the project collapsing toolbar tutorial 9 00:00:36,130 --> 00:00:37,260 lots of the next button. 10 00:00:38,760 --> 00:00:43,860 Again we're going to keep a minimum as the guest 15 why so that we can run our application on almost 11 00:00:43,860 --> 00:00:46,420 100 percent of the devices running ongoing in the world. 12 00:00:46,890 --> 00:00:49,400 Let's add the next button. 13 00:00:49,710 --> 00:00:54,830 Let's start with an activity let's call a doctor. 14 00:00:54,860 --> 00:00:56,250 The US may not do the 15 00:00:59,210 --> 00:01:01,580 well understood it is building a project. 16 00:01:01,650 --> 00:01:02,510 So let's wait. 17 00:01:03,300 --> 00:01:08,600 Well the application is built and it's ready to go do user collapsing to our level. 18 00:01:08,610 --> 00:01:10,070 We need to add a dependency. 19 00:01:10,110 --> 00:01:11,310 So let's do that first. 20 00:01:11,550 --> 00:01:14,220 So integrated so application greater. 21 00:01:14,280 --> 00:01:16,460 And that's the dependency here. 22 00:01:17,520 --> 00:01:30,630 So implementation come not Android not support design on a version which is twenty six point zero point 23 00:01:30,630 --> 00:01:31,320 one. 24 00:01:31,320 --> 00:01:32,010 Sorry. 25 00:01:32,010 --> 00:01:33,900 Point one point zero. 26 00:01:34,650 --> 00:01:37,170 Well let's addressing greater button. 27 00:01:38,310 --> 00:01:42,030 Well the greatest thing and we reduce the collapse into the rollout. 28 00:01:42,390 --> 00:01:49,080 So let's just close this file and let's close this and let's a sugar level of five letters may not exist. 29 00:01:50,280 --> 00:01:51,450 Let's switch attacks mode. 30 00:01:52,020 --> 00:01:57,210 Well let's get rid of this constraint loud because views are collapsing to by load bearing. 31 00:01:57,340 --> 00:01:59,230 Now it should be coordinated dilemma. 32 00:01:59,270 --> 00:02:00,560 So let's use that here. 33 00:02:00,960 --> 00:02:02,270 So calling it allowed. 34 00:02:02,830 --> 00:02:05,530 Let's are the pub bar here. 35 00:02:05,730 --> 00:02:08,140 So our bar layout would match variant. 36 00:02:08,460 --> 00:02:10,430 I dropped content on here. 37 00:02:10,440 --> 00:02:13,320 We need to order collapsing toolbars. 38 00:02:13,350 --> 00:02:18,230 So collapsing two of our loud with much Behrendt high drop content. 39 00:02:19,250 --> 00:02:28,100 Okay let's start an Image view on takes you so image you were much better in Thai say 200. 40 00:02:28,110 --> 00:02:30,880 DP Let's add an SA. 41 00:02:30,900 --> 00:02:37,110 So we'll be needing an image resource so let's not so let's just copy this one. 42 00:02:37,800 --> 00:02:39,960 Well let's us basically enjoyable food. 43 00:02:41,100 --> 00:02:45,000 OK so going back to our project let's use the resource five years. 44 00:02:45,010 --> 00:02:46,570 So I see room. 45 00:02:47,340 --> 00:02:51,460 Let's check the preview once villages. 46 00:02:51,590 --> 00:02:52,520 Bring it here. 47 00:02:53,810 --> 00:02:56,430 So as you can see you've got a collapsing toolbar. 48 00:02:56,690 --> 00:02:58,930 Let's add Dubai here. 49 00:02:59,150 --> 00:03:02,760 So do bar with match bearing height. 50 00:03:02,940 --> 00:03:07,180 These are and action both sides. 51 00:03:07,670 --> 00:03:08,140 OK 52 00:03:11,670 --> 00:03:12,980 well let's relate a team. 53 00:03:13,040 --> 00:03:17,300 So Team people really up combat action bar. 54 00:03:17,540 --> 00:03:18,700 OK. 55 00:03:18,770 --> 00:03:21,610 We also need to provide nested scroll view view. 56 00:03:21,950 --> 00:03:29,350 OK so let's dock which would match variant height March variant on let's order takes you in here. 57 00:03:29,420 --> 00:03:31,970 Or just copy paste this one here. 58 00:03:32,510 --> 00:03:35,410 So control X draw re. 59 00:03:36,260 --> 00:03:38,660 So we've got a text it is. 60 00:03:38,870 --> 00:03:39,590 Hello. 61 00:03:40,400 --> 00:03:41,090 Okay. 62 00:03:41,810 --> 00:03:46,490 Well to achieve that collapsing effect we need to add some more attributes. 63 00:03:46,640 --> 00:03:47,600 So let's do that. 64 00:03:48,260 --> 00:03:55,310 So let's scroll flags so scroll on exit under collapsed. 65 00:03:55,640 --> 00:03:56,090 OK. 66 00:03:56,330 --> 00:03:59,000 Similarly we need to add some more attributes and image view. 67 00:03:59,390 --> 00:03:59,800 So let's. 68 00:03:59,800 --> 00:04:00,800 Are those. 69 00:04:01,120 --> 00:04:03,500 So up loud collapse mode. 70 00:04:03,710 --> 00:04:05,350 So just pallets. 71 00:04:05,480 --> 00:04:11,000 And similarly toolbar so up loud collapse mode then. 72 00:04:11,930 --> 00:04:12,330 OK. 73 00:04:12,360 --> 00:04:16,300 And we also need to add some more attributes in this nested scroll view. 74 00:04:16,340 --> 00:04:21,630 So let's add those two up now behaviour was crawling. 75 00:04:21,850 --> 00:04:24,590 Behavior lets out of gravity here. 76 00:04:24,590 --> 00:04:28,960 So they'll gravity say center just to bring it in center. 77 00:04:30,050 --> 00:04:38,580 Let's run our obligation and see what we've built so far so let's just close this and let's run it well 78 00:04:39,050 --> 00:04:39,870 what obligations. 79 00:04:39,870 --> 00:04:42,430 Running so let's have a look. 80 00:04:43,430 --> 00:04:44,060 Okay. 81 00:04:45,250 --> 00:04:51,190 Well as you can see the scroll is not photo globally we've made some mistakes so let's have a look. 82 00:04:51,820 --> 00:04:58,570 Okay so we've added a new toolbar but in the settings we already have a default bar. 83 00:04:58,750 --> 00:04:59,950 So let's remove that. 84 00:05:00,310 --> 00:05:03,460 So coming to our manifest. 85 00:05:03,730 --> 00:05:05,280 So let's change the team view. 86 00:05:05,740 --> 00:05:08,680 So we don't need the action by neutralizing it ourselves. 87 00:05:08,890 --> 00:05:14,410 So no action bar so which is team up going back and no option but. 88 00:05:14,910 --> 00:05:15,200 OK. 89 00:05:15,220 --> 00:05:19,810 So coming back to our main for example let's just run the application 90 00:05:23,570 --> 00:05:25,770 our obligations running so let's have a look. 91 00:05:27,660 --> 00:05:28,440 Let's cool it. 92 00:05:28,680 --> 00:05:34,600 So as you can see it's going up but there is no change of color. 93 00:05:34,620 --> 00:05:36,430 Know it doesn't look like action bar. 94 00:05:36,710 --> 00:05:38,600 So let's add another attribute. 95 00:05:38,720 --> 00:05:49,270 So coming back to our collapsing to a ball out so content scrim so let's us on color primary door. 96 00:05:49,950 --> 00:05:51,990 Well let's run our obligations again. 97 00:05:54,150 --> 00:06:00,210 Well now as you can see when we screwed it up it looks like an action bar but there is no tie do or 98 00:06:00,210 --> 00:06:00,660 anything. 99 00:06:00,660 --> 00:06:03,990 So let's add that to coming to our main activity. 100 00:06:03,990 --> 00:06:07,700 But before that we do on an idea for the school opting to a bar layout. 101 00:06:07,950 --> 00:06:13,260 So I'd say collapsing toolbar. 102 00:06:13,390 --> 00:06:16,100 Just copy pasted so copy. 103 00:06:16,350 --> 00:06:18,420 So coming to main activity to Java. 104 00:06:18,450 --> 00:06:23,400 Let's create an instance of that collapsing toolbar low so collapse into the cloud. 105 00:06:23,430 --> 00:06:25,330 Let's call it all out. 106 00:06:25,470 --> 00:06:30,470 So fine to me but I've ordered I.T. and just possibly I.D. you. 107 00:06:30,990 --> 00:06:32,990 So do the layout that set. 108 00:06:33,090 --> 00:06:33,590 I do. 109 00:06:33,810 --> 00:06:39,790 Let's call it collapsing toolbar OK. 110 00:06:39,890 --> 00:06:42,440 Let's add some more values here. 111 00:06:42,500 --> 00:06:46,400 So not set collapsed Title X color. 112 00:06:46,640 --> 00:06:52,160 So in the action borders collapse that means when it looks like an action by a thin strip. 113 00:06:52,400 --> 00:06:55,910 So then for that let's define the next color. 114 00:06:56,060 --> 00:07:06,470 So get resources get color dot color so you got the accent similarly let's define the color of an action 115 00:07:06,470 --> 00:07:07,750 what is expanding. 116 00:07:07,820 --> 00:07:09,650 That means when the image is visible. 117 00:07:10,400 --> 00:07:10,820 OK. 118 00:07:11,120 --> 00:07:14,690 So set expanded color. 119 00:07:16,010 --> 00:07:23,210 So get resources get color Android dot all dot color dot transferred. 120 00:07:23,810 --> 00:07:24,940 Well we don't want to show any. 121 00:07:24,950 --> 00:07:27,010 I do when the action bars expanded. 122 00:07:27,500 --> 00:07:28,490 OK. 123 00:07:29,000 --> 00:07:31,240 So going back to your main file. 124 00:07:31,520 --> 00:07:32,240 Oh looks good. 125 00:07:32,300 --> 00:07:34,790 Let's run an obligation again. 126 00:07:34,970 --> 00:07:37,900 Well the application is running so let's have a look. 127 00:07:38,100 --> 00:07:43,530 Get it scroll it up tonight as you can see when it's collapsed. 128 00:07:43,550 --> 00:07:50,130 We can see our data in the action which was this thing sort of color so gobs and toolbar. 129 00:07:50,340 --> 00:07:55,370 And when we expand it that I do disappears because you is adding the color is transparent. 130 00:07:56,030 --> 00:07:56,510 OK. 131 00:07:56,900 --> 00:07:58,730 And there is some padding on left and right. 132 00:07:58,730 --> 00:08:00,980 So it's for me some scaling issue that image. 133 00:08:01,340 --> 00:08:03,750 So that's got some attributes that so scaled type. 134 00:08:04,070 --> 00:08:07,280 So you send to crawl let's run it obligation and have a look. 135 00:08:08,120 --> 00:08:09,380 Well the applications both. 136 00:08:09,410 --> 00:08:11,040 So let's check it again. 137 00:08:11,430 --> 00:08:17,750 Again as you can see that net break bottoms worn smooth and let's cool it up on all diagonal visible. 138 00:08:17,760 --> 00:08:19,080 That's going down. 139 00:08:19,350 --> 00:08:24,560 Those vaunted images usable well not all local apps including whirlpool. 140 00:08:24,990 --> 00:08:27,050 If you have any doubts anyway. 141 00:08:27,330 --> 00:08:31,620 The intruder Robert Coleman unable to declare anybody.