1 00:00:00,300 --> 00:00:05,920 Hi everyone in this the Tauriel we're going to go ahead and create another Android application. 2 00:00:05,940 --> 00:00:11,570 So just click on this start in your Android studio project and then for the application name just a 3 00:00:11,560 --> 00:00:20,570 pin here app 54 and then click on next and then here choose AP 16 Android 4.1 bean next. 4 00:00:20,610 --> 00:00:24,790 And here choose blench activity next and then click on finish. 5 00:00:25,320 --> 00:00:26,260 OK everyone. 6 00:00:26,280 --> 00:00:28,800 Now let's actually the select is we are here. 7 00:00:28,840 --> 00:00:29,980 Clover Virtex view. 8 00:00:30,210 --> 00:00:34,830 And then press on delete key on your keyboard and then double click on the seller's folder. 9 00:00:34,870 --> 00:00:41,190 Lay out activity on the line of the examine and then choose this floating action button here and then 10 00:00:41,190 --> 00:00:42,920 press on delete here on your keyboard. 11 00:00:43,140 --> 00:00:46,690 So let's go actually to go back and say this content underline main an example. 12 00:00:46,770 --> 00:00:50,170 Now let's actually drag linearly out a vertical. 13 00:00:50,180 --> 00:00:50,450 OK. 14 00:00:50,460 --> 00:00:51,880 Into this relatively healthy. 15 00:00:51,900 --> 00:00:55,610 So put it at the center of this relatively out here. 16 00:00:55,750 --> 00:00:58,890 OK so now let's actually click on this text top here. 17 00:00:58,920 --> 00:00:59,510 OK. 18 00:00:59,700 --> 00:01:03,870 And here as you can see we have these are padding attributes here. 19 00:01:03,870 --> 00:01:04,410 OK. 20 00:01:04,410 --> 00:01:09,090 So just select all of these attributes here and then press on directly on your keyboard. 21 00:01:09,090 --> 00:01:09,590 OK. 22 00:01:09,840 --> 00:01:12,260 So on actually to go back and say this design tab. 23 00:01:12,420 --> 00:01:17,580 Now as you can see if I click on this linearly that's the call here as you can see it is now covering 24 00:01:17,580 --> 00:01:21,600 the entire width and the entire height of these are relatively healthy. 25 00:01:21,650 --> 00:01:27,290 OK so now let's actually do our list view into these linearly or call. 26 00:01:27,510 --> 00:01:30,940 So here as you can see inside of these containers fall there. 27 00:01:30,980 --> 00:01:31,290 OK. 28 00:01:31,290 --> 00:01:37,580 As you can see inside of these containers folder if you have a list view OK selected and put it inside 29 00:01:37,590 --> 00:01:42,770 these linearly Elsbeth's the code and then put it at the center of this linearly as vertical. 30 00:01:42,770 --> 00:01:43,380 OK. 31 00:01:43,770 --> 00:01:46,790 So as you can see here this is a list you double click on it. 32 00:01:46,830 --> 00:01:47,360 OK. 33 00:01:47,550 --> 00:01:54,290 And for the ID just type in here is the view OK and then person enter key on your keyboard. 34 00:01:54,600 --> 00:01:59,340 So now I want to actually create another XML file in my project. 35 00:01:59,340 --> 00:02:04,130 So I just need to select the layout folder OK and then double click on it Neal. 36 00:02:04,470 --> 00:02:09,870 And then here examen as you can see here and then click on layout exemplified. 37 00:02:09,900 --> 00:02:10,570 OK. 38 00:02:10,920 --> 00:02:25,030 So for the name of our example file just type in here are customized customized underline our list view. 39 00:02:25,250 --> 00:02:26,720 And here for the tag. 40 00:02:26,990 --> 00:02:31,490 Just leave leave it as default linearly out and then click on finish. 41 00:02:31,940 --> 00:02:35,710 So as you can see here this is our customized customized list view. 42 00:02:35,780 --> 00:02:36,280 OK. 43 00:02:36,440 --> 00:02:39,190 Let's actually go inside this text tab here. 44 00:02:39,200 --> 00:02:46,060 As you can see and now it's actually and other attributes for the orientation just assign the value 45 00:02:46,070 --> 00:02:46,730 vertical. 46 00:02:46,820 --> 00:02:47,490 OK. 47 00:02:47,830 --> 00:02:53,860 And now let's actually assign a value background color or background color. 48 00:02:53,960 --> 00:02:56,890 So for the background color you can choose by get out OK. 49 00:02:57,110 --> 00:03:02,770 And instead of double quotes Let's actually assign an algebra color here. 50 00:03:02,780 --> 00:03:04,810 So now let's actually to go to their web browser. 51 00:03:04,970 --> 00:03:07,770 And as you can see if you have these colors here. 52 00:03:07,850 --> 00:03:08,450 OK. 53 00:03:08,630 --> 00:03:12,280 So for example we can choose this color here. 54 00:03:12,290 --> 00:03:12,740 OK. 55 00:03:12,800 --> 00:03:19,570 So I can't just put this hex value to my background color here inside of these double quotes. 56 00:03:19,580 --> 00:03:21,030 I just need to put in a hashtag. 57 00:03:21,050 --> 00:03:24,670 So here I can just copy this hex value. 58 00:03:25,040 --> 00:03:27,370 And then I can't just put this value here. 59 00:03:27,440 --> 00:03:28,070 OK. 60 00:03:28,610 --> 00:03:34,700 And if I go back and say this design tab now as you can see the background color of my actually of my 61 00:03:35,150 --> 00:03:36,410 layout is actually changed. 62 00:03:36,410 --> 00:03:36,940 OK. 63 00:03:37,280 --> 00:03:39,460 And now there's actually to go back. 64 00:03:39,470 --> 00:03:44,880 So now let's actually track are relatively out into these linearly alphabetical. 65 00:03:44,930 --> 00:03:47,570 So now I'm going to actually explain what is relatively. 66 00:03:47,630 --> 00:03:53,700 OK so just select this relatively out here and then put it inside this linearly alphabetical. 67 00:03:53,720 --> 00:03:54,270 OK. 68 00:03:54,530 --> 00:04:00,720 So now we have a relatively healthy year inside of this linearly alphabetical by using RLT are relatively 69 00:04:00,720 --> 00:04:01,120 out. 70 00:04:01,220 --> 00:04:05,510 You can actually place your components relative to each other. 71 00:04:05,570 --> 00:04:05,980 OK. 72 00:04:06,110 --> 00:04:11,570 So for example if you want to actually drag an image view into this relative lay out. 73 00:04:11,780 --> 00:04:14,550 So as you can see here we have an image view here OK. 74 00:04:14,690 --> 00:04:17,260 So I can just put it here any way I want. 75 00:04:17,270 --> 00:04:17,850 OK. 76 00:04:18,140 --> 00:04:19,880 So I want to actually put this here. 77 00:04:20,000 --> 00:04:21,230 And as you can see here it is going. 78 00:04:21,230 --> 00:04:26,060 It is going to actually put this image view relative to the other values. 79 00:04:26,060 --> 00:04:26,510 OK. 80 00:04:26,660 --> 00:04:30,890 So as you can see here at the top it says a line patent left margin. 81 00:04:30,950 --> 00:04:38,510 So if I actually put it at the near of the left of my screen as you can see here it's going to say as 82 00:04:38,510 --> 00:04:42,080 you can see the value of this Margene is actually going to be reduced. 83 00:04:42,080 --> 00:04:42,400 OK. 84 00:04:42,410 --> 00:04:44,920 So as you can see here or I can just put it here. 85 00:04:44,930 --> 00:04:45,510 OK. 86 00:04:45,770 --> 00:04:51,230 So as you can see here it's going to actually place my component relative to other values. 87 00:04:51,240 --> 00:04:51,660 OK. 88 00:04:51,770 --> 00:04:53,220 So I can't just put it here. 89 00:04:53,470 --> 00:04:54,160 OK. 90 00:04:54,590 --> 00:04:56,490 So now I have an image view here. 91 00:04:56,510 --> 00:05:02,700 OK now let's actually first of all we need to track some images into our project. 92 00:05:02,720 --> 00:05:03,290 OK. 93 00:05:03,470 --> 00:05:10,160 So in order to do that I have some images on my desktop inside the resources folder and here as you 94 00:05:10,160 --> 00:05:12,610 can see inside of this app fretty for images. 95 00:05:12,740 --> 00:05:18,680 I have these images so I just need to select all of these images and you can also download these images 96 00:05:18,830 --> 00:05:19,950 in the resources folder. 97 00:05:20,000 --> 00:05:20,620 OK. 98 00:05:20,810 --> 00:05:23,330 And I just need to copy these images. 99 00:05:23,360 --> 00:05:24,270 OK. 100 00:05:24,620 --> 00:05:32,640 So I just right click on them and then click on copy 10 items and then I just need to click on these 101 00:05:32,740 --> 00:05:36,330 triable folder as you can see here in my android studio. 102 00:05:36,330 --> 00:05:42,980 Id say these arrests folder here inside I just need to click on these driveable folder right click on 103 00:05:42,980 --> 00:05:44,490 it and they're here. 104 00:05:44,600 --> 00:05:46,960 I just need to paste these images here. 105 00:05:47,150 --> 00:05:47,660 OK. 106 00:05:47,840 --> 00:05:49,770 And then here you just need to click on. 107 00:05:49,790 --> 00:05:50,370 OK. 108 00:05:50,690 --> 00:05:53,470 So as you can see here now we have these images here. 109 00:05:53,540 --> 00:05:54,190 OK. 110 00:05:54,620 --> 00:05:56,920 So here let's try to select this image view. 111 00:05:57,200 --> 00:06:02,370 And now for the live feed I can just assign a value 100. 112 00:06:02,390 --> 00:06:06,110 And for the layout height I can assign the value 100. 113 00:06:06,160 --> 00:06:09,690 OK so now let's actually find these are the attributes. 114 00:06:09,950 --> 00:06:13,310 As you can see here this is the s.c.s tribute. 115 00:06:13,490 --> 00:06:21,080 I can just click on this button here as you can see and or I can just double click on this image here. 116 00:06:21,080 --> 00:06:21,460 OK. 117 00:06:21,500 --> 00:06:23,480 It doesn't mean it doesn't make any difference. 118 00:06:23,780 --> 00:06:29,870 And here I just need to click on this button here and then click on this project tab and then close 119 00:06:29,870 --> 00:06:31,080 this a colored folder. 120 00:06:31,130 --> 00:06:37,610 And here as you can see for example I can just search for one of these images for example I can search 121 00:06:37,610 --> 00:06:39,640 for the tiger image OK. 122 00:06:39,680 --> 00:06:41,370 So this is my target image. 123 00:06:41,630 --> 00:06:44,200 And then here I can just click on OK. 124 00:06:44,450 --> 00:06:46,110 So this is my target image here. 125 00:06:46,130 --> 00:06:46,740 OK. 126 00:06:47,000 --> 00:06:51,080 So in this application if you want to actually create create a customized list. 127 00:06:51,110 --> 00:06:52,040 OK. 128 00:06:52,160 --> 00:06:54,510 So first this is our image. 129 00:06:54,890 --> 00:07:01,370 And now I want to actually put in a large takes few here into this little relatively out as you can 130 00:07:01,370 --> 00:07:01,840 see. 131 00:07:02,030 --> 00:07:07,640 So here as you can see I can actually put this text view anywhere I want inside of the screen. 132 00:07:07,640 --> 00:07:08,070 OK. 133 00:07:08,240 --> 00:07:12,590 So it's going to actually put this text view relative to other components. 134 00:07:12,590 --> 00:07:17,790 For example I am actually putting this text view at the right of this image view. 135 00:07:17,870 --> 00:07:18,450 OK. 136 00:07:18,590 --> 00:07:24,440 So to the right of assignment operator image view and as you can see it says a line pattern top actually 137 00:07:24,570 --> 00:07:27,520 write a line these this component to the top. 138 00:07:27,540 --> 00:07:28,160 OK. 139 00:07:28,500 --> 00:07:34,620 So the parent means the parent view for example the parent of this component is this relatively Act 140 00:07:34,830 --> 00:07:38,550 and the parent of the relative that is linearly out OK. 141 00:07:38,910 --> 00:07:45,030 So as you can see this image view as you can see is actually our child view. 142 00:07:45,080 --> 00:07:45,560 OK. 143 00:07:45,690 --> 00:07:48,070 And the pad interview is relatively close. 144 00:07:48,150 --> 00:07:55,140 So this textbook that I am going to put inside this relatively out is actually a child's view and the 145 00:07:55,140 --> 00:07:57,310 parent view is relatively OK. 146 00:07:57,480 --> 00:07:59,320 So I just want to put it here. 147 00:07:59,880 --> 00:08:03,430 And as you can see that the color of the text is black. 148 00:08:03,600 --> 00:08:05,250 So we need to change that color. 149 00:08:05,280 --> 00:08:14,440 So first of all just selectees takes we are here double to the Chinese and 14 takes just typing in here 150 00:08:14,970 --> 00:08:21,760 our name of the animal and put a call in here. 151 00:08:21,930 --> 00:08:22,570 OK. 152 00:08:22,860 --> 00:08:31,820 And for the ID just type in here RTX the animal name and then press on Enter key on your keyboard. 153 00:08:31,830 --> 00:08:35,260 So now let's actually change the color of this text view. 154 00:08:35,280 --> 00:08:38,090 So just click on this a text type here. 155 00:08:38,370 --> 00:08:39,490 As you can see here. 156 00:08:39,810 --> 00:08:44,160 You have these relatively out as you can see inside of this linearly out here. 157 00:08:44,160 --> 00:08:44,880 OK. 158 00:08:45,300 --> 00:08:51,870 And we have this image view here in say that these are relatively out and as you can see here you have 159 00:08:52,080 --> 00:08:55,540 these attributes that are specifically for this image. 160 00:08:55,580 --> 00:08:56,010 OK. 161 00:08:56,130 --> 00:08:59,580 Lay out a hundred lay out height a hundred. 162 00:08:59,730 --> 00:09:07,720 And the idea is image view and as you can see here this is the this is the XML way of writing the IDs 163 00:09:07,820 --> 00:09:09,830 at sign Plus the slash. 164 00:09:10,380 --> 00:09:16,600 And here as you can see it says lay out a line parent up to lay out a line. 165 00:09:16,610 --> 00:09:23,670 Parents left the two sides you can see inside this design top that it is actually aligned to the top 166 00:09:23,880 --> 00:09:24,760 of the parent. 167 00:09:24,810 --> 00:09:25,670 OK. 168 00:09:25,680 --> 00:09:29,310 And it is also aligned to the left of the parent. 169 00:09:29,310 --> 00:09:29,540 OK. 170 00:09:29,550 --> 00:09:30,510 As you can see here. 171 00:09:30,510 --> 00:09:36,540 So inside this takes we can see these attributes and we have a line apparent start. 172 00:09:36,630 --> 00:09:40,520 So it is actually at the top left corner here. 173 00:09:40,530 --> 00:09:44,550 As you can see and that attribute is for that value. 174 00:09:44,550 --> 00:09:45,180 True. 175 00:09:45,630 --> 00:09:52,280 And we have this as our C at St. Roybal So it is at this at St. Roybal refers to this tribal folder 176 00:09:52,320 --> 00:09:55,070 inside this press folder slash Tiger. 177 00:09:55,080 --> 00:09:59,160 So it is actually referring to this tiger image as you can see here. 178 00:09:59,160 --> 00:09:59,590 OK.