1 00:00:00,320 --> 00:00:06,540 So now inside this palette section just click on images and select this image view and track this image 2 00:00:06,810 --> 00:00:09,600 into our constrained to lay out and release it here. 3 00:00:09,780 --> 00:00:12,200 So and is going to ask us to select one of these images. 4 00:00:12,210 --> 00:00:13,080 Let's select this one. 5 00:00:13,080 --> 00:00:15,210 I see Lanter around and then click on OK. 6 00:00:15,450 --> 00:00:21,000 So let's open the web browser and here look at this Web site here picks that come here you can actually 7 00:00:21,000 --> 00:00:23,130 find images for commercial use. 8 00:00:23,130 --> 00:00:25,020 Let me actually change the settings a little bit. 9 00:00:25,020 --> 00:00:31,150 All images changed it to virtual graphics and then click on search. 10 00:00:31,160 --> 00:00:34,060 So now I want to hear just select one of these images. 11 00:00:34,100 --> 00:00:36,350 I think this one is good. 12 00:00:36,830 --> 00:00:42,510 So now first let me tell you that your Android may not be able to actually the operating system actually 13 00:00:42,560 --> 00:00:45,180 may not be able to handle large images. 14 00:00:45,380 --> 00:00:51,790 If you want to use a very large image inside your application your app may may be going to be a crash. 15 00:00:51,950 --> 00:00:52,380 OK. 16 00:00:52,490 --> 00:00:59,420 So make sure to choose a very small image so that the Android operating system would not be actually 17 00:00:59,660 --> 00:01:04,170 have any problem in order to display this image to the user. 18 00:01:04,280 --> 00:01:06,350 So which was the size here. 19 00:01:06,620 --> 00:01:10,130 And then just click and download and I was going to download the image for us. 20 00:01:10,160 --> 00:01:15,280 So let's open the Android studio and let's actually open the project paint at the top. 21 00:01:15,300 --> 00:01:21,320 You can just click on View tool windows and then click on a project if you want to look at the project 22 00:01:21,320 --> 00:01:22,450 pane here. 23 00:01:22,490 --> 00:01:27,650 Now inside these folders just select this last for that open it and select this tribal folder. 24 00:01:27,650 --> 00:01:29,310 Let me show you the image. 25 00:01:29,360 --> 00:01:30,470 Here we have this image. 26 00:01:30,500 --> 00:01:36,210 First let me tell you a very important point you cannot use an image that contains a dash. 27 00:01:36,260 --> 00:01:41,720 This special character in its name lets select its image and let's actually rename this image we can 28 00:01:41,720 --> 00:01:45,830 actually look the same as or right click on it and then click on Renay right. 29 00:01:46,250 --> 00:01:46,780 Renay. 30 00:01:46,940 --> 00:01:51,160 And then then it should be for example ice cream a very simple name. 31 00:01:51,410 --> 00:01:52,110 This is good. 32 00:01:52,250 --> 00:01:58,340 And copy it just right click on this image and click on copy and then he'll go to Android studio right 33 00:01:58,340 --> 00:02:01,620 click on this driver for that and then paste. 34 00:02:01,700 --> 00:02:04,530 So here it's going to show you the style like just click on OK. 35 00:02:04,690 --> 00:02:09,510 It says copy is going I should copy that file for us to just click on the Cape and the image is copy 36 00:02:09,510 --> 00:02:11,980 it into our Android studio here. 37 00:02:11,990 --> 00:02:17,030 So now let's double click on this activity underline minute example let's select this image. 38 00:02:17,210 --> 00:02:20,710 And here inside these properties view we have this as our C compact. 39 00:02:20,750 --> 00:02:24,930 So let's actually click on this ellipsis button here this ellipsis button. 40 00:02:25,100 --> 00:02:30,750 Now here selectees triable tab and click on icecream and then click on OK. 41 00:02:31,070 --> 00:02:33,470 So we have this image here right. 42 00:02:33,470 --> 00:02:41,030 So first let me actually decrease the size of this image so I just actually select this image and this 43 00:02:41,240 --> 00:02:48,650 at the top left hand corner you can see this handler here that allows us to size this image right. 44 00:02:48,650 --> 00:02:53,630 So let's actually make it a little bit smaller and just select this image and drag it here with the 45 00:02:53,630 --> 00:02:54,590 top. 46 00:02:54,680 --> 00:02:55,950 And here I think it's good. 47 00:02:56,090 --> 00:02:56,620 Right. 48 00:02:56,930 --> 00:03:01,850 So now I want to actually create some constraints here. 49 00:03:01,910 --> 00:03:06,650 So here inside these properties window you can see all these attributes here. 50 00:03:06,680 --> 00:03:08,760 And the first one is scale type. 51 00:03:08,780 --> 00:03:12,540 I can't change this quilt for example 2 feet x y right. 52 00:03:12,560 --> 00:03:19,070 Or I can change it to fit center or I can actually change it to center. 53 00:03:19,180 --> 00:03:19,900 Right. 54 00:03:19,900 --> 00:03:22,620 So let's actually choose feet center here. 55 00:03:22,630 --> 00:03:27,980 I think it's with here now how to create constraints for this image. 56 00:03:28,090 --> 00:03:31,030 First of all let me actually show you some of these options here. 57 00:03:31,030 --> 00:03:34,930 The first one here at the top menu actually we have these options. 58 00:03:34,960 --> 00:03:37,870 The first one is this height constraints. 59 00:03:37,960 --> 00:03:40,860 So if you click on it it's going to actually hide the constraints for you. 60 00:03:40,990 --> 00:03:45,940 So it's not recommended to do that because when you want to design the application you want to see the 61 00:03:45,940 --> 00:03:47,200 constraints. 62 00:03:47,200 --> 00:03:50,650 And the second icon is this one it says what. 63 00:03:50,650 --> 00:03:51,990 Turn on auto connect. 64 00:03:51,990 --> 00:03:53,420 So what is this. 65 00:03:53,440 --> 00:03:57,850 This is actually going to create the constraints automatically for you. 66 00:03:57,940 --> 00:04:03,670 You just have to for example put the components here and it's going to actually automatically create 67 00:04:03,670 --> 00:04:04,740 the constraints for you. 68 00:04:04,840 --> 00:04:05,430 OK. 69 00:04:05,800 --> 00:04:10,030 So currently it is actually just turned off. 70 00:04:10,120 --> 00:04:15,250 So if you want to turn it on you can actually click on it and in order to turn this on this feature 71 00:04:15,250 --> 00:04:22,660 actually and now lets for example select this image and lets for example change it again. 72 00:04:22,670 --> 00:04:29,340 Let's put it here and now we can see that the constraints is actually created for me automatically. 73 00:04:29,390 --> 00:04:37,190 So this blueprint you can see that we have this lift constraint here and we have for example this top 74 00:04:37,190 --> 00:04:45,980 constraint we have the size constraints so in this image that is propertys view here you can see these 75 00:04:46,400 --> 00:04:48,770 size constraints inside these. 76 00:04:49,040 --> 00:04:51,620 Actually this square right. 77 00:04:51,710 --> 00:04:58,340 So if I click on these for example this size constraint here inside this square this is called the size 78 00:04:58,340 --> 00:05:04,470 constraint and it's going to specify the size of their user interface components inside our constraints. 79 00:05:04,580 --> 00:05:05,920 Let's click on it now. 80 00:05:05,930 --> 00:05:07,710 It changed to what. 81 00:05:07,850 --> 00:05:10,520 To actually match constraints. 82 00:05:10,640 --> 00:05:11,340 Right. 83 00:05:11,360 --> 00:05:16,970 It's going to take the entire constraint for us and it's going to actually fill up the constraint for 84 00:05:16,970 --> 00:05:17,180 us. 85 00:05:17,180 --> 00:05:19,230 You can see that the blueprint actually changed. 86 00:05:19,240 --> 00:05:23,110 If I click on it again now it is in love content. 87 00:05:23,520 --> 00:05:23,930 OK. 88 00:05:24,050 --> 00:05:26,530 I like the lay out piece is wrapped content right. 89 00:05:26,660 --> 00:05:27,740 If I click on it again. 90 00:05:27,980 --> 00:05:29,860 Now it is actually fixed. 91 00:05:29,930 --> 00:05:33,790 It is called a fixed constraint and the size is fixed. 92 00:05:33,830 --> 00:05:38,090 And he had the layout with is this value and the layout height is this value it is fixed. 93 00:05:38,090 --> 00:05:39,170 If I click on it again. 94 00:05:39,260 --> 00:05:44,830 Now it is going to actually see it is going to actually match the constraints he had for us. 95 00:05:44,840 --> 00:05:48,150 It's going to take the entire fleet without any margin. 96 00:05:48,260 --> 00:05:50,470 If we want to I can specify some margins here. 97 00:05:50,630 --> 00:05:53,500 So for example for the left margin I can't see 10. 98 00:05:54,230 --> 00:05:57,620 And for the right amount I can say for example 10. 99 00:05:57,680 --> 00:06:04,510 So now you can see that we have 10 value for the left margin and 10 value for the right margin here. 100 00:06:04,880 --> 00:06:10,610 And we have also a top margin if we want to I can't for example enter the value zero for the top margin. 101 00:06:11,060 --> 00:06:16,040 So for the top margin is assigned the value over I think 10 is good right. 102 00:06:16,040 --> 00:06:18,480 So let's run our application and let's see what happens. 103 00:06:18,480 --> 00:06:21,930 Just select one of these devices and then click on OK. 104 00:06:22,220 --> 00:06:26,570 So here we can see that our ice cream image is actually here right. 105 00:06:26,570 --> 00:06:29,240 Everything is set up automatically for us. 106 00:06:29,300 --> 00:06:31,820 So here this is actually done for us. 107 00:06:31,820 --> 00:06:39,590 This job is done for us by the Android studio by just turning on the water to kind of hear this feature 108 00:06:39,590 --> 00:06:40,370 of Android studio.