1 00:00:00,120 --> 00:00:00,960 ‫Instructor: Hi! 2 00:00:00,960 --> 00:00:03,000 ‫Within this lecture we are going to finish 3 00:00:03,000 --> 00:00:04,920 ‫our user interface 4 00:00:04,920 --> 00:00:07,800 ‫by solving some problems that we may face 5 00:00:07,800 --> 00:00:10,530 ‫when we run it on emulator. 6 00:00:10,530 --> 00:00:12,750 ‫As you can see, we didn't click 7 00:00:12,750 --> 00:00:16,740 ‫on this button infer constraints like we did before. 8 00:00:16,740 --> 00:00:20,160 ‫So we don't have constraints 9 00:00:20,160 --> 00:00:25,160 ‫and the outcome of that might be very confusing. 10 00:00:25,260 --> 00:00:29,850 ‫So let's run this in this state and see what happens. 11 00:00:29,850 --> 00:00:34,850 ‫So when we don't add constraints to our layout 12 00:00:35,040 --> 00:00:40,040 ‫actually Android doesn't know where to locate those views. 13 00:00:40,230 --> 00:00:45,210 ‫So all of the views will be in a different state than this. 14 00:00:45,210 --> 00:00:47,550 ‫They will be all collected 15 00:00:47,550 --> 00:00:51,370 ‫on the left upper side of our emulator 16 00:00:52,750 --> 00:00:53,880 ‫once it builds, 17 00:00:53,880 --> 00:00:57,630 ‫once it's installed on our emulator. 18 00:00:57,630 --> 00:00:58,650 ‫As you can see now 19 00:00:58,650 --> 00:01:03,090 ‫we see everything on the left upper side corner. 20 00:01:03,090 --> 00:01:07,890 ‫So this is not good and this is because of the constraints. 21 00:01:07,890 --> 00:01:09,810 ‫So in order to add constraints, 22 00:01:09,810 --> 00:01:12,600 ‫we can't just click on this button, don't do that. 23 00:01:12,600 --> 00:01:14,760 ‫I'm just gonna do that for example. 24 00:01:14,760 --> 00:01:18,270 ‫And as you can see, it kind of distorted, 25 00:01:18,270 --> 00:01:20,913 ‫especially this buttons. 26 00:01:21,870 --> 00:01:25,260 ‫So if you do command Z or control Z, 27 00:01:25,260 --> 00:01:28,590 ‫it will go back to its own previous state 28 00:01:28,590 --> 00:01:33,120 ‫and how can we overcome that problem? 29 00:01:33,120 --> 00:01:37,350 ‫So we can actually add constraints manually, 30 00:01:37,350 --> 00:01:38,730 ‫one by one 31 00:01:38,730 --> 00:01:42,840 ‫but it will take a lot of time right now 32 00:01:42,840 --> 00:01:47,670 ‫and we wouldn't even get very good result out of that. 33 00:01:47,670 --> 00:01:52,530 ‫But rather than that, I'm just gonna go for layout section 34 00:01:52,530 --> 00:01:54,210 ‫over here, layouts tab. 35 00:01:54,210 --> 00:01:57,090 ‫So I'm going to look for linear layout. 36 00:01:57,090 --> 00:02:00,030 ‫You can actually search it from here as well. 37 00:02:00,030 --> 00:02:04,380 ‫So this is linear or linear layout, and there are two kinds. 38 00:02:04,380 --> 00:02:07,380 ‫One is horizontal and one is vertical. 39 00:02:07,380 --> 00:02:11,730 ‫So as you can see, the vertical is not 40 00:02:11,730 --> 00:02:13,830 ‫what we are looking for at this point, 41 00:02:13,830 --> 00:02:15,660 ‫but we are looking for horizontal 42 00:02:15,660 --> 00:02:20,220 ‫because we want to align those buttons horizontally 43 00:02:20,220 --> 00:02:21,900 ‫inside of a stack. 44 00:02:21,900 --> 00:02:26,900 ‫So this is what linear layout exactly does. 45 00:02:27,150 --> 00:02:31,170 ‫So we are going to bring in the linear layout 46 00:02:31,170 --> 00:02:32,670 ‫into our layout. 47 00:02:32,670 --> 00:02:34,950 ‫Okay? Just bring it in. 48 00:02:34,950 --> 00:02:36,660 ‫And as you can see, 49 00:02:36,660 --> 00:02:39,390 ‫you cannot actually see the linear layout. 50 00:02:39,390 --> 00:02:43,380 ‫It's not a view like an imagery or a button. 51 00:02:43,380 --> 00:02:46,560 ‫You can just drop it anywhere you want 52 00:02:46,560 --> 00:02:50,160 ‫because then we will be able to move it on. 53 00:02:50,160 --> 00:02:52,080 ‫Right now after you drop it 54 00:02:52,080 --> 00:02:54,090 ‫you can see it somehow 55 00:02:54,090 --> 00:02:57,750 ‫but the buttons are not inside of the linear layout. 56 00:02:57,750 --> 00:03:02,750 ‫So you can either drag and drop in the buttons like this 57 00:03:03,180 --> 00:03:06,870 ‫or you can do that within inside 58 00:03:06,870 --> 00:03:09,900 ‫of the Competent Tree on the left hand side. 59 00:03:09,900 --> 00:03:11,130 ‫So for example, 60 00:03:11,130 --> 00:03:14,910 ‫if I want to add button two, underline your layout 61 00:03:14,910 --> 00:03:18,750 ‫I'm just going to drag it in like this, like this. 62 00:03:18,750 --> 00:03:21,810 ‫And for the last one, like this. 63 00:03:21,810 --> 00:03:26,100 ‫So right now, I have my linear layout over here, 64 00:03:26,100 --> 00:03:28,530 ‫and all the buttons are stacked inside 65 00:03:28,530 --> 00:03:31,020 ‫of my horizontal layout. 66 00:03:31,020 --> 00:03:34,200 ‫Now I get to do this, okay? 67 00:03:34,200 --> 00:03:37,470 ‫Now I have my button side by side, 68 00:03:37,470 --> 00:03:41,340 ‫and if you try to move it, and by accident, 69 00:03:41,340 --> 00:03:43,590 ‫I believe I moved one of the buttons. 70 00:03:43,590 --> 00:03:45,840 ‫So let me do command Z. 71 00:03:45,840 --> 00:03:50,340 ‫And then I'm just trying to move all the linear layout 72 00:03:50,340 --> 00:03:52,260 ‫but I cannot manage it. 73 00:03:52,260 --> 00:03:55,320 ‫I believe we can do that by choosing this 74 00:03:55,320 --> 00:03:58,200 ‫and dragging it from the blueprint like this. 75 00:03:58,200 --> 00:03:59,310 ‫Here we go. 76 00:03:59,310 --> 00:04:00,390 ‫Now it works. 77 00:04:00,390 --> 00:04:02,670 ‫So if you cannot see the blueprint 78 00:04:02,670 --> 00:04:05,400 ‫you can come up over here to this blue button 79 00:04:05,400 --> 00:04:08,193 ‫and just choose design and blueprint. 80 00:04:09,270 --> 00:04:10,320 ‫So here you go. 81 00:04:10,320 --> 00:04:13,920 ‫Now I have exact look that I'm looking for. 82 00:04:13,920 --> 00:04:16,140 ‫So I have buttons side by side. 83 00:04:16,140 --> 00:04:19,050 ‫They're actually looking great. 84 00:04:19,050 --> 00:04:23,010 ‫They're right next to each other and they're in order. 85 00:04:23,010 --> 00:04:28,010 ‫So now they're inside of a horizontal layout. 86 00:04:29,010 --> 00:04:31,080 ‫Now I can click on this infer button 87 00:04:31,080 --> 00:04:36,080 ‫infer constraints button, and it will be inferred like this. 88 00:04:36,240 --> 00:04:39,660 ‫As you can see, now, it's not distorted. 89 00:04:39,660 --> 00:04:42,150 ‫So do your adjustments 90 00:04:42,150 --> 00:04:45,390 ‫move any view to the location that you want 91 00:04:45,390 --> 00:04:48,990 ‫and then try to hit infer constraints on your own. 92 00:04:48,990 --> 00:04:51,000 ‫And when you are done 93 00:04:51,000 --> 00:04:54,420 ‫just run it on the emulator from scratch. 94 00:04:54,420 --> 00:04:58,410 ‫And once we do that, we will see, here we go. 95 00:04:58,410 --> 00:05:00,810 ‫It's now looking fine. 96 00:05:00,810 --> 00:05:03,900 ‫Now I have this edit text over here, 97 00:05:03,900 --> 00:05:07,593 ‫I have the buttons and I have the result text as well. 98 00:05:08,610 --> 00:05:11,010 ‫So we are almost done. 99 00:05:11,010 --> 00:05:15,990 ‫So we have all these IDs in text views and edit texts 100 00:05:15,990 --> 00:05:20,970 ‫but we don't have on click methods inside of every buttons. 101 00:05:20,970 --> 00:05:24,690 ‫So remember what an on click button, on click method does. 102 00:05:24,690 --> 00:05:29,690 ‫It connects your method on the Java file with your button. 103 00:05:30,120 --> 00:05:31,650 ‫So whatever you write here, 104 00:05:31,650 --> 00:05:35,640 ‫if you write the exact same thing on your Java file, 105 00:05:35,640 --> 00:05:38,550 ‫then it will be your assigned method. 106 00:05:38,550 --> 00:05:41,940 ‫So you can do whatever you want with this button. 107 00:05:41,940 --> 00:05:45,480 ‫So I'm gonna call this sum, okay? 108 00:05:45,480 --> 00:05:49,270 ‫And I'm gonna call this like deduct 109 00:05:50,160 --> 00:05:52,690 ‫and then multiply 110 00:05:53,790 --> 00:05:55,360 ‫for the third one 111 00:05:56,370 --> 00:06:00,510 ‫and then the white for the last one. 112 00:06:00,510 --> 00:06:02,460 ‫So here you go. 113 00:06:02,460 --> 00:06:04,560 ‫As you can see, we are getting some errors 114 00:06:04,560 --> 00:06:08,550 ‫on the left hand side as we have placed 115 00:06:08,550 --> 00:06:10,500 ‫all the on click methods here, 116 00:06:10,500 --> 00:06:12,750 ‫but not in the Java section. 117 00:06:12,750 --> 00:06:16,650 ‫So that's what we are going to do within the next lecture. 118 00:06:16,650 --> 00:06:20,010 ‫We are gonna start with defining all those views 119 00:06:20,010 --> 00:06:22,110 ‫into our Java code, 120 00:06:22,110 --> 00:06:24,540 ‫and then we are gonna move on to 121 00:06:24,540 --> 00:06:27,000 ‫the actual mathematical operations 122 00:06:27,000 --> 00:06:30,810 ‫and we're gonna end this application later on. 123 00:06:30,810 --> 00:06:32,583 ‫So, see you in the next lecture.