1
00:00:04,600 --> 00:00:07,660
Alright, so so far we've created our

2
00:00:07,660 --> 00:00:10,210
Content Provider and the Contracts class

3
00:00:10,210 --> 00:00:12,010
that goes with it, and we can also create

4
00:00:12,010 --> 00:00:15,789
query, update and delete records. So the

5
00:00:15,789 --> 00:00:17,440
database side of things is pretty much

6
00:00:17,440 --> 00:00:19,210
done. Now as I've mentioned

7
00:00:19,210 --> 00:00:21,550
previously, there is one small change we

8
00:00:21,550 --> 00:00:24,130
need to make to our Content Provider, but

9
00:00:24,130 --> 00:00:26,590
I'm saving that until we need it. In the

10
00:00:26,590 --> 00:00:28,599
last video we created the main menu for

11
00:00:28,599 --> 00:00:30,580
our app, so we're now ready to start

12
00:00:30,580 --> 00:00:32,740
adding the functionality to those menu

13
00:00:32,740 --> 00:00:34,870
options. First though, we need some

14
00:00:34,870 --> 00:00:37,570
layouts to display the data and provide

15
00:00:37,570 --> 00:00:40,660
the user interface. The main screen for

16
00:00:40,660 --> 00:00:42,579
the app is going to be a RecyclerView,

17
00:00:42,579 --> 00:00:45,100
showing a list of all the tasks in the

18
00:00:45,100 --> 00:00:47,649
database, with a TextView above it to

19
00:00:47,649 --> 00:00:50,440
show which task is currently being timed.

20
00:00:50,440 --> 00:00:52,629
So let's start by setting that up in

21
00:00:52,629 --> 00:00:54,879
fragment_main. So I'm going to

22
00:00:54,879 --> 00:00:57,390
open up my layouts folder under res,

23
00:00:57,390 --> 00:00:59,769
and we'll double click fragment

24
00:00:59,769 --> 00:01:02,379
underscore main.xml, and we'll also

25
00:01:02,379 --> 00:01:04,300
close down the Project pane as well

26
00:01:04,300 --> 00:01:05,830
to give ourselves a bit more space. Now

27
00:01:05,830 --> 00:01:08,500
as it turns out we've already got a

28
00:01:08,500 --> 00:01:10,810
TextView, so we can start by modifying

29
00:01:10,810 --> 00:01:12,820
that one rather than adding another. So

30
00:01:12,820 --> 00:01:14,500
I'm going to click on the TextView -

31
00:01:14,500 --> 00:01:15,820
we could have done it in the component

32
00:01:15,820 --> 00:01:19,030
tree. We're going to go back to our regular set of

33
00:01:19,030 --> 00:01:20,770
attributes, and I'm going to give it the

34
00:01:20,770 --> 00:01:26,740
ID current_task because

35
00:01:26,740 --> 00:01:28,060
that's what ultimately it's going to

36
00:01:28,060 --> 00:01:30,549
display in that TextView. Now, in fact,

37
00:01:30,549 --> 00:01:32,350
this may not be a good choice of name

38
00:01:32,350 --> 00:01:35,470
when using Kotlin. Google's Java examples

39
00:01:35,470 --> 00:01:37,840
in tutorials use names like that because

40
00:01:37,840 --> 00:01:40,090
that's a common way to name things when

41
00:01:40,090 --> 00:01:42,939
using xml. That's fine. We are after all

42
00:01:42,939 --> 00:01:45,189
just using this designer to produce

43
00:01:45,189 --> 00:01:48,520
an XML file, but things have changed a

44
00:01:48,520 --> 00:01:51,100
bit with Kotlin. We no longer have to 

45
00:01:51,100 --> 00:01:53,350
litter our code with define view by ID

46
00:01:53,350 --> 00:01:56,079
calls that we had to do when using Java.

47
00:01:56,079 --> 00:01:58,899
Now we'll often be using synthetic imports

48
00:01:58,899 --> 00:02:01,090
instead, which means that we'll be using

49
00:02:01,090 --> 00:02:04,030
these IDs as variable names in our code.

50
00:02:04,030 --> 00:02:06,549
Now this is all pretty new. Google only

51
00:02:06,549 --> 00:02:08,350
announced full support for Kotlin last

