1
00:00:00,560 --> 00:00:01,350
Welcome back.

2
00:00:01,730 --> 00:00:07,130
This time, I want to take a slightly different approach to bring this topic closer to you, because

3
00:00:07,130 --> 00:00:12,170
what we're going to create is a UI, which looks confusing at first.

4
00:00:12,890 --> 00:00:15,590
So we're going to build what you can see right here.

5
00:00:16,010 --> 00:00:18,320
And what you see right here is rather complex.

6
00:00:18,330 --> 00:00:20,980
So I have to explain it slowly.

7
00:00:20,990 --> 00:00:27,440
OK, so I'm going to go over this UI and once we're done with this, then we can look into the XML code

8
00:00:27,620 --> 00:00:30,080
and copy it into our project.

9
00:00:30,080 --> 00:00:30,300
Right.

10
00:00:30,320 --> 00:00:33,800
So I will not build it up with you step by step.

11
00:00:33,800 --> 00:00:35,630
But I want to explain everything.

12
00:00:36,050 --> 00:00:39,030
Then we will look at the code and then we can just use the code.

13
00:00:39,050 --> 00:00:43,240
OK, so if you want to build something like that, that's not something that you would do in 10 minutes.

14
00:00:43,260 --> 00:00:44,470
OK, this is, um.

15
00:00:44,870 --> 00:00:47,960
Yeah, this there's a lot of thought process behind it.

16
00:00:47,990 --> 00:00:49,490
OK, so let's just start with it.

17
00:00:49,820 --> 00:00:56,760
So what we have here is the screen that should appear once we get to this screen here.

18
00:00:56,780 --> 00:01:02,030
So once we open up the board, once we go to a board, we want to have.

19
00:01:03,020 --> 00:01:08,900
What you can see here on the screen, but this shouldn't take the whole width of the screen because

20
00:01:08,900 --> 00:01:14,270
we want this to be scrollable right in both directions, because in the end, we can have multiple lists

21
00:01:14,270 --> 00:01:14,490
here.

22
00:01:14,690 --> 00:01:15,110
All right.

23
00:01:15,110 --> 00:01:19,490
So we have multiple tasks with multiple carts underneath them.

24
00:01:20,310 --> 00:01:26,270
OK, so we have this ADD list, which is a button which you already can see.

25
00:01:26,270 --> 00:01:26,480
Right.

26
00:01:26,510 --> 00:01:31,160
So when we're done with this version, with this video, we will have this button.

27
00:01:31,160 --> 00:01:32,440
But the button doesn't do anything.

28
00:01:32,450 --> 00:01:33,860
So we still need to implement it.

29
00:01:33,860 --> 00:01:39,020
And it's still going to take several more videos to do that, because this now is going to be the super

30
00:01:39,020 --> 00:01:40,460
advanced stuff, which really.

31
00:01:41,160 --> 00:01:47,060
Yeah, makes a pretty cool up in this case, I think, because we are using features which look pretty

32
00:01:47,060 --> 00:01:50,870
good and they have a certain length to them.

33
00:01:50,870 --> 00:01:51,290
I don't know.

34
00:01:51,290 --> 00:01:53,390
It's like it's just so cool.

35
00:01:53,390 --> 00:01:54,340
I really like this.

36
00:01:54,590 --> 00:01:55,540
So let's look at this.

37
00:01:55,790 --> 00:01:58,280
We have this atlast button underneath it.

38
00:01:58,280 --> 00:02:02,030
We have what you can see here at a task list name.

39
00:02:02,040 --> 00:02:07,790
So how I did it is one task can have multiple individual cards.

40
00:02:07,820 --> 00:02:11,220
OK, so you have multiple different steps to finish for one task.

41
00:02:11,600 --> 00:02:15,280
OK, so that's basically how the concept behind that is.

42
00:02:15,590 --> 00:02:17,360
So we want to have multiple cards.

