1 00:00:00,210 --> 00:00:02,400 Hello this is what has occurred. 2 00:00:02,720 --> 00:00:10,710 And in this story all you're going to actually put the coats for the expanded state of our floating 3 00:00:10,710 --> 00:00:16,130 view as you can see I inside these floats on the line view on the land lay out the exemplified. 4 00:00:16,350 --> 00:00:23,630 And here in the previous tutorial we created the root view and the collapsed state insider's view. 5 00:00:23,640 --> 00:00:29,040 Now it's time to create the expanded state insider route view. 6 00:00:29,040 --> 00:00:35,970 So inside it's relatively out here and now I'm going to paste some lines of code here so we have the 7 00:00:35,970 --> 00:00:44,240 expanded state as you can see we have this linearly out and the idea is expanded view lay out which 8 00:00:44,370 --> 00:00:52,210 is that contently height ISTEP content visibility gun orientation horizontal here. 9 00:00:52,410 --> 00:00:57,760 The background is this color we can see at the left hand side but we can see this kind of this is actually 10 00:00:57,780 --> 00:00:58,530 the background. 11 00:00:58,650 --> 00:01:00,550 I used the RGV color. 12 00:01:00,780 --> 00:01:03,940 And I also use this all for attributes. 13 00:01:03,960 --> 00:01:08,820 The value should be between zero and number one if you want to you can manipulate this value. 14 00:01:08,820 --> 00:01:11,300 For example 0.8. 15 00:01:11,310 --> 00:01:18,790 And you know that the Alfar attribute is actually for the transparency of our view. 16 00:01:19,570 --> 00:01:26,460 And we have this padding attribute which is actually for P If you want to you can change this value. 17 00:01:26,470 --> 00:01:33,010 The padding is the inner space of our expanded state expanded view actually. 18 00:01:33,400 --> 00:01:36,390 So now inside is linearly out here. 19 00:01:36,490 --> 00:01:44,050 Let me show you the emulator and here you can see this lion image this image for the previous animal. 20 00:01:44,050 --> 00:01:50,410 For example we have this image that specifies the VDU of another animal. 21 00:01:50,410 --> 00:01:53,590 We have this image that specifies the next animal. 22 00:01:53,590 --> 00:01:58,230 If I click on this one for example it's going to allow us to see the next animal. 23 00:01:58,360 --> 00:02:05,350 We have this a close button this close image and finally we have this open image. 24 00:02:05,440 --> 00:02:08,700 If we click on this one our application is going to be open. 25 00:02:08,710 --> 00:02:12,070 So let's click on it and now we can see that the app is opened. 26 00:02:12,130 --> 00:02:16,030 If you click on the spot and again now it can actually create this visit for us. 27 00:02:16,090 --> 00:02:19,220 And I can switch to the expanded view. 28 00:02:19,570 --> 00:02:22,190 So let's go back to android studio. 29 00:02:22,330 --> 00:02:24,190 Let's go inside this linearly out. 30 00:02:24,190 --> 00:02:27,040 That is actually for the expanded state. 31 00:02:27,040 --> 00:02:31,590 So here I pasted these lines of code and image view. 32 00:02:31,900 --> 00:02:41,460 And here we have the layout of the image view 100 DP as you can see and the layout height is 100 dpi. 33 00:02:41,560 --> 00:02:49,210 And here in order to refer to our lion image we used this attribute as RC and we are referring to the 34 00:02:49,230 --> 00:02:51,580 ASP enjoyable slash lion. 35 00:02:51,760 --> 00:02:56,000 If you want to you can specify an ID for this image for you. 36 00:02:56,410 --> 00:02:59,400 So Id sign a plus ID slash. 37 00:02:59,470 --> 00:03:05,730 So it is going to be like an image of you like an image. 38 00:03:05,980 --> 00:03:06,480 OK. 39 00:03:06,670 --> 00:03:13,840 And later inside our floating View service that justified we can create an unclick listener for this 40 00:03:13,840 --> 00:03:19,910 image so that whenever the user clicks on the image or Tartar's this image something is going to happen. 41 00:03:19,930 --> 00:03:21,900 We can't show it to the user. 42 00:03:21,910 --> 00:03:24,280 All you can do whatever you want. 43 00:03:24,310 --> 00:03:25,840 So this is going to be the lion image. 44 00:03:25,840 --> 00:03:27,740 Let's create a comment here. 45 00:03:27,820 --> 00:03:37,830 Sort of an attack exclamation mark dash dash lion image and then there's that closing intact. 46 00:03:37,910 --> 00:03:45,080 So now it's time to specify this previous button that specifies the previous animal. 47 00:03:45,080 --> 00:03:45,580 Right. 48 00:03:45,800 --> 00:03:49,330 So let's go back to code and below this image of you for the lion. 49 00:03:49,340 --> 00:03:51,290 Let me paste some lines of quote here. 50 00:03:51,290 --> 00:03:59,530 Previous animal BOTTEN here and the idea is pity and previous to lay out which is pretty deeply lay 51 00:03:59,540 --> 00:04:05,570 out Haifaa pretty deeply lay out gravity center vertical So it's going to position our image view vertically 52 00:04:05,660 --> 00:04:12,380 Center at the center vertically and we have the margin left five TPD outer space from the left is 5 53 00:04:12,380 --> 00:04:13,140 DP. 54 00:04:13,220 --> 00:04:18,470 And finally we have this as as our C attribute that refers to the previous Potten image. 55 00:04:18,470 --> 00:04:23,070 Let me show the emulator and we have this image. 56 00:04:23,370 --> 00:04:25,820 So now it's time to refer to this one. 57 00:04:26,030 --> 00:04:27,130 Let's go back to code. 58 00:04:27,140 --> 00:04:29,870 So again I pasted some lines of code here. 59 00:04:30,090 --> 00:04:31,490 Leppert video image. 60 00:04:31,490 --> 00:04:37,210 So as you can see because it's somewhat likely a video of the leopard. 61 00:04:37,340 --> 00:04:41,490 So that's why I actually named the leopard video image. 62 00:04:41,690 --> 00:04:43,370 So here we have an image view. 63 00:04:43,370 --> 00:04:52,440 The idea is Leppert image that lay out all it is 100 Deep-Sea lay out height is 100 dpi to lay out gravity 64 00:04:52,440 --> 00:04:57,680 is center vertical and the margin lift is five deep. 65 00:04:58,220 --> 00:05:01,960 And for the SRT attribute we are referring to the Lippard image. 66 00:05:02,030 --> 00:05:05,010 So next is this next part in. 67 00:05:05,210 --> 00:05:08,170 So let's go back to android studio here. 68 00:05:08,180 --> 00:05:11,120 So these are the lines of code that I pasted here. 69 00:05:11,150 --> 00:05:12,670 Next animal Potin. 70 00:05:12,800 --> 00:05:19,840 Here we have the ID PTEN next lay out which is pretty deep the lay out height is for TTP layout. 71 00:05:19,940 --> 00:05:27,530 Gravity is a center vertical and the layout margin left lift is a five DP and the RC attribute refers 72 00:05:27,710 --> 00:05:29,600 to the next button image. 73 00:05:29,930 --> 00:05:32,030 So let's see what's next. 74 00:05:32,030 --> 00:05:37,350 Now we need to put the close button and this open image. 75 00:05:37,610 --> 00:05:42,340 Let's go back to our studio close button and the Open button. 76 00:05:42,470 --> 00:05:49,690 You're going to use a relatively or another container here inside this linearly as this expanded state. 77 00:05:49,730 --> 00:05:58,600 So let's create a relatively out here relatively out and lay out what is wrapped content and the layout 78 00:05:58,610 --> 00:06:01,220 height is much parent. 79 00:06:01,250 --> 00:06:06,050 So what is the parent of this relatively out the parent of this relatively out. 80 00:06:06,050 --> 00:06:08,750 Is this linearly out of the expanded state. 81 00:06:08,750 --> 00:06:10,220 Let me scroll up a little. 82 00:06:10,220 --> 00:06:17,000 Here you can see this expanded state come in here and this linearly out is going to be the parent of 83 00:06:17,000 --> 00:06:23,230 this relatively earth and not is that the height of this linearly out is ALAP content. 84 00:06:23,540 --> 00:06:33,140 So this means that the height of this relatively out is going to be as tall as the parent the linear 85 00:06:33,170 --> 00:06:33,870 layer. 86 00:06:34,160 --> 00:06:36,620 So let's go inside is relatively out here. 87 00:06:36,620 --> 00:06:43,070 We don't have to specify an ID or any other attributes for this relatively And this little area just 88 00:06:43,220 --> 00:06:45,380 plays the role of a container. 89 00:06:45,380 --> 00:06:48,540 So let me pick some lines of code here. 90 00:06:48,740 --> 00:06:53,500 So this is the image view for the close button of the expand that's state. 91 00:06:53,690 --> 00:07:01,600 And here we have an image Bewley out which is two a.p delay at height is to ADP the ID attribute here. 92 00:07:01,600 --> 00:07:08,060 This is very important because this close button is going to be interactive by the user. 93 00:07:08,120 --> 00:07:14,330 We need to make clear create and unclick listener for this close button so that whenever the user interacts 94 00:07:14,330 --> 00:07:21,770 with the spot and we're going to close the expanded state so we have the close but an expanded as the 95 00:07:21,860 --> 00:07:27,250 value for the ID of the sim is few and as RC refers to the close button. 96 00:07:27,650 --> 00:07:34,220 So now we need to create another image view inside is relatively out for the Open button the open button 97 00:07:34,250 --> 00:07:37,550 allows the user to open the main application. 98 00:07:37,550 --> 00:07:40,600 So now let me paste some lines of code here. 99 00:07:40,910 --> 00:07:45,040 So we have the effect button for the expanded state image view. 100 00:07:45,260 --> 00:07:53,300 The ID is open button which is to and ETP the layout height is 20 DP and we have these attributes that 101 00:07:53,300 --> 00:07:56,180 is actually specific to the rel. out. 102 00:07:56,340 --> 00:07:56,600 OK. 103 00:07:56,600 --> 00:08:04,430 If we are not using a relatively out you cannot use this attribute it says lay out a line parent Bodom 104 00:08:05,090 --> 00:08:12,740 So parent here refers to this relatively at this image view is actually the child of this relatively 105 00:08:12,740 --> 00:08:15,860 And so when it says a line parent put him. 106 00:08:16,040 --> 00:08:23,240 This means that this image is going to be aligned at the body of the parent at the bottom of this relatively 107 00:08:23,240 --> 00:08:23,370 out. 108 00:08:23,390 --> 00:08:28,910 If I show you the emulator you can see that this open button here is actually aligned at the podium 109 00:08:29,180 --> 00:08:33,290 here and its close button here is at the top. 110 00:08:33,290 --> 00:08:40,860 So thats why we used these actually this attribute here and is it aligned parents buy them true. 111 00:08:40,860 --> 00:08:50,580 So we have the attributes or pet Android and notice that this relatively out here is inside these Linnett 112 00:08:50,580 --> 00:08:54,530 linearly out and the orientation of this linearly out is horizontal. 113 00:08:54,600 --> 00:08:55,220 Right. 114 00:08:55,290 --> 00:09:01,500 So thats why you can see that this close button and this Open button is actually horizontally positioned 115 00:09:01,500 --> 00:09:01,790 here. 116 00:09:01,790 --> 00:09:06,830 First we have the line and we have this previous button Leppert image next button. 117 00:09:06,870 --> 00:09:12,690 And then we have this relatively held that contains this button and this Open button. 118 00:09:12,900 --> 00:09:14,540 So hopefully that makes sense. 119 00:09:14,550 --> 00:09:20,130 Let's go back to our codes in Andrys studio and here we have the Open button. 120 00:09:20,370 --> 00:09:27,270 And I think our job is finished and I think thats enough for this tutorial it unless its really going 121 00:09:27,270 --> 00:09:32,720 to add codes to these floating views service that java file. 122 00:09:33,150 --> 00:09:35,130 So thank you very much for watching. 123 00:09:35,130 --> 00:09:40,950 If you have any questions about this concept please post a discussion in the course and then I'll do 124 00:09:40,950 --> 00:09:46,310 my best to answer all of your questions and I look forward to seeing you in the next two or three.