52
00:02:08,350 --> 00:02:11,740
year, but at this year's Google I/O 2018,

53
00:02:11,740 --> 00:02:14,350
the vast majority of the code samples they

54
00:02:14,350 --> 00:02:16,930
showed were Kotlin, not Java. So that's

55
00:02:16,930 --> 00:02:18,370
exciting for us as Kotlin

56
00:02:18,370 --> 00:02:19,959
programmers. However it's going to take a

57
00:02:19,959 --> 00:02:22,330
while for things to catch up. Now as

58
00:02:22,330 --> 00:02:24,010
an example, Google have got a Kotlin

59
00:02:24,010 --> 00:02:25,599
style sheet. I'm just going to bring that

60
00:02:25,599 --> 00:02:33,250
up and load that into a browser.

61
00:02:33,250 --> 00:02:35,230
So let's scroll down to the naming section

62
00:02:35,230 --> 00:02:37,720
and specifically, I'm going to find the

63
00:02:37,720 --> 00:02:39,730
guide on how we should name our

64
00:02:39,730 --> 00:02:41,980
variables in Kotlin, and they refer to it

65
00:02:41,980 --> 00:02:47,060
as the Non-constant names.

66
00:02:47,060 --> 00:02:50,050
Here's the naming section I was talking about -

67
00:02:50,050 --> 00:02:52,010
Constant names, and here we go under

68
00:02:52,010 --> 00:02:54,650
Non-constant names. So you can see there

69
00:02:54,650 --> 00:02:56,510
that they're suggesting we should use

70
00:02:56,510 --> 00:02:58,760
camelCase, but if we use lowercase

71
00:02:58,760 --> 00:03:01,430
with underscores for the IDS in our XML,

72
00:03:01,430 --> 00:03:03,860
those names are going to be used for our

73
00:03:03,860 --> 00:03:06,410
variables in the code. Now Google's

74
00:03:06,410 --> 00:03:08,989
Kotlin style guide doesn't consider that

75
00:03:08,989 --> 00:03:10,849
aspect of things - not at the moment at

76
00:03:10,849 --> 00:03:13,280
least. So what should we do here? Well

77
00:03:13,280 --> 00:03:16,010
without any clear guidelines, I'd suggest

78
00:03:16,010 --> 00:03:17,989
doing what you're most comfortable with.

79
00:03:17,989 --> 00:03:19,610
Obviously if you're working for a

80
00:03:19,610 --> 00:03:22,010
company or on a project that does have

81
00:03:22,010 --> 00:03:23,930
clear guidelines, then stick to the

82
00:03:23,930 --> 00:03:25,160
guidelines from the company or the

83
00:03:25,160 --> 00:03:27,140
project. Here though, I'm going to stick

84
00:03:27,140 --> 00:03:29,810
with current_task, and what

85
00:03:29,810 --> 00:03:31,519
I'll do is try to predict the future a

86
00:03:31,519 --> 00:03:33,890
bit here, and I know that these IDs will

87
00:03:33,890 --> 00:03:36,230
appear, be appearing in my Kotlin code.

88
00:03:36,230 --> 00:03:39,200
When they do, seeing variable names with

89
00:03:39,200 --> 00:03:42,410
underscores is going to feel strange. Now

90
00:03:42,410 --> 00:03:44,510
I suspect that JetBrains will work on

91
00:03:44,510 --> 00:03:46,970
this, and that the synthetic imports will

92
00:03:46,970 --> 00:03:49,580
change the names to camelCase for us in

93
00:03:49,580 --> 00:03:52,489
a future version of Android Studio. But

94
00:03:52,489 --> 00:03:54,410
if that doesn't happen, the underscores

95
00:03:54,410 --> 00:03:56,480
will serve as a reminder that the

96
00:03:56,480 --> 00:03:58,579
variables are referring to layout

97
00:03:58,579 --> 00:04:01,190
widgets. And in terms of what the Kotlin

98
00:04:01,190 --> 00:04:03,470
community thinks about this, it's split

99
00:04:03,470 --> 00:04:06,470
about 50/50 on this. In other words, half

100
00:04:06,470 --> 00:04:08,329
of the developers are using camelCase

101
00:04:08,329 --> 00:04:10,069
and the other half are sticking with

102
00:04:10,069 --> 00:04:12,380
underscores. So whatever you choose you