43
00:02:17,360 --> 00:02:17,650
Right.

44
00:02:18,140 --> 00:02:20,900
But before we can have cards, we still need to create a list.

45
00:02:20,900 --> 00:02:21,980
So we have this button.

46
00:02:22,280 --> 00:02:26,580
When we click that we see this ET task list name.

47
00:02:26,650 --> 00:02:30,530
So this added text, which allows us to create a new task list.

48
00:02:30,740 --> 00:02:34,670
And we have on the left hand side, we have a little button which cancels the whole process.

49
00:02:34,670 --> 00:02:40,990
And on the right hand side we have a little button which starts or finishes the creation of that list.

50
00:02:41,000 --> 00:02:46,790
So this will then create a list item in our database as well.

51
00:02:47,300 --> 00:02:52,130
And of course, whatever name we have entered there, that will be the name for that list or the task

52
00:02:52,130 --> 00:02:52,380
list.

53
00:02:53,050 --> 00:02:58,730
OK, and then once we have that, it will display like this, it will display the title.

54
00:02:58,730 --> 00:03:01,280
And then on the right hand side we will see two buttons.

55
00:03:01,290 --> 00:03:03,530
So one for editing and one for deleting.

56
00:03:06,250 --> 00:03:12,220
Now, once we want to delete it, it will just be gone, right, but if you want to edit it, we press

57
00:03:12,220 --> 00:03:17,140
this button here to edit button and then this added text opens up.

58
00:03:17,440 --> 00:03:22,900
OK, so this edit text where we can then change the name, we can delete the whole thing or cancel the

59
00:03:22,900 --> 00:03:26,380
whole process and we can save the changes.

60
00:03:27,630 --> 00:03:33,260
And underneath all of that, that's where we want to despite the cartoonist.

61
00:03:33,630 --> 00:03:39,210
So here we will have a bunch of different cards and currently just look stupid because it's just item

62
00:03:39,210 --> 00:03:40,580
zero, item one and so forth.

63
00:03:40,590 --> 00:03:41,670
It's not super interesting.

64
00:03:41,670 --> 00:03:41,960
Right.

65
00:03:42,120 --> 00:03:45,750
But as soon as we see how it looks like, that's going to be a lot better.

66
00:03:45,750 --> 00:03:51,000
So you can see when we create a card, so we want to create a new card, this is what's going to this

67
00:03:51,180 --> 00:03:51,850
going to appear.

68
00:03:52,050 --> 00:03:53,940
So we have this add cart button.

69
00:03:54,270 --> 00:04:00,510
Once you click that, it will open up this added text, which allows us to enter a name for that card

70
00:04:00,960 --> 00:04:06,660
and we can delete the process or cancel the process by pressing the left button, or we can finish the

71
00:04:06,660 --> 00:04:11,600
process by pressing the go button or the finish button.

72
00:04:12,180 --> 00:04:16,170
And once we have added the card, it will go into this are card list.

73
00:04:16,180 --> 00:04:18,570
So it will appear on this Arvi card list.

74
00:04:19,440 --> 00:04:23,130
OK, so that is basically the UI that you have here.

75
00:04:23,550 --> 00:04:27,050
And of course, not all of those elements will be visible.

76
00:04:27,570 --> 00:04:33,840
So, for example, only if there are cards, this Arvi card list will be visible only if we have a list.

77
00:04:33,840 --> 00:04:37,470
This ATM card will be visible only if we have a list.

78
00:04:37,470 --> 00:04:41,760
We will, of course, see the title of the list with those two buttons.

79
00:04:42,030 --> 00:04:44,550
Only if we want to create a new list.

80
00:04:44,700 --> 00:04:47,700
This added text will be visible only if we want to add it.

81
00:04:47,700 --> 00:04:53,040
And you list this added text here or added our list, this added text will be visible.

82
00:04:53,480 --> 00:04:57,730
OK, so that is the overall UI structure that we have here.

