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.