103
00:04:12,380 --> 00:04:14,329
won't be alone. Alright so we'll go

104
00:04:14,329 --> 00:04:17,870
back to Android Studio now, and

105
00:04:17,870 --> 00:04:19,630
what we need this TextView to be

106
00:04:19,630 --> 00:04:21,858
constrained is, at the top left and

107
00:04:21,858 --> 00:04:23,600
right edges of the layout, with all

108
00:04:23,600 --> 00:04:26,150
margins set to 8dp. So I'm just going to

109
00:04:26,150 --> 00:04:28,639
select it. I'm not going to change these

110
00:04:28,639 --> 00:04:30,370
because we can see here that we've got

111
00:04:30,370 --> 00:04:32,660
constraints already added for all four -

112
00:04:32,660 --> 00:04:35,780
left, right, top and bottom - but what I'm

113
00:04:35,780 --> 00:04:37,760
going to do though, is delete the bottom

114
00:04:37,760 --> 00:04:40,490
constraint and you'll see why later in

115
00:04:40,490 --> 00:04:42,200
the video. And what I am going to do here

116
00:04:42,200 --> 00:04:45,830
is make sure that we've got 8dp set for

117
00:04:45,830 --> 00:04:49,550
the top left and right margins. So I'm

118
00:04:49,550 --> 00:04:50,990
going to allow it to occupy the full

119
00:04:50,990 --> 00:04:52,729
width of the screen if it needs to, and

120
00:04:52,729 --> 00:04:54,169
that's by setting the layout_

121
00:04:54,169 --> 00:04:58,250
width to match_constraint. Now the

122
00:04:58,250 --> 00:04:59,650
layout_height should

123
00:04:59,650 --> 00:05:01,840
be set to wrap_content so that it can

124
00:05:01,840 --> 00:05:04,000
grow if necessary, and you can see there that

125
00:05:04,000 --> 00:05:05,350
layout_height is already

126
00:05:05,350 --> 00:05:07,270
set to that. Now we're going to use a

127
00:05:07,270 --> 00:05:10,210
string resource for the text property, so

128
00:05:10,210 --> 00:05:11,680
I'm going to come over here and click on

129
00:05:11,680 --> 00:05:13,270
the ellipsis to the right of the text

130
00:05:13,270 --> 00:05:16,750
property. Now remember that the text

131
00:05:16,750 --> 00:05:18,639
below that, with the little picture of

132
00:05:18,639 --> 00:05:20,470
the paintbrush there that used to be a

133
00:05:20,470 --> 00:05:22,960
wrench, that's used to specify text that

134
00:05:22,960 --> 00:05:25,330
will only display in the layout so we

135
00:05:25,330 --> 00:05:27,220
don't want to use that one. So I'm going to

136
00:05:27,220 --> 00:05:29,169
click on Add new resource, New string

137
00:05:29,169 --> 00:05:31,509
Value. I'm going to call this one no

138
00:05:31,509 --> 00:05:35,970
_task_message, and

139
00:05:35,970 --> 00:05:38,370
for the value I'm going to put No Task

140
00:05:38,370 --> 00:05:44,050
Selected. Press ENTER there. Now under

141
00:05:44,050 --> 00:05:45,760
textAppearance, I'm going to expand that

142
00:05:45,760 --> 00:05:47,680
if it's not already expanded and I'm

143
00:05:47,680 --> 00:05:49,449
going to change the text size. I'm going

144
00:05:49,449 --> 00:05:52,539
to make that 22sps - I'm going to

145
00:05:52,539 --> 00:05:56,050
select the 24 and change it to 22. I could

146
00:05:56,050 --> 00:05:58,870
have just typed in the 22 there. I'm also

147
00:05:58,870 --> 00:06:01,630
going to change the textStyle to bold.

148
00:06:01,630 --> 00:06:04,510
Now in terms of the textColor, notice here

149
00:06:04,510 --> 00:06:05,740
that it's not actually showing anything,

150
00:06:05,740 --> 00:06:07,870
but it may be showing as textColor

151
00:06:07,870 --> 00:06:10,750
Tertiary. But if not, the full value we

152
00:06:10,750 --> 00:06:13,810
want is basically the android : attr

153
00:06:13,810 --> 00:06:16,599
slash textColorTertiary. But rather