83
00:04:57,750 --> 00:05:01,020
So a bunch of stuff that will not permanently be visible.

84
00:05:02,210 --> 00:05:06,560
OK, so that is the UI for.

85
00:05:07,740 --> 00:05:13,890
The screen here where we see the individual board with all of the lists and then all of the different

86
00:05:13,890 --> 00:05:15,230
cards inside of the list.

87
00:05:16,530 --> 00:05:22,710
OK, so now let's look at the code, because the thing is, it's the individual parts of the code are

88
00:05:22,710 --> 00:05:23,900
not something new.

89
00:05:23,910 --> 00:05:25,620
So we have used all of that.

90
00:05:25,620 --> 00:05:26,820
We have used card views.

91
00:05:26,820 --> 00:05:29,100
We have used linear layouts and everything.

92
00:05:29,340 --> 00:05:36,780
So if you want to look into that in more depth, just download version 27 and really look into the code

93
00:05:36,780 --> 00:05:39,120
and try to understand everything that is going on here.

94
00:05:41,320 --> 00:05:46,010
So first of all, this whole thing, so this whole item task is a card for you.

95
00:05:46,420 --> 00:05:48,990
So this part here does add list.

96
00:05:49,000 --> 00:05:51,230
It's just one button of the whole card for you.

97
00:05:51,250 --> 00:05:55,830
So there's a bunch of stuff there that is hidden currently that is not visible or actually gone even.

98
00:05:56,260 --> 00:06:00,870
So, if you want to make it visible, we, of course, need to only make it visible at the right time.

99
00:06:01,750 --> 00:06:05,500
So this is the correct view and inside of the car, we have everything else.

100
00:06:05,920 --> 00:06:09,930
So first of all, we have a little bit of elevation which creates this little shadow around it.

101
00:06:10,540 --> 00:06:15,380
Then we have the linear layout, which is a vertical.

102
00:06:15,400 --> 00:06:19,870
So this is basically the overall linear layout on which we have all of the content.

103
00:06:20,080 --> 00:06:22,630
But that linear layout itself is inside of a car for you.

104
00:06:23,230 --> 00:06:24,850
OK, then we have a text.

105
00:06:24,850 --> 00:06:27,580
You would says add a task list.

106
00:06:28,060 --> 00:06:31,320
If we look at it, it's this one here where it says add list.

107
00:06:31,570 --> 00:06:35,620
So we use this add list, which is not even a button.

108
00:06:35,620 --> 00:06:38,480
It's actually an TextView, this one here.

109
00:06:38,890 --> 00:06:40,990
OK, so the text color is blue.

110
00:06:41,020 --> 00:06:42,610
It's the color accent that we use.

111
00:06:42,610 --> 00:06:46,000
The text is at list, which is, of course the string that we create.

112
00:06:46,000 --> 00:06:51,310
So action, at least the padding is 12 density pixels, which is a new dimension that we create.

113
00:06:51,560 --> 00:06:55,860
Then we have some more settings here to make it look a little better.

114
00:06:56,050 --> 00:06:59,560
So we have a white background, which is the action color.

115
00:06:59,560 --> 00:07:01,720
You can change that any time you want.

116
00:07:02,050 --> 00:07:08,410
Of course, if you change the color for this so you can, of course, also check out the colors here.

117
00:07:08,440 --> 00:07:11,380
We are going to copy them into our project afterwards.

118
00:07:11,390 --> 00:07:12,850
But let's finish this first.

119
00:07:13,270 --> 00:07:14,410
So that is our text.

120
00:07:14,430 --> 00:07:22,210
You write the very top one and then we have a cart view, which then contains a lot of other information

121
00:07:22,210 --> 00:07:22,510
again.

122
00:07:22,510 --> 00:07:26,920
So we have another card for you, which is the CSV and task list name.

123
00:07:27,640 --> 00:07:29,440
So we are using this card for you.

