1 00:00:00,300 --> 00:00:05,460 Hire live on any story or even a hunch about trying to lay out in Android. 2 00:00:05,580 --> 00:00:11,160 So let's create an android studio project and for the application and just they've been here constraints 3 00:00:14,240 --> 00:00:16,300 in Android. 4 00:00:16,650 --> 00:00:23,570 So specifically the company domain package name here and then the project location just click next and 5 00:00:23,570 --> 00:00:29,940 here for the minimalistic nature's API 16 Android 4.1 did it mean for phone and tablet just couldn't 6 00:00:29,960 --> 00:00:30,840 connect. 7 00:00:31,160 --> 00:00:34,590 And here is MT-NW activity next. 8 00:00:34,610 --> 00:00:36,610 So he had just don't change anything. 9 00:00:36,650 --> 00:00:38,200 And then click on finish. 10 00:00:38,210 --> 00:00:41,300 So now as you can see here our project is created. 11 00:00:41,300 --> 00:00:43,910 So let's go to the activity Underland minute example. 12 00:00:43,910 --> 00:00:47,870 So here inside this project pane you can just open the rest for that. 13 00:00:47,870 --> 00:00:53,150 And then the layout folder I didn't see this activity underlined minute segment let's double click on 14 00:00:53,150 --> 00:00:56,360 this tab here in order to make this area wider. 15 00:00:56,360 --> 00:00:59,330 So now let me actually tell you about these views here. 16 00:00:59,340 --> 00:01:01,850 We have this view here and we have this one here. 17 00:01:01,850 --> 00:01:02,920 So what is this. 18 00:01:02,930 --> 00:01:04,240 This is actually a blueprint. 19 00:01:04,250 --> 00:01:10,700 This is called blueprint and this is used for Bayda actually designing and position in our user interface 20 00:01:10,700 --> 00:01:12,970 components inside our layout. 21 00:01:13,250 --> 00:01:16,320 So here you can see these icons at the top. 22 00:01:16,370 --> 00:01:19,220 And for example the first one is actually design only. 23 00:01:19,220 --> 00:01:23,690 So if I actually click on this one here the blueprint is going to be disappeared. 24 00:01:23,780 --> 00:01:28,420 So this is actually just the design and the second icon is show blueprint. 25 00:01:28,430 --> 00:01:31,280 If you click on it you can see that the design has disappeared. 26 00:01:31,310 --> 00:01:33,590 And the blueprint is appier here. 27 00:01:33,860 --> 00:01:37,730 And the first icon is actually designed plus blueprint. 28 00:01:37,730 --> 00:01:40,260 If I click on it you can see both of these views here. 29 00:01:40,310 --> 00:01:41,950 Right. 30 00:01:41,960 --> 00:01:42,860 So what is this one. 31 00:01:42,860 --> 00:01:50,110 This one is actually for use is used for actually watching the application in landscape mode or portrait. 32 00:01:50,180 --> 00:01:51,410 Let's actually click on it. 33 00:01:51,560 --> 00:01:55,300 You can see now the application is actually in landscape mode. 34 00:01:55,310 --> 00:01:57,830 If I click on it again now it is in portrait. 35 00:01:58,250 --> 00:02:00,940 And here this one is used for actually changing the device. 36 00:02:00,940 --> 00:02:06,560 If I click on it you can see all these devices Nexus One they see as Galaxy next was the Nexus 4 and 37 00:02:06,560 --> 00:02:08,500 all these other devices here. 38 00:02:08,810 --> 00:02:15,800 So for now we're going to actually stick with the Nexus 4 and here this is the actually the API that 39 00:02:15,800 --> 00:02:17,420 we are going to target. 40 00:02:17,420 --> 00:02:21,600 We are going to target apelike 25 because this is actually there. 41 00:02:21,890 --> 00:02:27,890 The API the only API that we can actually target a 25 This is the least the latest API that is actually 42 00:02:27,890 --> 00:02:29,680 introduced by Android. 43 00:02:30,050 --> 00:02:35,480 And here we can specify the app fien here if you want to we can actually specify the app from for example 44 00:02:35,720 --> 00:02:40,480 if I click on all we can for example change selectees will no titlebar right. 45 00:02:40,580 --> 00:02:46,860 Or if I click on material dark here you can for example select material that dialog that no action bar 46 00:02:47,690 --> 00:02:53,690 or if I select the material light I can select this one material that light but dark action. 47 00:02:53,690 --> 00:02:58,320 But if I click on this one here if it's so select select this one and then click on OK. 48 00:02:58,340 --> 00:03:01,590 Now you can see that the action is Blache right. 49 00:03:01,610 --> 00:03:07,620 This is actually dark and we have all these are for example languages here. 50 00:03:07,640 --> 00:03:13,510 If you want to actually translate my application to another language I can choose this option here. 51 00:03:13,520 --> 00:03:21,110 So I talked about translating our application to other languages in another section of the course so 52 00:03:21,110 --> 00:03:22,190 thoughtfully about these options. 53 00:03:22,190 --> 00:03:26,170 Now for now we just want to I just want to focus on the constraints left. 54 00:03:26,210 --> 00:03:31,130 So looking at these options here these options appear here because you're are using constraints lay 55 00:03:31,130 --> 00:03:31,640 out. 56 00:03:31,960 --> 00:03:33,500 So what is a constraint really are. 57 00:03:33,740 --> 00:03:40,670 So constraint is actually of the newest features that is actually introduced by Android in order to 58 00:03:41,630 --> 00:03:47,180 position our user interface components inside our layout this is actually an other side of the aisle. 59 00:03:47,190 --> 00:03:53,060 If we're at the bottom of the Android studio that's going to take a stab here we can see that we have 60 00:03:53,060 --> 00:03:56,820 constraints play out in Android studio 2.0 free. 61 00:03:57,110 --> 00:04:02,500 It is actually the default lay out that is going to be created whenever you create an android application. 62 00:04:02,750 --> 00:04:05,480 And let's go back to the design tab. 63 00:04:05,780 --> 00:04:11,690 Now we have this hill over takes let's actually for example select this hello world text view and you 64 00:04:11,690 --> 00:04:17,390 can actually drag it and we can for example change the place of this hello world wherever you want. 65 00:04:17,390 --> 00:04:19,890 For example I can put it here right. 66 00:04:19,910 --> 00:04:25,590 It's actually live with here and here on the right hand side you can see it is a propertys view. 67 00:04:26,120 --> 00:04:32,260 And we have the ID attribute so you can actually specify the idea of your hello world here and look 68 00:04:32,260 --> 00:04:34,230 at this one here for example. 69 00:04:34,310 --> 00:04:36,270 These are called constraints. 70 00:04:36,430 --> 00:04:43,230 So now for example select is text view and you can see this little circle here. 71 00:04:43,270 --> 00:04:46,620 This little circle that is actually pulsating here. 72 00:04:46,630 --> 00:04:53,860 Now I can select this one and then I can actually track it line to the top of the actually the top top 73 00:04:53,950 --> 00:04:56,670 edge of the view of my android view here. 74 00:04:56,680 --> 00:05:04,200 Let's actually put it here and then release it and now you can see that a constraint is actually created 75 00:05:04,200 --> 00:05:06,600 here and it is number eight here. 76 00:05:06,600 --> 00:05:07,690 So what is this number eight. 77 00:05:07,710 --> 00:05:15,300 This is actually called the Margene So here in the Properties window you can see that we have a constraint 78 00:05:15,330 --> 00:05:21,880 to the top of the Android view to top off a view actually and the margin is 8 so I can increase the 79 00:05:21,900 --> 00:05:25,760 margin for example I can change the margin to for example 20. 80 00:05:26,040 --> 00:05:27,930 And that person entered a new keyboard. 81 00:05:27,960 --> 00:05:34,020 So now you can see that the margin is 20 and the distance between this hello world to the top of the 82 00:05:34,020 --> 00:05:35,620 view is actually increased. 83 00:05:35,790 --> 00:05:40,950 If I want to I can actually just click on this dropdown here and select one of these values for example 84 00:05:41,020 --> 00:05:42,840 32 right. 85 00:05:42,840 --> 00:05:49,030 Or I can just put a custom value here for example 200 and then person enter on your keyboard. 86 00:05:49,080 --> 00:05:52,860 So now you can see that the Margene now is 200. 87 00:05:52,860 --> 00:05:55,370 Here the top margin is now 200. 88 00:05:55,950 --> 00:06:01,770 And we also have left margin bottom margin bottom and margin to the right. 89 00:06:01,770 --> 00:06:09,030 So let's actually select this left circle here that is pulsating here right to select this one and then 90 00:06:09,210 --> 00:06:14,580 drag a line a constraint to the left of the to the left edge of the view. 91 00:06:14,730 --> 00:06:15,830 Here we can see right. 92 00:06:16,050 --> 00:06:17,280 And then release it. 93 00:06:17,400 --> 00:06:24,880 Now a constraint is created to the left view to the left edge of the Android view here. 94 00:06:25,050 --> 00:06:30,250 And in the Properties window you can see this margin here and it says 8 right. 95 00:06:30,270 --> 00:06:35,010 I can actually for example change the value to 42 Right. 96 00:06:35,290 --> 00:06:37,800 Or I can change it to for example 2. 97 00:06:38,010 --> 00:06:40,330 And that person interregional keyboard. 98 00:06:40,330 --> 00:06:47,400 So now we can also create a constraint to the right and a constraint to the bottom right. 99 00:06:47,590 --> 00:06:53,950 So look at these handler here inside these properties we do is fight right if we actually just change 100 00:06:53,950 --> 00:06:55,440 the place of this handler. 101 00:06:55,440 --> 00:07:01,780 I can't I can't I can change the place of this hello world takes you here in say it is a blue print 102 00:07:01,780 --> 00:07:03,670 here you can see that the place is actually changed. 103 00:07:03,670 --> 00:07:07,730 If I put it here now the hello world is actually at the bottom of the find. 104 00:07:07,930 --> 00:07:13,860 So we have also this handler here in order to change the place are HELLO HELLO WORLD. 105 00:07:13,870 --> 00:07:21,160 Horizontally here for example here and we have to lay out lay out height. 106 00:07:21,170 --> 00:07:27,210 So now let's select this hello world view here and then press on delete key on your keyboard to select 107 00:07:27,210 --> 00:07:28,800 it and then press on religion or keyboard. 108 00:07:29,030 --> 00:07:32,300 So now I want to drag an image view into our view here.