154
00:06:16,599 --> 00:06:18,070
than typing that in, it's probably easier

155
00:06:18,070 --> 00:06:20,229
to use the ellipsis over here on the

156
00:06:20,229 --> 00:06:23,530
right hand side. Select that and expand

157
00:06:23,530 --> 00:06:26,500
Theme attributes, and then we'll do a search

158
00:06:26,500 --> 00:06:28,539
for textColorTertiary. We can just type

159
00:06:28,539 --> 00:06:32,199
in, just type tertiary to get that for

160
00:06:32,199 --> 00:06:34,300
us quickly, and the one we want here is this

161
00:06:34,300 --> 00:06:37,510
one - android:textColorTertiary. Now we

162
00:06:37,510 --> 00:06:40,120
have seen the tertiary text color set to

163
00:06:40,120 --> 00:06:41,919
the accent color, the same as the

164
00:06:41,919 --> 00:06:43,539
floating action button. So if that

165
00:06:43,539 --> 00:06:45,699
happens don't worry. We have got full

166
00:06:45,699 --> 00:06:47,650
control over these things and we'll be

167
00:06:47,650 --> 00:06:49,479
looking at changing it all later anyway.

168
00:06:49,479 --> 00:06:51,340
I'm going to leave it as it is though, by

169
00:06:51,340 --> 00:06:54,070
there, by just clicking on OK, noting

170
00:06:54,070 --> 00:06:55,419
that's now been updated in the text

171
00:06:55,419 --> 00:06:57,669
Color, and because doing that gives us a

172
00:06:57,669 --> 00:06:59,949
bit more control to make this text stand

173
00:06:59,949 --> 00:07:01,630
out compared to everything else on the

174
00:07:01,630 --> 00:07:03,729
screen. And we'll see that when we come

175
00:07:03,729 --> 00:07:05,949
to play with the material design styling.

176
00:07:05,949 --> 00:07:07,750
Now I'm not going to suggest you do

177
00:07:07,750 --> 00:07:09,490
what I'm about to do, but if we quickly

178
00:07:09,490 --> 00:07:12,460
open up styles.xml, so I can

179
00:07:12,460 --> 00:07:13,330
just open the

180
00:07:13,330 --> 00:07:15,129
Project pane and go into our values folder -

181
00:07:15,129 --> 00:07:18,250
double-click styles.xml. Just below

182
00:07:18,250 --> 00:07:20,530
the colorAccent, and come into there and

183
00:07:20,530 --> 00:07:25,030
I can type item name equals android

184
00:07:25,030 --> 00:07:30,009
colon textColorTertiary, and close off

185
00:07:30,009 --> 00:07:32,110
that tag and then set it to the value of

186
00:07:32,110 --> 00:07:36,189
color/colorAccent. So we

187
00:07:36,189 --> 00:07:38,050
can do that if we wish, and now if we go

188
00:07:38,050 --> 00:07:40,509
back to our fragment we can see that

189
00:07:40,509 --> 00:07:42,280
we've got a nice, well actually it's not very

190
00:07:42,280 --> 00:07:44,710
nice, it's fairly hideous. Basically

191
00:07:44,710 --> 00:07:46,240
the text is now a hideous color, but again

192
00:07:46,240 --> 00:07:47,889
we can play around with that a little

193
00:07:47,889 --> 00:07:49,780
bit later. Alright so moving on though,

194
00:07:49,780 --> 00:07:51,039
I'm going to close down the Project pane

195
00:07:51,039 --> 00:07:53,590
again. The next thing we need now is a

196
00:07:53,590 --> 00:07:55,810
RecyclerView, so I'm just going to come

197
00:07:55,810 --> 00:07:58,150
over here and select Containers, and drag a

198
00:07:58,150 --> 00:08:01,990
RecyclerView down below the TextView.

199
00:08:01,990 --> 00:08:05,110
And what we want to do with this one is,

200
00:08:05,110 --> 00:08:06,610
we want to constrain it on all sides -

201
00:08:06,610 --> 00:08:09,279
the left hand side, the right and the

202
00:08:09,279 --> 00:08:10,960
bottom. I'm just going to click on these

203
00:08:10,960 --> 00:08:14,860
buttons up here. Then for the top one I'm