124
00:07:29,440 --> 00:07:32,800
We have a little elevation, a little layout margin.

125
00:07:33,160 --> 00:07:37,030
The visibility is set to go on, but in the tools it's set to visible.

126
00:07:37,210 --> 00:07:39,130
The same goes here for our takes you.

127
00:07:39,160 --> 00:07:42,420
So when we actually run the app, the visibility will be gone.

128
00:07:42,430 --> 00:07:43,540
So it will not appear.

129
00:07:43,930 --> 00:07:45,280
But when we.

130
00:07:46,650 --> 00:07:53,430
Tested here, look at it in the design, you can see they are there, so this thing here, this overall

131
00:07:53,430 --> 00:07:56,270
element here is another card view.

132
00:07:56,730 --> 00:08:01,940
So it contains this button at the left and it contains the added text and then it contains another button.

133
00:08:02,670 --> 00:08:08,070
So it's this card for here which contains a linear layout, which then has an image button.

134
00:08:08,080 --> 00:08:10,440
So I have a button, which is an image.

135
00:08:10,470 --> 00:08:10,760
Right.

136
00:08:10,770 --> 00:08:14,910
So it's just this little icon that we can see here, which is this cross.

137
00:08:14,940 --> 00:08:17,970
OK, so this is the image button.

138
00:08:19,430 --> 00:08:28,160
Then we have the added text and then we have the image button, so we are using the orientation horizontal

139
00:08:28,160 --> 00:08:30,930
so that those three elements are next to each other.

140
00:08:31,190 --> 00:08:36,710
So first to image button, then the added text and then to image button again.

141
00:08:37,460 --> 00:08:43,490
OK, for the added text, we have the input type here, which is very helpful to keyboard will be accordingly.

142
00:08:43,789 --> 00:08:47,030
Then the hint that we want to display is a list name.

143
00:08:47,030 --> 00:08:52,310
So it's another string that we use here as well as the autofill hints is also hitlist name.

144
00:08:52,940 --> 00:08:53,380
All right.

145
00:08:53,570 --> 00:08:59,600
So the layout wait, I use one for this one and for the image button.

146
00:09:00,380 --> 00:09:03,430
I use the layout with rep content.

147
00:09:03,680 --> 00:09:09,770
So this time we're just saying, OK, only take as much space as you need as well as the image button

148
00:09:09,770 --> 00:09:10,160
here.

149
00:09:10,420 --> 00:09:14,900
It only takes as much space as it needs, but has a little padding.

150
00:09:15,050 --> 00:09:20,690
Of course, we don't want to push things too close to each other, but this editor is going to have

151
00:09:20,690 --> 00:09:24,530
the layered weight of one, which means it will take the whole with that is possible.

152
00:09:25,070 --> 00:09:25,460
All right.

153
00:09:25,460 --> 00:09:27,450
So the whole with that is still available.

154
00:09:27,770 --> 00:09:33,560
So as you can see, we have this button with this button here and this edit text just takes all of the

155
00:09:33,560 --> 00:09:36,090
rest of the width that is available.

156
00:09:37,070 --> 00:09:37,450
All right.

157
00:09:37,670 --> 00:09:41,300
So then the next part is our linear layout.

158
00:09:41,810 --> 00:09:45,830
So here we use the AL task item, linear layout.

159
00:09:46,010 --> 00:09:49,820
We give it an ID so that we can make things visible and invisible.

160
00:09:49,830 --> 00:09:50,810
It's really important.

161
00:09:51,170 --> 00:09:56,540
And inside of that, we have another linear layout where the orientation is horizontal again.

162
00:09:56,810 --> 00:10:00,000
So we want to position things next to each other.

163
00:10:00,020 --> 00:10:05,420
So first of all, we have this text view so you can see we're using buttons as text to use, write or

164
00:10:05,630 --> 00:10:08,960
text use as buttons pretty much in this case.

