1 00:00:00,031 --> 00:00:02,589 (uplifting music) 2 00:00:02,589 --> 00:00:05,420 (keyboard typing) 3 00:00:05,420 --> 00:00:06,800 In this video, we're going to 4 00:00:06,800 --> 00:00:08,960 create an app that does more than just displaying 5 00:00:08,960 --> 00:00:10,750 widgets on the screen. 6 00:00:10,750 --> 00:00:12,710 We'll start by producing some code, 7 00:00:12,710 --> 00:00:15,620 so that we can get the button to actually do something. 8 00:00:15,620 --> 00:00:18,850 Then we'll extend the app to see how to include a menu. 9 00:00:18,850 --> 00:00:20,240 Now, in future sections, 10 00:00:20,240 --> 00:00:22,960 I'm gonna show you the finished app running first, 11 00:00:22,960 --> 00:00:25,170 so you know what it is we're creating. 12 00:00:25,170 --> 00:00:27,050 But I'm not gonna do that here, 13 00:00:27,050 --> 00:00:29,210 partly because the app is very simple, 14 00:00:29,210 --> 00:00:31,060 and partly because we're gonna change 15 00:00:31,060 --> 00:00:32,870 what it does half-way through. 16 00:00:32,870 --> 00:00:33,720 To start with though, 17 00:00:33,720 --> 00:00:36,180 I'm gonna set you a challenge to build the lay out 18 00:00:36,180 --> 00:00:38,910 for the user interface that the app will use. 19 00:00:38,910 --> 00:00:41,050 So, to help with that, here are some rules governing 20 00:00:41,050 --> 00:00:42,773 how you can you use constraints. 21 00:00:43,900 --> 00:00:46,470 So, as you can see, the rules are pretty simple. 22 00:00:46,470 --> 00:00:48,750 Each view must have at least two constraints; 23 00:00:48,750 --> 00:00:51,900 one horizontal and one vertical. 24 00:00:51,900 --> 00:00:55,250 You can create constraints only between a constraint handle 25 00:00:55,250 --> 00:00:58,260 and an anchor point, that share the same plane. 26 00:00:58,260 --> 00:00:59,920 So in other words, a vertical plane, 27 00:00:59,920 --> 00:01:01,750 the left and right sides of a view, 28 00:01:01,750 --> 00:01:04,910 can be constrained only to another vertical plane, 29 00:01:04,910 --> 00:01:07,990 and baselines can constrain only to other baselines. 30 00:01:07,990 --> 00:01:09,280 For example, you can't constrain 31 00:01:09,280 --> 00:01:11,680 the top of one widget to the left of another. 32 00:01:11,680 --> 00:01:13,430 Now each constraint handle 33 00:01:13,430 --> 00:01:15,940 can be used with just one constraint, 34 00:01:15,940 --> 00:01:18,010 but you can create multiple constraints 35 00:01:18,010 --> 00:01:20,410 from different widgets to the same anchor point. 36 00:01:21,278 --> 00:01:22,960 Now if you don't constrain a widget, 37 00:01:22,960 --> 00:01:24,710 both vertically and horizontally, 38 00:01:24,710 --> 00:01:27,720 Android won't know where to place it on the screen. 39 00:01:27,720 --> 00:01:29,940 Widgets that aren't constrained horizontally 40 00:01:29,940 --> 00:01:31,620 will move to the left of the screen, 41 00:01:31,620 --> 00:01:33,680 and widgets that aren't constrained vertically 42 00:01:33,680 --> 00:01:35,120 will move to the top. 43 00:01:35,120 --> 00:01:36,830 Now a constraint on a vertical edge 44 00:01:36,830 --> 00:01:39,380 can only be connected to another vertical edge. 45 00:01:39,380 --> 00:01:40,720 So in other words, you can't constrain 46 00:01:40,720 --> 00:01:43,000 the top of one widget to the left side of another, 47 00:01:43,000 --> 00:01:45,080 and that's not really difficult to remember 48 00:01:45,080 --> 00:01:47,420 as it's a bit obvious. 49 00:01:47,420 --> 00:01:49,780 Now each constraint handle can only be connected 50 00:01:49,780 --> 00:01:51,540 to one anchor point. 51 00:01:51,540 --> 00:01:52,700 An anchor point, by the way, 52 00:01:52,700 --> 00:01:55,630 is a constraint handle that's the destination 53 00:01:55,630 --> 00:01:58,550 of a constraint, or an edge of the screen. 54 00:01:58,550 --> 00:02:00,850 Now anchor points can have more than one constraint 55 00:02:00,850 --> 00:02:02,220 going to them though. 56 00:02:02,220 --> 00:02:03,590 Again, that's easy to remember. 57 00:02:03,590 --> 00:02:05,270 You can constrain multiple widgets 58 00:02:05,270 --> 00:02:08,100 to the edges of the screen, for example. 59 00:02:08,100 --> 00:02:09,430 Alright, so let's go ahead and create 60 00:02:09,430 --> 00:02:11,155 the project we're gonna be using here. 61 00:02:11,155 --> 00:02:13,710 We're gonna click on Start a new Android project. 62 00:02:13,710 --> 00:02:17,543 We're gonna call this one Button Click App. 63 00:02:19,350 --> 00:02:22,680 Company name is going to be learnprogamming.academy. 64 00:02:22,680 --> 00:02:24,570 And we're gonna make sure that we've included 65 00:02:24,570 --> 00:02:27,060 Kotlin support by ensuring that the check box 66 00:02:27,060 --> 00:02:28,960 is checked to the left of that. 67 00:02:28,960 --> 00:02:30,501 That's if you're using this, 68 00:02:30,501 --> 00:02:32,660 building this app in the Kotlin course, 69 00:02:32,660 --> 00:02:34,350 but if you're building this in the Java course, 70 00:02:34,350 --> 00:02:36,230 you wanna make sure that Include Kotlin support 71 00:02:36,230 --> 00:02:37,460 is actually unchecked. 72 00:02:37,460 --> 00:02:39,663 Alright, so click on Next. 73 00:02:40,740 --> 00:02:42,480 Now on this screen, we're gonna make sure 74 00:02:42,480 --> 00:02:45,800 that the minimum SDK is API 17, 75 00:02:45,800 --> 00:02:47,290 and everything else is unchecked. 76 00:02:47,290 --> 00:02:50,000 So you can see here that I've got API 17 selected, 77 00:02:50,000 --> 00:02:53,750 which is Android 4.2, and everything else is unchecked, 78 00:02:53,750 --> 00:02:54,783 and click on Next. 79 00:02:56,106 --> 00:02:57,980 Now you wanna start off with an empty activity. 80 00:02:57,980 --> 00:03:00,670 So, choose that, or the closest one to it 81 00:03:00,670 --> 00:03:03,003 if things have changed, and click on Next. 82 00:03:04,300 --> 00:03:05,690 Now the suggested names here, 83 00:03:05,690 --> 00:03:08,110 for the activity and layout are fine, 84 00:03:08,110 --> 00:03:10,680 so make sure that the two options here, 85 00:03:10,680 --> 00:03:13,530 the two boxes for Generate Layout File 86 00:03:13,530 --> 00:03:15,920 and Backwards Compatibility, AppCompat, 87 00:03:15,920 --> 00:03:17,890 make sure that they're both checked as well 88 00:03:17,890 --> 00:03:19,023 and click on Finish. 89 00:03:21,050 --> 00:03:22,650 Now once the Gradle build is finished 90 00:03:22,650 --> 00:03:24,700 and the indexing is complete, 91 00:03:24,700 --> 00:03:25,950 we can actually continue. 92 00:03:32,727 --> 00:03:33,560 You can see the Gradle build 93 00:03:33,560 --> 00:03:34,560 is running down the bottom there, 94 00:03:34,560 --> 00:03:37,410 so I'll just give that a moment to complete. 95 00:03:37,410 --> 00:03:39,160 Okay, then it's all done. 96 00:03:39,160 --> 00:03:41,750 So, once the Gradle build is finished as it has now, 97 00:03:41,750 --> 00:03:43,680 we can open up the res layout folder. 98 00:03:43,680 --> 00:03:44,730 So I'm gonna come over here. 99 00:03:44,730 --> 00:03:46,910 If your project pane's not showing for some reason, 100 00:03:46,910 --> 00:03:49,463 or perhaps you've got a screen that looks like this, 101 00:03:50,370 --> 00:03:52,340 click on the Project pane to the left there, 102 00:03:52,340 --> 00:03:54,360 and make sure that you're in Android view 103 00:03:54,360 --> 00:03:56,520 by selecting Android if it's not selected. 104 00:03:56,520 --> 00:03:58,350 Then you wanna expand app, 105 00:03:58,350 --> 00:04:01,560 and expand res, and expand layout. 106 00:04:01,560 --> 00:04:02,990 Then we wanna double click this activity 107 00:04:02,990 --> 00:04:03,900 _main.xml 108 00:04:03,900 --> 00:04:06,300 to make sure that that's on the screen. 109 00:04:06,300 --> 00:04:08,060 And if it was already existing up here, 110 00:04:08,060 --> 00:04:09,280 just double click it, 111 00:04:09,280 --> 00:04:11,330 and then I'm gonna click on this Project pane here 112 00:04:11,330 --> 00:04:14,070 to close that off, to give us a bit more space. 113 00:04:14,070 --> 00:04:15,870 Alright, now time for the challenge. 114 00:04:16,940 --> 00:04:18,940 So the challenge is to create a layout 115 00:04:18,940 --> 00:04:23,000 containing a Plain Text widget, a Button, and a TextView, 116 00:04:23,000 --> 00:04:24,660 and arrange them so that they look like 117 00:04:24,660 --> 00:04:26,660 the image you can see on the screen now. 118 00:04:28,820 --> 00:04:31,860 Now if the screen size or the orientation changes, 119 00:04:31,860 --> 00:04:33,610 the Plain Text and Button widgets 120 00:04:33,610 --> 00:04:36,120 must remain at the top of the screen, 121 00:04:36,120 --> 00:04:38,000 with the button over to the right, 122 00:04:38,000 --> 00:04:39,670 and the Plain Text filling the space 123 00:04:39,670 --> 00:04:42,290 from the left edge up to the Button. 124 00:04:42,290 --> 00:04:45,630 Now the TextView should start just below the Plain Text, 125 00:04:45,630 --> 00:04:48,910 and should expand to use as much as the screen as it needs 126 00:04:48,910 --> 00:04:51,420 when the text in it grows. 127 00:04:51,420 --> 00:04:54,250 It should also be scrollable vertically, as it gets bigger 128 00:04:54,250 --> 00:04:56,277 than the available space on the screen. 129 00:04:56,277 --> 00:04:59,030 Now all margins, set those to 16dp. 130 00:04:59,030 --> 00:05:01,950 And as this is the first real challenge in the course, 131 00:05:01,950 --> 00:05:05,110 I've included images of the Design and Blueprint, 132 00:05:05,110 --> 00:05:07,390 as you can see on the screen there now. 133 00:05:07,390 --> 00:05:09,060 So take a good look at those 134 00:05:09,060 --> 00:05:10,430 and then pause this video, 135 00:05:10,430 --> 00:05:13,070 and see if you can go ahead and create that interface, 136 00:05:13,070 --> 00:05:14,210 and start the video 137 00:05:14,210 --> 00:05:15,940 when you're ready to come back and see me, 138 00:05:15,940 --> 00:05:16,840 go through the solutions. 139 00:05:16,840 --> 00:05:18,003 So pause the video now. 140 00:05:20,720 --> 00:05:23,860 Alright, so, hopefully you've managed to get that working, 141 00:05:23,860 --> 00:05:26,420 or to get a large component of it working anyway. 142 00:05:26,420 --> 00:05:29,480 So the first thing we wanna do now to build this interface, 143 00:05:29,480 --> 00:05:31,250 is we're gonna delete the Hello World widget 144 00:05:31,250 --> 00:05:32,800 that was created for us. 145 00:05:32,800 --> 00:05:33,840 So let's start by doing that, 146 00:05:33,840 --> 00:05:35,720 so I'm gonna click on Hello World, 147 00:05:35,720 --> 00:05:38,190 and click that in the design or the blueprint. 148 00:05:38,190 --> 00:05:40,200 Delete that. I'm gonna press the DEL key. 149 00:05:40,200 --> 00:05:42,160 Alright, so I've deleted the Hello World widget 150 00:05:42,160 --> 00:05:43,450 that was created for us. 151 00:05:43,450 --> 00:05:45,260 Then we're gonna drag the three widgets we want 152 00:05:45,260 --> 00:05:47,900 onto the design, and place them roughly where we want them, 153 00:05:47,900 --> 00:05:51,650 using the guidelines that appear as, well, as a guide. 154 00:05:51,650 --> 00:05:54,090 Now the guidelines appear, when you've dragged a widget 155 00:05:54,090 --> 00:05:56,030 to a recognised position such as 156 00:05:56,030 --> 00:05:58,620 16dp away from the edge of a layout. 157 00:05:58,620 --> 00:06:01,650 So, by moving the button around a bit before dropping it, 158 00:06:01,650 --> 00:06:03,100 you can actually get both horizontal 159 00:06:03,100 --> 00:06:04,820 and vertical guidelines to appear, 160 00:06:04,820 --> 00:06:06,210 and you'll see that shortly. 161 00:06:06,210 --> 00:06:09,320 Now, if they don't appear, it doesn't matter. 162 00:06:09,320 --> 00:06:10,270 It really only takes seconds 163 00:06:10,270 --> 00:06:13,590 to fix up the margins up manually anyway. 164 00:06:13,590 --> 00:06:14,920 So I'm gonna start by making sure that 165 00:06:14,920 --> 00:06:18,290 autoconnect is enabled, and you can see here that 166 00:06:18,290 --> 00:06:20,310 we haven't got a slash through the autoconnect, 167 00:06:20,310 --> 00:06:22,600 so that's enabled, and the other thing I'm gonna do 168 00:06:22,600 --> 00:06:26,070 is make sure the default margins is set to 16dp. 169 00:06:26,070 --> 00:06:28,150 So I'm gonna come over here because it said to wait. 170 00:06:28,150 --> 00:06:31,050 I'm gonna click on 16 or I could've typed that, 171 00:06:31,050 --> 00:06:33,150 and we're now good to go. 172 00:06:33,150 --> 00:06:35,860 So next I'm gonna drop a button over to the right. 173 00:06:35,860 --> 00:06:38,870 Now we could've dropped the Plain Text widget first. 174 00:06:38,870 --> 00:06:40,590 The order that you place the widgets on the layout 175 00:06:40,590 --> 00:06:42,820 isn't really important here. 176 00:06:42,820 --> 00:06:44,500 But we want the button to be constrained 177 00:06:44,500 --> 00:06:46,890 to the top and right edges of the layout. 178 00:06:46,890 --> 00:06:48,980 So I'm gonna make sure that it's correct, and then create 179 00:06:48,980 --> 00:06:51,470 any constraints that aren't done automatically, 180 00:06:51,470 --> 00:06:54,070 and then we'll also check the top and right margins. 181 00:06:54,070 --> 00:06:56,310 So I've got all under here, under the palette. 182 00:06:56,310 --> 00:06:58,160 I'm gonna come over here and just drag it over 183 00:06:58,160 --> 00:06:59,730 to the right-hand side, 184 00:06:59,730 --> 00:07:01,380 making sure that both guidelines appear. 185 00:07:01,380 --> 00:07:05,250 We've got the horizontal and vertical guides, release. 186 00:07:05,250 --> 00:07:08,010 And because we've got Autoconnect turned on, 187 00:07:08,010 --> 00:07:09,390 you can see it's automatically added 188 00:07:09,390 --> 00:07:11,520 a constraint at the top and right edge, 189 00:07:11,520 --> 00:07:13,040 which is what we want here. 190 00:07:13,040 --> 00:07:15,391 And also we can see that our margins, 191 00:07:15,391 --> 00:07:19,830 16dp for the top, and 16dp for the right are both there. 192 00:07:19,830 --> 00:07:22,320 If they're not correct for some reason for you, 193 00:07:22,320 --> 00:07:24,050 you can just click on the drop down 194 00:07:24,050 --> 00:07:26,880 and change the number, as appropriate, 195 00:07:26,880 --> 00:07:29,420 and of course you can add a constraint manually, 196 00:07:29,420 --> 00:07:32,090 if for some reason it wasn't added for you. 197 00:07:32,090 --> 00:07:33,650 Alright, so that's the Button. 198 00:07:33,650 --> 00:07:36,020 Next we want the Plain Text widget, 199 00:07:36,020 --> 00:07:38,660 and that's over here in the text category. 200 00:07:38,660 --> 00:07:39,720 Now the Plain Text widget 201 00:07:39,720 --> 00:07:42,600 is gonna be placed on the left-hand side, 202 00:07:42,600 --> 00:07:46,150 and again if I start this, and drag it around, 203 00:07:46,150 --> 00:07:47,918 you can see that if I'm moving it slowly, 204 00:07:47,918 --> 00:07:51,260 we can get those guidelines to appear for us automatically. 205 00:07:51,260 --> 00:07:53,290 So once I release, we should find that the left 206 00:07:53,290 --> 00:07:55,930 and the top constraints get added automatically, 207 00:07:55,930 --> 00:07:58,150 and we can see that that's the case over here, 208 00:07:58,150 --> 00:08:01,540 and I'm just checking to see that 16dp for the top margin, 209 00:08:01,540 --> 00:08:04,380 and 16dp for the right margin. 210 00:08:04,380 --> 00:08:07,580 Now we also want this constrained to the 211 00:08:07,580 --> 00:08:10,030 left of the button, and more than likely 212 00:08:10,030 --> 00:08:11,600 that hasn't been added automatically, 213 00:08:11,600 --> 00:08:13,240 and it wasn't added for me. 214 00:08:13,240 --> 00:08:15,040 So we're gonna add the right-hand constraint 215 00:08:15,040 --> 00:08:16,390 to the left of the Button manually. 216 00:08:16,390 --> 00:08:18,350 So I'm just gonna click on over here, 217 00:08:18,350 --> 00:08:20,490 and drag that over to the Button, 218 00:08:20,490 --> 00:08:22,710 so that our Plain Text widget is now 219 00:08:22,710 --> 00:08:24,660 constrained to the Button. 220 00:08:24,660 --> 00:08:27,660 Now Autoconnect may also have added a bottom constraint 221 00:08:27,660 --> 00:08:29,330 to the bottom of the button. 222 00:08:29,330 --> 00:08:32,100 That's not a problem in our app, but it could be in others. 223 00:08:32,100 --> 00:08:33,510 So if you are seeing a constraint 224 00:08:33,510 --> 00:08:35,010 from the bottom of the button 225 00:08:35,010 --> 00:08:37,309 down to the bottom of the screen, 226 00:08:37,309 --> 00:08:40,480 remove that, if one was created. 227 00:08:40,480 --> 00:08:42,830 Alright, now at the moment, the Plain Text widget 228 00:08:42,830 --> 00:08:46,800 isn't set up to fill all the available space left to right, 229 00:08:46,800 --> 00:08:49,080 so we wanna change the layout_width in inspector 230 00:08:49,080 --> 00:08:51,610 to match_constraint. So I'm gonna click on that 231 00:08:51,610 --> 00:08:52,630 to make sure it was selected, 232 00:08:52,630 --> 00:08:57,023 and we're gonna change the layout_width to match_constraint. 233 00:08:57,870 --> 00:08:59,170 And you can see that's now growing 234 00:08:59,170 --> 00:09:01,690 to fit all the available space. 235 00:09:01,690 --> 00:09:03,540 So in other words, we're allowing it to fill the space 236 00:09:03,540 --> 00:09:06,100 from the left of the screen, up to the button. 237 00:09:06,100 --> 00:09:08,730 Now, to allow it to fill the screen vertically, 238 00:09:08,730 --> 00:09:12,157 you might also change the layout_height to match_constraint. 239 00:09:12,157 --> 00:09:13,603 But if I try and do that, 240 00:09:16,050 --> 00:09:17,710 something weird happens, as you can see there, 241 00:09:17,710 --> 00:09:21,560 and the widget shrinks vertically to just a line. 242 00:09:21,560 --> 00:09:22,810 The reason that happens is because 243 00:09:22,810 --> 00:09:24,450 there's no bottom constraint, 244 00:09:24,450 --> 00:09:27,880 so there's nothing to define its bounds, vertically. 245 00:09:27,880 --> 00:09:29,263 Now if you're going to use match constraint, 246 00:09:29,263 --> 00:09:32,420 then the widget has to be constrained on both edges, 247 00:09:32,420 --> 00:09:34,150 top and bottom in this case. 248 00:09:34,150 --> 00:09:35,410 So a better option here, 249 00:09:35,410 --> 00:09:38,610 would be to leave the height set to wrap_content, 250 00:09:38,610 --> 00:09:40,070 and that's because it allows the widget 251 00:09:40,070 --> 00:09:44,060 to expand vertically to display all the text it contains. 252 00:09:44,060 --> 00:09:45,200 So I'm gonna go ahead and do that, 253 00:09:45,200 --> 00:09:48,920 change that to wrap_content, and that fixes that up. 254 00:09:48,920 --> 00:09:50,560 And the other thing to check here, 255 00:09:50,560 --> 00:09:53,463 is to make sure that the margins are set correctly. 256 00:09:54,703 --> 00:09:56,340 (mouse clicking) 257 00:09:56,340 --> 00:09:57,530 And sometimes you'll find 258 00:09:57,530 --> 00:09:59,630 there's a little bit of a weird bug there. 259 00:10:00,578 --> 00:10:02,778 (mouse clicking) 260 00:10:02,778 --> 00:10:05,050 And you can see that that's showing as 16. 261 00:10:05,050 --> 00:10:07,120 If I change that to 8, you can see it briefly moves over 262 00:10:07,120 --> 00:10:08,520 and briefly moves back again - 263 00:10:08,520 --> 00:10:10,640 this is the left margin I'm talking about, 264 00:10:10,640 --> 00:10:12,290 for the Plain Text. 265 00:10:12,290 --> 00:10:15,290 Now, we want the text to start from the left-hand side, 266 00:10:15,290 --> 00:10:18,220 but the widget is automatically set to centred. 267 00:10:18,220 --> 00:10:21,210 Now as more text is entered, it'll expand right, 268 00:10:21,210 --> 00:10:23,940 but it should start from the left edge of the layout. 269 00:10:23,940 --> 00:10:27,380 So to do that we wanna change the horizontal slider to zero, 270 00:10:27,380 --> 00:10:31,370 so that it's hard fast and to the left. 271 00:10:31,370 --> 00:10:33,370 So I'm gonna change that slider to zero. 272 00:10:35,320 --> 00:10:38,090 Now you may or may not get a problem when you do that. 273 00:10:38,090 --> 00:10:39,610 If your editText widget, 274 00:10:39,610 --> 00:10:42,600 has a left margin showing in the design or blueprint, 275 00:10:42,600 --> 00:10:44,130 then everything's fine. But there's a bug 276 00:10:44,130 --> 00:10:46,530 in Android Studio - there has been for a while, 277 00:10:46,530 --> 00:10:49,610 even back in version 2.3 stable release. 278 00:10:49,610 --> 00:10:53,040 So it attempts to cater for right to left languages, 279 00:10:53,040 --> 00:10:55,660 and uses the layout_margin start, 280 00:10:55,660 --> 00:10:58,200 and layout_margin and attributes. 281 00:10:58,200 --> 00:11:01,080 Now, that might be instead of or in addition to, 282 00:11:01,080 --> 00:11:06,080 the layout_margin left and layout_margin right attributes. 283 00:11:06,490 --> 00:11:08,420 So the exact effect of the bug changes 284 00:11:08,420 --> 00:11:09,710 with different versions, 285 00:11:09,710 --> 00:11:11,550 so it's not really easy to demonstrate 286 00:11:11,550 --> 00:11:13,890 exactly why it happened on your screen, 287 00:11:13,890 --> 00:11:15,280 but hopefully everything works fine, 288 00:11:15,280 --> 00:11:18,080 and the bug's been fixed by the time you watch this video. 289 00:11:18,080 --> 00:11:21,510 But to show you one way the problem messes with the preview, 290 00:11:21,510 --> 00:11:23,360 I'm gonna make a change to the margins 291 00:11:23,360 --> 00:11:24,383 for the editText widget. 292 00:11:25,300 --> 00:11:26,550 So I'm going to, over here, 293 00:11:26,550 --> 00:11:29,481 for the editText widget, Plain Text, I'm going to 294 00:11:29,481 --> 00:11:32,213 click over here to get to the extended attributes, 295 00:11:33,531 --> 00:11:37,203 and I'm going to expand the layout_margin, here. 296 00:11:38,297 --> 00:11:40,290 And what I'm gonna do is delete the settings, 297 00:11:40,290 --> 00:11:42,140 if there's anything in there for the right, 298 00:11:42,140 --> 00:11:44,240 and I'm gonna set end to 16dp, 299 00:11:44,240 --> 00:11:46,040 which is currently set at the moment. 300 00:11:46,040 --> 00:11:49,120 Now it may already be using end as it was in this case here. 301 00:11:49,120 --> 00:11:50,470 In which case there's nothing obviously 302 00:11:50,470 --> 00:11:52,300 that you need to change. 303 00:11:52,300 --> 00:11:55,619 But you can see that the net effect of that is that 304 00:11:55,619 --> 00:11:57,390 the editText is showing hard over 305 00:11:57,390 --> 00:11:59,750 against the left-hand edge, with no margins showing, 306 00:11:59,750 --> 00:12:01,520 and that's been the case all along, 307 00:12:01,520 --> 00:12:05,060 since I first dragged this 308 00:12:05,060 --> 00:12:08,793 Plain Text or editText widget onto the screen. 309 00:12:09,650 --> 00:12:11,810 Now I'm not exactly sure why 310 00:12:11,810 --> 00:12:13,810 it's the left margin that's vanished, 311 00:12:13,810 --> 00:12:15,960 when it was the setting for the right margin 312 00:12:15,960 --> 00:12:18,760 that was changed, or in this case has been set, 313 00:12:18,760 --> 00:12:20,820 but it's a bug, and that's the nature of bugs. 314 00:12:20,820 --> 00:12:23,120 Seems worse if you have different pairs 315 00:12:23,120 --> 00:12:25,190 specifying the left and right margins, for example, 316 00:12:25,190 --> 00:12:26,990 using left, and you can see here we've got 317 00:12:26,990 --> 00:12:30,130 left and right specified, or start and right. 318 00:12:30,130 --> 00:12:33,770 So, you will get strange results with margins, or if you do, 319 00:12:33,770 --> 00:12:34,660 check the margins 320 00:12:34,660 --> 00:12:37,430 in the attributes section, as you can see here. 321 00:12:37,430 --> 00:12:40,831 Now, the layout_margin start and end attributes, 322 00:12:40,831 --> 00:12:44,340 well they were both introduced in API 17 Jellybean, 323 00:12:44,340 --> 00:12:47,980 and will actually be ignored on earlier Android versions. 324 00:12:47,980 --> 00:12:48,813 Now what that means is, 325 00:12:48,813 --> 00:12:51,950 that the margin won't be set on earlier versions, 326 00:12:51,950 --> 00:12:54,760 unless you've got layout_margin left 327 00:12:54,760 --> 00:12:58,230 and layout_margin right attributes. 328 00:12:58,230 --> 00:13:00,930 Now you can use them as well as the start end versions. 329 00:13:00,930 --> 00:13:04,850 The new attributes are ignored on older versions. 330 00:13:04,850 --> 00:13:07,170 So once you've actually got your margins correct, 331 00:13:07,170 --> 00:13:09,930 check the layout margin attributes, and make sure you've got 332 00:13:09,930 --> 00:13:12,100 both sets of attributes for each margin. 333 00:13:12,100 --> 00:13:14,340 So if you set left, then you also wanna set 334 00:13:14,340 --> 00:13:17,490 start to the same value, and if you set right, 335 00:13:17,490 --> 00:13:19,470 then set end to the same value. 336 00:13:19,470 --> 00:13:22,600 Now we're targeting API 17 and above, 337 00:13:22,600 --> 00:13:23,750 so you might think you could just 338 00:13:23,750 --> 00:13:26,470 use the start and end attributes. 339 00:13:26,470 --> 00:13:30,660 That's correct, you can. But, if you later change your mind, 340 00:13:30,660 --> 00:13:32,930 and target API 16 or above, 341 00:13:32,930 --> 00:13:35,140 you'll have to go through every layout in the app, 342 00:13:35,140 --> 00:13:37,500 setting the left and right margin attributes 343 00:13:37,500 --> 00:13:39,110 for every widget. 344 00:13:39,110 --> 00:13:42,144 Now, Android Studio may hopefully start 345 00:13:42,144 --> 00:13:45,500 doing that for us, in a future release. 346 00:13:45,500 --> 00:13:47,340 But right now, it's much more reliable 347 00:13:47,340 --> 00:13:49,450 to just set both pairs of attributes 348 00:13:49,450 --> 00:13:51,590 when you're creating the layouts. 349 00:13:51,590 --> 00:13:52,593 So just click on the Button to select it, 350 00:13:52,593 --> 00:13:54,730 and set the end margin 351 00:13:54,730 --> 00:13:58,620 if it's not already set, to 16dp as well, 352 00:13:58,620 --> 00:14:00,040 and I'm gonna set, in my case, 353 00:14:00,040 --> 00:14:02,010 because right wasn't specified, 354 00:14:02,010 --> 00:14:05,123 I'm gonna specify right to be 16dp as well. 355 00:14:06,230 --> 00:14:09,240 I'm gonna click on start and change that to 16dp as well, 356 00:14:09,240 --> 00:14:11,970 so they both match, and you can see now that I've done that, 357 00:14:11,970 --> 00:14:16,970 we've got left 16dp, start 16dp, end 16dp and right 16dp. 358 00:14:18,930 --> 00:14:20,810 You can see that when I set that, 359 00:14:20,810 --> 00:14:23,630 we've now got the margin correctly showing, 360 00:14:23,630 --> 00:14:25,493 in the design and blueprint. 361 00:14:26,370 --> 00:14:28,980 So that's good, and that makes everything work out okay, 362 00:14:28,980 --> 00:14:31,990 but watch out if you change the margins in the inspector, 363 00:14:31,990 --> 00:14:34,740 and check the margins again like I've just shown you, 364 00:14:34,740 --> 00:14:36,210 if you do. 365 00:14:36,210 --> 00:14:38,650 Alright, so, the Text View, well that's gonna go 366 00:14:38,650 --> 00:14:40,927 directly below the Plain Text widget, 367 00:14:40,927 --> 00:14:43,930 but what we'll do is we'll finish the video here, 368 00:14:43,930 --> 00:14:45,670 and we'll start up in the next video, 369 00:14:45,670 --> 00:14:47,610 where we'll go ahead and add that Text View. 370 00:14:47,610 --> 00:14:49,060 So I'll see you in the next video.