204
00:08:14,860 --> 00:08:16,779
just going to select it and make sure

205
00:08:16,779 --> 00:08:18,490
that it's constrained against our Text

206
00:08:18,490 --> 00:08:20,349
View. So again, you want to make sure that

207
00:08:20,349 --> 00:08:22,150
that's now our constraint to the Text

208
00:08:22,150 --> 00:08:24,550
View and not to the top of the screen.

209
00:08:24,550 --> 00:08:26,620
And the other thing to do is make sure

210
00:08:26,620 --> 00:08:29,199
there's an 8dp margin on all four sides,

211
00:08:29,199 --> 00:08:30,849
as you can see there is for me there now.

212
00:08:30,849 --> 00:08:33,010
And the other thing we want to do is once we've

213
00:08:33,010 --> 00:08:35,049
set those constraints, we want to make

214
00:08:35,049 --> 00:08:37,089
sure that both the layout width and

215
00:08:37,089 --> 00:08:39,130
layout height are set to match_

216
00:08:39,130 --> 00:08:44,320
constraint, like so. So at this point

217
00:08:44,320 --> 00:08:46,510
that's our RecyclerView filling the

218
00:08:46,510 --> 00:08:48,519
screen. So the last thing now is to set

219
00:08:48,519 --> 00:08:49,930
its ID, so let's go ahead and do that.

220
00:08:49,930 --> 00:08:53,199
We're going to call it task_

221
00:08:53,199 --> 00:08:56,140
list. Alright, so the second to last step

222
00:08:56,140 --> 00:08:57,940
now is, I'm also going to give it a

223
00:08:57,940 --> 00:08:59,769
vertical scroll bar. I'm going to click

224
00:08:59,769 --> 00:09:01,810
into here, in our scrollbars under Recycler

225
00:09:01,810 --> 00:09:04,690
View, click on vertical and click on OK.

226
00:09:04,690 --> 00:09:07,540
And then I need to reformat the XML,

227
00:09:07,540 --> 00:09:08,649
so I'm just going to do that. Select the

228
00:09:08,649 --> 00:09:14,040
XML and reformat it, as I always do. Al

229
00:09:14,040 --> 00:09:16,750
right. So that's our RecyclerView

230
00:09:16,750 --> 00:09:19,300
completed. It's going to need a view to

231
00:09:19,300 --> 00:09:22,060
display the task details in, so let's go

232
00:09:22,060 --> 00:09:23,860
ahead and create that. So what I'm going

233
00:09:23,860 --> 00:09:27,250
to do is go again to my layout folder,

234
00:09:27,250 --> 00:09:30,040
and right-click New, Layout resource file,

235
00:09:30,040 --> 00:09:32,190
and we're going to call this one task

236
00:09:32,190 --> 00:09:38,080
_list_items. Now

237
00:09:38,080 --> 00:09:40,690
we need two TextView widgets and two image

238
00:09:40,690 --> 00:09:42,760
buttons. So I'm going to start with the

239
00:09:42,760 --> 00:09:45,070
TextViews, and I'll put in the first one

240
00:09:45,070 --> 00:09:47,980
now - I'll add the first one - doesn't

241
00:09:47,980 --> 00:09:48,880
really matter where we put it on the

242
00:09:48,880 --> 00:09:50,620
screen at the moment. Now this one's

243
00:09:50,620 --> 00:09:53,050
going to display the task name, so it's

244
00:09:53,050 --> 00:09:57,900
ID is going to be tli_name.

245
00:09:57,900 --> 00:10:00,670
Now I'm prefixing the IDs in this layout

246
00:10:00,670 --> 00:10:04,780
with tli for task list items. That way

247
00:10:04,780 --> 00:10:06,460
there'll be no confusion if you want to

248
00:10:06,460 --> 00:10:09,310
use a similar ID in another layout. Now

249
00:10:09,310 --> 00:10:10,780
I'm not going to create constraints

250
00:10:10,780 --> 00:10:12,520
until all four widgets are in the layout,

251
00:10:12,520 --> 00:10:14,650
but I will configure each widget before

252
00:10:14,650 --> 00:10:16,900
we move on to the next one. Now we don't

253
00:10:16,900 --> 00:10:19,120
need any text in the TextViews, so the

254
00:10:19,120 --> 00:10:20,800
text property over here to the right can