165
00:10:09,900 --> 00:10:10,840
It's just the texture.

166
00:10:10,860 --> 00:10:18,030
Actually, this is not the button this time, but we use it as a button up there at the top.

167
00:10:18,540 --> 00:10:22,030
OK, so then we have this image button here and another image button.

168
00:10:22,050 --> 00:10:27,240
So now this time we are using the two image buttons right next to the.

169
00:10:28,350 --> 00:10:34,650
Texture to the title, you could, of course, if you prefer to have this button here at the left hand

170
00:10:34,650 --> 00:10:42,060
side, you could just copy this image button and put it on top of the text you saw here just before

171
00:10:42,060 --> 00:10:42,660
the text you.

172
00:10:43,530 --> 00:10:46,110
All right, so then.

173
00:10:47,130 --> 00:10:54,900
We have the two inch buttons, of course, which have individual IDs so that we can connect with them

174
00:10:54,900 --> 00:11:00,630
in the code and we use certain backgrounds here, selectable item background, content descriptions,

175
00:11:01,230 --> 00:11:02,550
all the good stuff.

176
00:11:03,090 --> 00:11:06,990
OK, and then I have a little view here, which is just a divider.

177
00:11:07,290 --> 00:11:10,350
So it's just a little bit of.

178
00:11:11,520 --> 00:11:17,640
A visible divider here so that we can see, OK, this is where one thing ends and this is what the other

179
00:11:17,640 --> 00:11:18,150
starts.

180
00:11:18,350 --> 00:11:23,690
OK, so then we have another card view, which is the same thing that we had before.

181
00:11:23,700 --> 00:11:26,750
So we have an image button, then an added text and an image button.

182
00:11:27,000 --> 00:11:28,710
This time it's this one here.

183
00:11:28,950 --> 00:11:35,060
OK, so this ETTY added task list and then afterwards we have a result of you.

184
00:11:35,340 --> 00:11:41,100
So here we are using a complete recycler view, which afterwards has done another card for you.

185
00:11:41,400 --> 00:11:43,800
So this card to you has the same.

186
00:11:45,010 --> 00:11:51,040
Rules pretty much as the other to use, so you see this here is a car view, that one is a cart view.

187
00:11:51,280 --> 00:11:56,590
And then finally that one here at the bottom is also a cart view in which we have a button and an added

188
00:11:56,590 --> 00:11:57,760
text and another button.

189
00:11:58,210 --> 00:12:02,110
OK, so this is the final car to you with the linear layout where.

190
00:12:03,140 --> 00:12:08,750
The elements are horizontally oriented, which means our image button is on the left hand side and in

191
00:12:08,750 --> 00:12:15,630
the center, we have to edit text and this image button here is on the right hand side, OK?

192
00:12:15,860 --> 00:12:21,380
And then finally, we have another text view, which I use as a button again.

193
00:12:21,380 --> 00:12:23,920
So it's going to be this ad card text to you.

194
00:12:24,560 --> 00:12:31,490
OK, and just by changing some settings, it appears like an actual button, but it's really just a

195
00:12:31,490 --> 00:12:31,970
TextView.

196
00:12:32,210 --> 00:12:38,780
So you can use pretty much anything as a button, so to speak, if you add an on click listener to that

197
00:12:38,780 --> 00:12:39,230
element.

198
00:12:39,530 --> 00:12:46,440
But for now, our text to you is the better choice for me, at least in terms of the UI.

199
00:12:46,700 --> 00:12:50,120
I have some more settings that I can play around with and so forth.

200
00:12:50,620 --> 00:12:51,630
OK, and that is it.

201
00:12:51,860 --> 00:12:54,440
So that is our item task XML.

202
00:12:54,890 --> 00:12:58,010
I hope this was a good enough explanation.

203
00:12:58,580 --> 00:13:06,500
The thing is, we have to play around with view gone and view visible, and it's always good to put

