1 00:00:05,704 --> 00:00:06,537 (Instructor) So as we talked about 2 00:00:06,537 --> 00:00:07,850 at the end of the last video, 3 00:00:07,850 --> 00:00:10,100 in landscape mode the buttons are far too close 4 00:00:10,100 --> 00:00:11,890 to the bottom of the screen. 5 00:00:11,890 --> 00:00:13,380 And there's a fair bit of space 6 00:00:13,380 --> 00:00:15,790 between the widgets vertically. 7 00:00:15,790 --> 00:00:17,490 So we could start shuffling them up 8 00:00:17,490 --> 00:00:19,090 while reducing their top margins 9 00:00:19,090 --> 00:00:21,030 and sometimes you may have to do that 10 00:00:21,030 --> 00:00:23,640 but android's actually got another solution. 11 00:00:23,640 --> 00:00:25,850 It's possible to create separate layouts 12 00:00:25,850 --> 00:00:28,680 for different screen sizes and landscape counts 13 00:00:28,680 --> 00:00:31,240 as a different screen size to portrait. 14 00:00:31,240 --> 00:00:32,409 Now this particular layout 15 00:00:32,409 --> 00:00:34,300 doesn't look the best in landscape. 16 00:00:34,300 --> 00:00:36,470 So let's have a look at how they use it as the basis 17 00:00:36,470 --> 00:00:38,910 for a separate landscape layout. 18 00:00:38,910 --> 00:00:40,770 Now this is quite a complex layout 19 00:00:40,770 --> 00:00:42,240 and you may not feel too confident 20 00:00:42,240 --> 00:00:44,770 about playing around with it in case you mess it up. 21 00:00:44,770 --> 00:00:47,750 But fortunately there's an easy way to save everything. 22 00:00:47,750 --> 00:00:50,060 So you can put the layout back if things go horribly wrong 23 00:00:50,060 --> 00:00:51,870 while you're experimenting. 24 00:00:51,870 --> 00:00:54,010 So we come over here and we click on text 25 00:00:54,010 --> 00:00:55,660 to go back into text mode. 26 00:00:55,660 --> 00:00:59,390 I'm gonna copy all the text; control A on a PC or Linux 27 00:00:59,390 --> 00:01:03,600 or command A on a Mac and if I'm doing a command C 28 00:01:03,600 --> 00:01:06,700 but it would be a control C on windows or Mac. 29 00:01:06,700 --> 00:01:08,550 Of course you can go to the edit mode 30 00:01:09,440 --> 00:01:11,250 and do a copy that way. 31 00:01:11,250 --> 00:01:14,380 You can scroll down, select all and then a copy et cetera. 32 00:01:14,380 --> 00:01:17,910 But anyway get a copy of the text as you can see there, 33 00:01:17,910 --> 00:01:20,560 you can paste it into your favourite editor. 34 00:01:20,560 --> 00:01:22,830 And you could even create a new (mumbles) in android studio 35 00:01:22,830 --> 00:01:26,240 and paste it in there or as I prefer to use a simple editor 36 00:01:26,240 --> 00:01:31,210 so I don't mess up and leave unused layouts in my app. 37 00:01:31,210 --> 00:01:32,250 One word of warning though, 38 00:01:32,250 --> 00:01:35,068 be careful if you're using text edit on a Mac 39 00:01:35,068 --> 00:01:38,320 and don't use word pad on a Windows, use notepad instead. 40 00:01:38,320 --> 00:01:40,490 The reason is, while I can mess around with text 41 00:01:40,490 --> 00:01:43,750 and do strange things like try to match up speech marks with 42 00:01:43,750 --> 00:01:48,020 66 slash 99 characters instead, on my Mac I make sure a text 43 00:01:48,020 --> 00:01:50,560 in editor set in text mode by going to the format menu. 44 00:01:50,560 --> 00:01:55,377 So I'm going to click on go into text edit, new document 45 00:01:58,300 --> 00:02:00,970 and then we're going to go into format and I can select here 46 00:02:00,970 --> 00:02:02,680 make rich text. 47 00:02:02,680 --> 00:02:05,902 As that option comes up and then it's plain text mode. 48 00:02:05,902 --> 00:02:07,193 So we click into there basically, 49 00:02:08,610 --> 00:02:10,070 make plain text again as you can see 50 00:02:10,070 --> 00:02:12,400 and you can see all the controls change there as well. 51 00:02:12,400 --> 00:02:14,940 I'm gonna paste that in there so you'd do that in notepad 52 00:02:14,940 --> 00:02:17,420 if you're in windows or some other editor 53 00:02:17,420 --> 00:02:18,730 to take a copy of what we've done 54 00:02:18,730 --> 00:02:20,763 so that we can restore it if need be. 55 00:02:21,790 --> 00:02:24,040 So basically anytime if you wanna go back to the layout 56 00:02:24,040 --> 00:02:26,960 as it is at the moment you can just copy this text 57 00:02:26,960 --> 00:02:31,960 back into the android studio into the text tab 58 00:02:32,130 --> 00:02:34,313 and go back to exactly what it was before. 59 00:02:35,210 --> 00:02:38,683 So back to android studio, I'm gonna click on design again. 60 00:02:39,720 --> 00:02:42,480 So we actually create a separate layout for landscape 61 00:02:42,480 --> 00:02:44,740 we just have to place a copy of this layout 62 00:02:44,740 --> 00:02:46,880 in a special landscape directory 63 00:02:46,880 --> 00:02:48,963 then modify it to work with landscape. 64 00:02:49,830 --> 00:02:53,430 Android studio makes it very easy to create layouts 65 00:02:53,430 --> 00:02:55,840 for different orientations and screen sizes. 66 00:02:55,840 --> 00:02:58,140 So the button that switch from portrait to landscape 67 00:02:58,140 --> 00:02:59,490 is another option. 68 00:02:59,490 --> 00:03:02,780 So I come over to here and you can see 69 00:03:02,780 --> 00:03:05,950 look at this option here; create landscape variation 70 00:03:05,950 --> 00:03:08,853 and that creates a new layout from a current layout. 71 00:03:09,749 --> 00:03:14,749 So I click on that now, I'll open up the project pane, 72 00:03:15,510 --> 00:03:19,970 we're just going to have a look, layouts. 73 00:03:19,970 --> 00:03:22,020 You can see we've now got two files there 74 00:03:22,860 --> 00:03:24,270 and even though they've got the same name 75 00:03:24,270 --> 00:03:26,120 you can tell which one you're working with 76 00:03:26,120 --> 00:03:28,730 because the editor tab prefix is the name of land. 77 00:03:28,730 --> 00:03:31,550 So if we've got the landscape one up here; land/activity 78 00:03:31,550 --> 00:03:34,110 and it's called main, we've got layout/activity 79 00:03:34,110 --> 00:03:34,943 and it's called main. 80 00:03:34,943 --> 00:03:37,650 So you'll easily know which one is which. 81 00:03:37,650 --> 00:03:41,120 And also down here in the project pane, 82 00:03:41,120 --> 00:03:43,940 you can see the word land is in print to the right 83 00:03:43,940 --> 00:03:46,950 so you'll know which one is the landscape version. 84 00:03:46,950 --> 00:03:48,470 Now when you're working in landscape 85 00:03:48,470 --> 00:03:51,140 it's very useful to be able to show either design 86 00:03:51,140 --> 00:03:52,990 or the blueprint on their own. 87 00:03:52,990 --> 00:03:55,250 But moving things around I prefer to work in the blue print 88 00:03:55,250 --> 00:03:57,530 so I'm just gonna use the button on the toolbar 89 00:03:57,530 --> 00:03:58,953 to display it by itself. 90 00:04:03,790 --> 00:04:07,350 And we'll close the project pane, gives us a bit more space. 91 00:04:07,350 --> 00:04:10,400 So how are we gonna sort out the layout for landscape. 92 00:04:10,400 --> 00:04:13,350 Now in landscape, we're actually short of screen depth 93 00:04:13,350 --> 00:04:15,260 but we've got plenty of width. 94 00:04:15,260 --> 00:04:17,339 Now you may come up with other ways to layout 95 00:04:17,339 --> 00:04:19,839 the widgets for landscape but I'm just gonna place 96 00:04:19,839 --> 00:04:24,470 the two edit text widgets side by side on the same line. 97 00:04:24,470 --> 00:04:26,410 Then we'll start by changing the basic constraint 98 00:04:26,410 --> 00:04:27,810 of the operation text used. 99 00:04:27,810 --> 00:04:30,443 So let's click on here; the operation, 100 00:04:32,170 --> 00:04:35,430 we wanna align that with the button seven widget instead. 101 00:04:35,430 --> 00:04:37,370 Now it's still gonna be a baseline constraint 102 00:04:37,370 --> 00:04:39,490 but we're gonna move it down the screen. 103 00:04:39,490 --> 00:04:41,830 Now this is the widget that we had trouble with 104 00:04:41,830 --> 00:04:44,210 the previous video because it's so small. 105 00:04:44,210 --> 00:04:46,680 I'm just gonna expand the properties of this pane over here, 106 00:04:46,680 --> 00:04:49,200 the inspector, and we're gonna have a look 107 00:04:49,200 --> 00:04:51,670 at our constraints again and we're gonna come down here 108 00:04:51,670 --> 00:04:54,550 where we've got baseline to baseline off 109 00:04:54,550 --> 00:04:59,130 which is currently set to new number and use the drop down, 110 00:04:59,130 --> 00:05:01,573 we're gonna change that to button seven instead. 111 00:05:05,600 --> 00:05:08,040 You can see it moved down the screen when I did that. 112 00:05:08,040 --> 00:05:09,820 Now it would be confusing to have a constraint 113 00:05:09,820 --> 00:05:12,110 to two different widgets so we're gonna change 114 00:05:12,110 --> 00:05:13,810 both constraints. 115 00:05:13,810 --> 00:05:16,270 Although the constraint names can't be read properly 116 00:05:16,270 --> 00:05:18,330 without making the pane wider, 117 00:05:18,330 --> 00:05:20,640 we can see which one was set to new numbers 118 00:05:20,640 --> 00:05:22,810 so I'm just gonna change them both. 119 00:05:22,810 --> 00:05:26,070 We'll change that one now instead of a new number. 120 00:05:26,070 --> 00:05:28,350 You find in this particular case that it doesn't give you 121 00:05:28,350 --> 00:05:31,837 the fullest of buttons, you can come over here 122 00:05:31,837 --> 00:05:34,450 and click on the ellipses and select button seven that way, 123 00:05:34,450 --> 00:05:36,180 click on okay. 124 00:05:36,180 --> 00:05:38,430 And the result is we've now got it changed, 125 00:05:38,430 --> 00:05:41,413 both constraints now constrained to button seven. 126 00:05:42,610 --> 00:05:44,460 So the next step is to delete 127 00:05:44,460 --> 00:05:47,240 the top and right edge constraints on new number 128 00:05:47,240 --> 00:05:49,530 and the left edge constraint on result. 129 00:05:49,530 --> 00:05:52,210 So we're gonna go back to our normal properties 130 00:05:52,210 --> 00:05:53,890 instead of the extended ones. 131 00:05:53,890 --> 00:05:56,850 So I'm selecting new number, so we're gonna delete 132 00:05:56,850 --> 00:06:00,380 the top and right edge constraints on new number 133 00:06:00,380 --> 00:06:02,330 and the left edge constraint on result. 134 00:06:03,451 --> 00:06:04,810 And just delete the top first 135 00:06:05,810 --> 00:06:08,410 and the right edge on your number to delete that as well 136 00:06:08,410 --> 00:06:12,870 in constraint that is and the left edge constraint on result 137 00:06:12,870 --> 00:06:14,560 and result was this previous one, 138 00:06:14,560 --> 00:06:16,210 so I'm gonna delete that as well. 139 00:06:17,810 --> 00:06:20,920 Now the right edge of new number should then be constrained 140 00:06:20,920 --> 00:06:24,370 to the left edge of result (mumbles), constrain that to the 141 00:06:27,700 --> 00:06:30,430 left edge of result and then we also want 142 00:06:30,430 --> 00:06:32,980 a baseline constraint created for the two 143 00:06:32,980 --> 00:06:36,520 so we'll to come over here, click on the little button to 144 00:06:36,520 --> 00:06:38,950 enable the baseline constraint. 145 00:06:38,950 --> 00:06:41,200 And we're gonna constrain it like so, 146 00:06:41,200 --> 00:06:46,200 oops didn't quite click it in, try it again, that's better. 147 00:06:46,540 --> 00:06:48,940 Now we have to put the baseline constraint from new number 148 00:06:48,940 --> 00:06:51,520 to result rather than the other way around 149 00:06:51,520 --> 00:06:54,360 because it's result that has the vertical constraint 150 00:06:54,360 --> 00:06:55,610 to the top of the screen. 151 00:06:56,680 --> 00:06:57,770 Of course you could change that 152 00:06:57,770 --> 00:07:00,640 but it doesn't actually matter which way around it all goes. 153 00:07:00,640 --> 00:07:02,750 Now you could also constrain new number 154 00:07:02,750 --> 00:07:05,170 to the top of the layout instead. 155 00:07:05,170 --> 00:07:08,190 But by anchoring the two edit text widgets together, 156 00:07:08,190 --> 00:07:10,910 we only have to move one and the other will follow. 157 00:07:10,910 --> 00:07:14,090 Now the buttons aren't centred but we'll come back to that. 158 00:07:14,090 --> 00:07:15,330 In fact there are a few things wrong 159 00:07:15,330 --> 00:07:16,330 with the landscape layout 160 00:07:16,330 --> 00:07:18,940 and we're gonna be looking at them all a little bit later. 161 00:07:18,940 --> 00:07:21,500 But that's the layout for the calculator app 162 00:07:21,500 --> 00:07:22,930 completed for now. 163 00:07:22,930 --> 00:07:25,370 So let's actually run it to see how it all looks. 164 00:07:25,370 --> 00:07:29,850 So I'm just gonna run it and we'll just check it 165 00:07:29,850 --> 00:07:32,443 over in the emulator just to see what it does look like. 166 00:07:35,180 --> 00:07:37,250 Okay so there it is in portrait mode. 167 00:07:37,250 --> 00:07:38,873 So that's looking okay. 168 00:07:40,710 --> 00:07:42,073 Go over to landscape. 169 00:07:43,550 --> 00:07:45,840 And you can see it's looking okay, it's really not perfect 170 00:07:45,840 --> 00:07:47,440 but we need to make a few changes to that 171 00:07:47,440 --> 00:07:50,610 but you can see that it's looking much better 172 00:07:50,610 --> 00:07:51,870 because of the additional layout 173 00:07:51,870 --> 00:07:54,240 that we created in landscape mode. 174 00:07:54,240 --> 00:07:56,700 So at this point now we're ready to start writing the code 175 00:07:56,700 --> 00:07:58,550 to make it calculate. 176 00:07:58,550 --> 00:07:59,750 The last thing I'm gonna do is, 177 00:07:59,750 --> 00:08:04,220 I'm just gonna go back to portrait and go back into the code 178 00:08:04,220 --> 00:08:07,390 and for both the layout files what I'm going to do is 179 00:08:07,390 --> 00:08:12,170 just go into the text view and then click on the code menu 180 00:08:12,170 --> 00:08:16,270 and rearrange code and we're gonna do that for that one 181 00:08:16,270 --> 00:08:18,323 and also for the other layout as well. 182 00:08:19,300 --> 00:08:23,680 Do the same thing, code, rearrange, 183 00:08:31,650 --> 00:08:33,470 jus so everything is in standard order, 184 00:08:33,470 --> 00:08:35,913 I'm just gonna go back to design on both of those. 185 00:08:39,070 --> 00:08:41,690 And I'm doing that so the reason I did the reformat codes 186 00:08:41,690 --> 00:08:42,523 from the code menu, 187 00:08:42,523 --> 00:08:44,580 just so everything is in a standard order 188 00:08:44,580 --> 00:08:47,270 if you need to compare your code with mine. 189 00:08:47,270 --> 00:08:48,320 And in the next video 190 00:08:48,320 --> 00:08:50,850 I'm actually gonna show you how to use android studio 191 00:08:50,850 --> 00:08:54,030 to compare files so that you can compare your code to mine 192 00:08:54,030 --> 00:08:55,450 if you get any problems 193 00:08:55,450 --> 00:08:57,870 and struggling to work out what's different. 194 00:08:57,870 --> 00:09:00,370 So, let's get started with that in the next video.