255
00:10:20,800 --> 00:10:23,500
be cleared and I'll do that now. But what I'm

256
00:10:23,500 --> 00:10:25,240
going to do is add some sample text to

257
00:10:25,240 --> 00:10:27,610
the tool text property so that we can

258
00:10:27,610 --> 00:10:30,040
see where the widgets are, and also get

259
00:10:30,040 --> 00:10:31,690
an idea of what they'll look like when the

260
00:10:31,690 --> 00:10:33,910
app's running. So I'm going to come over and select

261
00:10:33,910 --> 00:10:36,910
the text, the tool text which is the next

262
00:10:36,910 --> 00:10:38,080
option there, and then I'm going to

263
00:10:38,080 --> 00:10:41,760
actually specify this as TaskTimer

264
00:10:41,760 --> 00:10:47,050
Application. Okay. Now the text size, let's

265
00:10:47,050 --> 00:10:48,880
change that, and we'll change that to 22

266
00:10:48,880 --> 00:10:55,510
sp. I'm also going to set it to bold. Now

267
00:10:55,510 --> 00:10:57,850
in terms of the textColor itself, that

268
00:10:57,850 --> 00:10:59,560
should be set to the primary text color.

269
00:10:59,560 --> 00:11:01,720
And we can set that by coming over here

270
00:11:01,720 --> 00:11:02,920
and clicking on the ellipsis to the

271
00:11:02,920 --> 00:11:04,800
right hand side of textColor,

272
00:11:04,800 --> 00:11:07,150
typing primary up here in the search box

273
00:11:07,150 --> 00:11:11,560
and then selecting Theme attributes,

274
00:11:11,560 --> 00:11:13,480
making sure that's expanded, and the one

275
00:11:13,480 --> 00:11:16,150
we want here is android:textColor

276
00:11:16,150 --> 00:11:20,740
Primary. Then you select that and click OK, and

277
00:11:20,740 --> 00:11:22,480
again we want to make sure, under

278
00:11:22,480 --> 00:11:25,270
textile, that bold is selected. Alright, so 

279
00:11:25,270 --> 00:11:27,070
let's drop the next TextView onto

280
00:11:27,070 --> 00:11:29,830
the screen, just below that somewhere, and

281
00:11:29,830 --> 00:11:31,900
let's start with the ID. We'll call this

282
00:11:31,900 --> 00:11:36,060
one tli_description, and

283
00:11:36,060 --> 00:11:38,990
we're going to delete the regular text,

284
00:11:38,990 --> 00:11:41,090
and under the tool text we're going to

285
00:11:41,090 --> 00:11:46,550
type in Write course notes and video for

286
00:11:46,550 --> 00:11:52,280
the TaskTimer application. Now

287
00:11:52,280 --> 00:11:53,420
technically it doesn't matter if you don't

288
00:11:53,420 --> 00:11:55,130
clear out the text property, because

289
00:11:55,130 --> 00:11:56,120
that's going to be set in the code

290
00:11:56,120 --> 00:11:57,980
anyway. But I like to clear it and you

291
00:11:57,980 --> 00:11:59,990
saw me do that, because it removes the

292
00:11:59,990 --> 00:12:01,760
warnings about string resources, for one

293
00:12:01,760 --> 00:12:03,470
thing. Alright, and we want to change

294
00:12:03,470 --> 00:12:06,860
the color, our textColor for this tli

295
00:12:06,860 --> 00:12:10,190
description, to secondary, to textColor

296
00:12:10,190 --> 00:12:11,720
Secondary. So I'm going to just expand

297
00:12:11,720 --> 00:12:14,920
Theme attributes, type in secondary and

298
00:12:14,920 --> 00:12:17,240
select android:textColor

299
00:12:17,240 --> 00:12:20,480
Secondary. Alright so moving on now.

300
00:12:20,480 --> 00:12:22,340
The next thing we're going to do is add

301
00:12:22,340 --> 00:12:25,160
our image buttons. The image button is found

302
00:12:25,160 --> 00:12:26,840
in the buttons category, and I'll close

303
00:12:26,840 --> 00:12:28,490
down the Project pane again.

304
00:12:28,490 --> 00:12:31,730
So Button, imageButton - I'm going to drag

305
00:12:31,730 --> 00:12:34,310
one of those on - and I'm putting the