204
00:13:06,500 --> 00:13:09,520
those kind of things into a bigger container.

205
00:13:09,800 --> 00:13:15,800
For example, here everything is or this linear layout is within the card view and we can play around

206
00:13:15,800 --> 00:13:21,620
with the visibility of that card view in order to either make it appear or not appear.

207
00:13:22,620 --> 00:13:28,440
And of course, if you want to see things and the designer, it always helps to have tools, visibility

208
00:13:28,440 --> 00:13:31,410
visible if the actual visibility is set to go on.

209
00:13:33,710 --> 00:13:41,810
OK, so now let's go ahead and add all of that to our project so you can simply download the file,

210
00:13:41,960 --> 00:13:45,440
download the whole XML file and add that to your resources.

211
00:13:45,440 --> 00:13:51,980
So to your layout folder, because I think posting it in here is not even going to be as useful.

212
00:13:51,990 --> 00:14:00,980
So let's just copy it over, download the project, copy the item, task XML and paste it into your

213
00:14:01,070 --> 00:14:04,040
layout with control the.

214
00:14:04,980 --> 00:14:10,520
OK, now, of course, we will need the latest dimensions, so let's just add those as well.

215
00:14:11,820 --> 00:14:20,760
And of course, you could have left the dimensions out and just put it directly into the XML file,

216
00:14:20,760 --> 00:14:23,770
but this is just a slightly cleaner way.

217
00:14:24,000 --> 00:14:30,390
So this is where we have all of our dimensions here, task item titled View, Text, Petting and so

218
00:14:30,390 --> 00:14:30,620
forth.

219
00:14:30,630 --> 00:14:35,430
So everything is in in those dimensions that we use then in item task.

220
00:14:36,150 --> 00:14:40,800
OK, now, of course, we still have some errors because we're using colors and strings which aren't

221
00:14:40,800 --> 00:14:41,600
prepared yet.

222
00:14:41,610 --> 00:14:44,520
So let's put those into our project as well.

223
00:14:44,880 --> 00:14:47,730
So here we have a bunch of new strings.

224
00:14:48,880 --> 00:14:49,890
That we use.

225
00:14:49,930 --> 00:14:59,140
So let me put those in here, I can add list, so to add list text then list name card at cart cart

226
00:14:59,140 --> 00:15:00,010
name add list.

227
00:15:00,920 --> 00:15:07,610
OK, so here we have the action at least, and then we have the another text for atleast so you could

228
00:15:07,610 --> 00:15:13,370
of course use the same one, but if it's different positions, then you might want to think about different

229
00:15:13,670 --> 00:15:15,920
names for them because maybe you want to.

230
00:15:16,800 --> 00:15:19,440
Give them more specific texts.

231
00:15:20,100 --> 00:15:24,900
All right, and then finally, we have the colors that we need to add, and it's just two colors that

232
00:15:25,050 --> 00:15:26,180
I'm using here.

233
00:15:26,520 --> 00:15:28,770
So let me add those here as well.

234
00:15:29,500 --> 00:15:34,140
So it's this task list, action color, which is this white ish color.

235
00:15:34,140 --> 00:15:38,940
And then we have the task, this title view, background color, which is also a whitish color, but

236
00:15:38,940 --> 00:15:40,560
slightly lighter.

237
00:15:41,840 --> 00:15:42,370
OK.

238
00:15:45,060 --> 00:15:51,660
I think it's enough for this video, we still, of course, need to add some code now, we need to add

239
00:15:51,660 --> 00:15:54,180
adapters because we have a new recycler of use.

240
00:15:54,180 --> 00:15:58,520
So we need a new adapter to add and a bunch of other code.

241
00:15:58,530 --> 00:16:05,280
So I think let's make a break here and just go ahead to the next video where we're going to add those

242
00:16:05,610 --> 00:16:07,380
little adapters and so forth.

243
00:16:07,560 --> 00:16:08,750
So I'll see you in the next one.