1 00:00:00,260 --> 00:00:01,260 Hi everyone. 2 00:00:01,430 --> 00:00:06,870 So in this story we're going to go ahead and create another reproduction of the Android application 3 00:00:06,870 --> 00:00:08,700 called colored app. 4 00:00:08,700 --> 00:00:14,800 So as you can see I actually updated my android Studio 2 version 2.0 three point two. 5 00:00:15,190 --> 00:00:20,550 And let's create an android studio project to just click on this start in your Android studio project 6 00:00:20,670 --> 00:00:26,550 and here for the application and just type in here color app color app and you can specify the company 7 00:00:26,550 --> 00:00:31,800 domain here and the package name and the project's location just carry on next. 8 00:00:31,800 --> 00:00:38,910 So here choose minimum STK AP A16 Android 4.1 did it mean for the phone and tablet. 9 00:00:39,000 --> 00:00:43,790 So just got to connect and here is interactivity next. 10 00:00:43,800 --> 00:00:45,420 So here I don't change anything. 11 00:00:45,420 --> 00:00:46,600 Just click on finish. 12 00:00:46,710 --> 00:00:49,350 So as you can see here our project is created. 13 00:00:49,380 --> 00:00:53,870 So now let's first design the user interface of the application. 14 00:00:53,880 --> 00:00:56,880 So let's go through the activity underlaid minute example here. 15 00:00:56,880 --> 00:01:01,710 So as you can see we just need to open the rest for their layout and then double click on this activity 16 00:01:01,710 --> 00:01:02,940 under Lowman and examen. 17 00:01:03,060 --> 00:01:05,150 So let me double click on this tab here. 18 00:01:05,160 --> 00:01:06,930 Activity on the limited example. 19 00:01:06,930 --> 00:01:12,480 In order to make this area wider so let's select is hello world takes view and then press on delete 20 00:01:12,480 --> 00:01:13,590 key on your keyboard. 21 00:01:13,860 --> 00:01:16,230 So now as you can see we have this constraint play out. 22 00:01:16,230 --> 00:01:19,880 So this is the level that you're going to use inside this application. 23 00:01:19,980 --> 00:01:22,410 So insert is pallete section. 24 00:01:22,410 --> 00:01:30,210 Just click on actually all right here select button and just directly spotted here into this lay out 25 00:01:30,420 --> 00:01:30,940 here. 26 00:01:31,140 --> 00:01:38,940 And as you can see I am actually centering the Spartan center horizontally and I am position according 27 00:01:38,940 --> 00:01:39,810 to these guidelines. 28 00:01:39,820 --> 00:01:41,080 So just put it here. 29 00:01:41,080 --> 00:01:42,490 Here look at these icons. 30 00:01:42,600 --> 00:01:48,260 The first one is what the first one is it's going to actually show us the descriptions height constraints. 31 00:01:48,360 --> 00:01:51,500 So now the constraints is actually on right. 32 00:01:51,510 --> 00:01:57,460 This means that if you actually hover over the spot and you can see these constraints here. 33 00:01:57,480 --> 00:02:00,640 The second option is this one it says turn off water. 34 00:02:00,660 --> 00:02:04,720 So this means now this option is actually turned on. 35 00:02:04,770 --> 00:02:11,580 So this means that when you put a user interface component inside your layout the constraints is going 36 00:02:11,580 --> 00:02:16,330 to be created automatically for that specific user interface component. 37 00:02:16,560 --> 00:02:21,810 So I just put the spot in here as you can see these constraints are actually created a constraint to 38 00:02:21,810 --> 00:02:28,230 the left edge of the screen are constrained to the top edge here to the actually body edge of this part 39 00:02:28,230 --> 00:02:32,010 here and our constraints to the right edge of the screen. 40 00:02:32,010 --> 00:02:34,640 So now let's actually select the spot. 41 00:02:34,710 --> 00:02:38,840 And inside this property section you can these size constraints here. 42 00:02:38,880 --> 00:02:44,750 So I want this button to take the entire Viets of these constraints laid out. 43 00:02:44,760 --> 00:02:49,350 So let's actually to change the size constraint for the beat. 44 00:02:49,380 --> 00:02:55,870 So just click on it and change it to match constraints as you can see there is there is still some actually 45 00:02:55,920 --> 00:03:00,360 space here between the Spartan and leave and the left edge of the screen. 46 00:03:00,360 --> 00:03:07,200 So at the podium just click on text tab and you can see that these are constraints layout. 47 00:03:07,410 --> 00:03:12,550 And here you can see that this is the Viets match parent and the height match parent. 48 00:03:12,990 --> 00:03:20,190 And we have this button here so you can see that the piece is zero DP The height is wrapped content. 49 00:03:20,190 --> 00:03:27,000 We have the margin top which is actually 16 DP We have the text and we have the constraint left to the 50 00:03:27,000 --> 00:03:28,230 left of patent. 51 00:03:28,230 --> 00:03:29,480 So what is the patent. 52 00:03:29,490 --> 00:03:36,320 The patent is constrained to lay out and we have constraints right to the right of patent again patent 53 00:03:36,330 --> 00:03:43,050 refers to the constraints lay out because disporting is inside these constraints they act and we have 54 00:03:43,200 --> 00:03:45,580 constraints top to the top of patent. 55 00:03:45,600 --> 00:03:49,120 So lets actually click on this design tab here again. 56 00:03:49,680 --> 00:03:55,410 So now we have this spot in lets select a spot in and change the idea of this button. 57 00:03:55,410 --> 00:04:03,470 So the idea is going to be between PTEN take a picture take a picture and then press on and tell on 58 00:04:03,490 --> 00:04:04,200 your keyboard. 59 00:04:04,300 --> 00:04:10,630 Let's also change the text of this button so you can select a spot in and for the text attribute here 60 00:04:10,660 --> 00:04:12,470 inside this property section. 61 00:04:12,550 --> 00:04:19,100 I can't just step in here take a picture take a picture and then put it on your keyboard. 62 00:04:19,360 --> 00:04:20,540 So that's it. 63 00:04:20,540 --> 00:04:24,410 Now let's add another button into this constraint layout. 64 00:04:24,520 --> 00:04:29,920 So again inside this palette section click on all and select this button and just drag it here and put 65 00:04:29,920 --> 00:04:32,280 it below this take the picture button here. 66 00:04:32,410 --> 00:04:32,970 Right. 67 00:04:32,980 --> 00:04:33,810 Put it here. 68 00:04:34,090 --> 00:04:38,470 And as you can see these constraints are actually created automatically automatically. 69 00:04:38,620 --> 00:04:44,070 But we need to create a constraint to them actually the bottom edge of this take a picture button. 70 00:04:44,080 --> 00:04:50,790 So as you can see if I hover over these top it of the spot and you can see this little circle pulsating 71 00:04:50,800 --> 00:04:51,400 right. 72 00:04:51,520 --> 00:04:57,280 Or you can create a constraint to the bottom edge of this pick picture button here. 73 00:04:57,310 --> 00:04:57,960 Right. 74 00:04:57,970 --> 00:05:01,480 I just need to create this constraint here and I just need to really see it. 75 00:05:01,510 --> 00:05:04,030 Now I can see that this constraint is created. 76 00:05:04,270 --> 00:05:08,290 So let's increase that top margin of the spot in so select a spot. 77 00:05:08,320 --> 00:05:10,650 And here you can see this margin top here right. 78 00:05:10,780 --> 00:05:14,720 So let's change it to 20 and that person into the keyboard. 79 00:05:14,860 --> 00:05:19,980 So you can see now there is actually a space here between the spot and it's the computer button. 80 00:05:19,990 --> 00:05:26,820 Now again I want this Spartan to take a to actually match constraints and should be able to change the 81 00:05:27,550 --> 00:05:28,530 size constraint. 82 00:05:28,540 --> 00:05:29,250 Right. 83 00:05:29,260 --> 00:05:30,420 So select the spot. 84 00:05:30,730 --> 00:05:35,460 And here inside this property section you can see this size constraint here for the width of this button 85 00:05:35,470 --> 00:05:35,970 right. 86 00:05:35,980 --> 00:05:38,910 Just click on it and change it to match constraints. 87 00:05:38,910 --> 00:05:45,240 So you can see that it is actually almost taking the entire weight of the patent which is this constraint 88 00:05:45,310 --> 00:05:45,870 out. 89 00:05:46,270 --> 00:05:54,490 So select the Spartan and for the idea just they've been here between say Picture BATNA save picture 90 00:05:55,140 --> 00:06:02,650 and then entered on your keyboard and for the text attribute here to step in here to save or save the 91 00:06:02,650 --> 00:06:07,330 picture save the picture and then person enter on your keyboard. 92 00:06:07,450 --> 00:06:08,650 So that's it. 93 00:06:08,670 --> 00:06:14,480 Now it's time to add an image view into our constraint play out here. 94 00:06:14,560 --> 00:06:18,150 First of all let's actually decrease the top margin here. 95 00:06:18,280 --> 00:06:23,920 Let's change this select Save the picture button and change this number two in here for the top margin 96 00:06:23,950 --> 00:06:28,550 and change it to actually number 14 and then percentage on your keyboard. 97 00:06:28,570 --> 00:06:30,490 So not now I think it is good. 98 00:06:30,880 --> 00:06:33,850 Let's add an image view into our constraints. 99 00:06:33,880 --> 00:06:39,790 So inside this palette section just click on images and he'll select this image view right and just 100 00:06:39,790 --> 00:06:44,930 drag it here into this kind of straitly out and below it is see this picture button. 101 00:06:44,950 --> 00:06:51,260 So now when you actually put it there it's going to ask you to select a picture such as this one. 102 00:06:51,370 --> 00:06:52,560 Eissler turnaround. 103 00:06:52,810 --> 00:06:54,300 And then just click on OK. 104 00:06:54,700 --> 00:06:57,600 So now this picture is added to our constraints. 105 00:06:57,980 --> 00:07:03,790 So now it's position here as you can see that lift constraint and the right constraint is actually created 106 00:07:03,790 --> 00:07:04,230 here. 107 00:07:04,270 --> 00:07:13,200 So I can just hover over this top edge here of this image view you can see this circle that is pulsating. 108 00:07:13,210 --> 00:07:17,600 I can't just create a constraint to the bottom edge of this save the picture button. 109 00:07:17,620 --> 00:07:23,170 So just select it and just create a constraint that by then much by the edge of the Save the picture 110 00:07:23,170 --> 00:07:23,600 button. 111 00:07:23,620 --> 00:07:25,470 And now this constraint is created. 112 00:07:25,690 --> 00:07:29,250 So let's change the top margin here of this constraint. 113 00:07:29,260 --> 00:07:33,010 This change is change this value to number 15. 114 00:07:33,010 --> 00:07:35,130 And then President of your keyboard. 115 00:07:35,240 --> 00:07:43,430 Now let's actually assign Let's change the left field and the height to a fixed value. 116 00:07:43,750 --> 00:07:50,980 So select this image view and for the layout fit here inside this property section just type in here. 117 00:07:50,980 --> 00:07:55,000 Number 150 and that person entered on your keyboard. 118 00:07:55,000 --> 00:08:02,100 And again let's select this image view and for the of height just open here 150 and the person and you 119 00:08:02,140 --> 00:08:02,970 on your keyboard. 120 00:08:02,990 --> 00:08:04,700 So it is good right. 121 00:08:04,720 --> 00:08:10,960 We can see that there is a left there is actually a constraint from the left edge of this image to the 122 00:08:10,960 --> 00:08:17,530 left edge of the screen and there is a constraint from the right of this image view to the right edge 123 00:08:17,560 --> 00:08:18,520 of this screen. 124 00:08:18,670 --> 00:08:23,220 So now that the additive image let's assign an ID to this image view. 125 00:08:23,290 --> 00:08:30,390 So for the ID just type in here I m g r m g taken or I m g for two I m g for two. 126 00:08:30,540 --> 00:08:32,310 And that person on your keyboard.