306
00:12:34,310 --> 00:12:35,900
image buttons next to each other, or will

307
00:12:35,900 --> 00:12:38,540
be, below the two TextViews for now. And

308
00:12:38,540 --> 00:12:40,460
really it doesn't matter where you're

309
00:12:40,460 --> 00:12:41,990
initially dropping things in this layout,

310
00:12:41,990 --> 00:12:44,030
but I like to keep space around the

311
00:12:44,030 --> 00:12:46,160
widgets just to make it easier to set

312
00:12:46,160 --> 00:12:48,200
the constraints later. So anyway, we

313
00:12:48,200 --> 00:12:49,820
notice, you notice that when I dropped

314
00:12:49,820 --> 00:12:51,170
an image button onto the layout, this

315
00:12:51,170 --> 00:12:53,360
dialogue's popped up automatically to

316
00:12:53,360 --> 00:12:55,370
enable me to choose the dialogue. So I need

317
00:12:55,370 --> 00:12:57,050
to make sure Drawable's selected, which

318
00:12:57,050 --> 00:13:00,140
it is. Then I'm going to type edit into

319
00:13:00,140 --> 00:13:02,120
the search box, and here what we want to

320
00:13:02,120 --> 00:13:04,370
do is expand android, and the option we

321
00:13:04,370 --> 00:13:07,460
won here is this ic_underscore menu and

322
00:13:07,460 --> 00:13:10,870
_edit. So click OK.

323
00:13:10,870 --> 00:13:13,310
So in terms of the ID let's set that.

324
00:13:13,310 --> 00:13:15,770
We're going to set that to tli_

325
00:13:15,770 --> 00:13:20,060
edit, and we should add a content

326
00:13:20,060 --> 00:13:21,860
Description as well so let's do that.

327
00:13:21,860 --> 00:13:24,200
This is to make the app accessible to

328
00:13:24,200 --> 00:13:26,180
people with difficulty seeing. So we're

329
00:13:26,180 --> 00:13:27,560
going to create a new string resource

330
00:13:27,560 --> 00:13:31,540
for that. So let's go ahead and do that,

331
00:13:31,540 --> 00:13:34,100
and the resource name we're going to go

332
00:13:34,100 --> 00:13:37,520
with is edit_button_

333
00:13:37,520 --> 00:13:40,790
description. And the resource value,

334
00:13:40,790 --> 00:13:42,140
I'm going to enter something like

335
00:13:42,140 --> 00:13:48,440
Button to edit a tasks details. Alright

336
00:13:48,440 --> 00:13:50,480
so that's the first image button. Let's

337
00:13:50,480 --> 00:13:52,280
drag another image button now

338
00:13:52,280 --> 00:13:54,710
over here to the right, and for this one

339
00:13:54,710 --> 00:13:57,380
I'm going to expand android again, and

340
00:13:57,380 --> 00:13:59,720
the one we want to search for here, yeah

341
00:13:59,720 --> 00:14:02,120
we'll just type in the word delete. We

342
00:14:02,120 --> 00:14:02,540
want this

343
00:14:02,540 --> 00:14:04,520
ic_menu_

344
00:14:04,520 --> 00:14:07,700
delete. Select that, and the ID for this

345
00:14:07,700 --> 00:14:12,380
one will be tli_delete. And

346
00:14:12,380 --> 00:14:14,210
let's create a contentDescription as

347
00:14:14,210 --> 00:14:17,540
well, new string resource, and we'll call

348
00:14:17,540 --> 00:14:20,120
the resource name delete_

349
00:14:20,120 --> 00:14:23,780
button_description, and for the

350
00:14:23,780 --> 00:14:29,230
resource value, Button to delete a task.

351
00:14:29,230 --> 00:14:31,460
Alright so at this point now, we're

352
00:14:31,460 --> 00:14:33,260
actually done adding the widgets. We're

353
00:14:33,260 --> 00:14:35,150
going to end the video here, then in the

354
00:14:35,150 --> 00:14:36,470
next video we need to add the

355
00:14:36,470 --> 00:14:38,120
constraints, or create the constraints

356
00:14:38,120 --> 00:14:40,490
for each one of these widgets. So I'll

357
00:14:40,490 --> 00:14:43,480
see you in the next video.