1
00:00:00,360 --> 00:00:01,260
Welcome back.

2
00:00:01,410 --> 00:00:07,680
And this video, we are going to implement the functionality of cards, so pretty much to overview the

3
00:00:07,680 --> 00:00:11,280
UI and all those kind of information about a cart.

4
00:00:11,520 --> 00:00:16,500
And of course, we will later on need to give it a lot of functionality as well.

5
00:00:16,510 --> 00:00:24,300
So, for example, we can assign a member to the card, we can add a due date to the card and so forth.

6
00:00:24,480 --> 00:00:24,950
All right.

7
00:00:24,990 --> 00:00:27,350
So we are going to keep it simple.

8
00:00:27,390 --> 00:00:29,640
We're just going to have three features for now.

9
00:00:29,970 --> 00:00:36,510
But those things will be good enough for you to start and you can easily extend that card now that you

10
00:00:36,510 --> 00:00:37,320
know how to do that.

11
00:00:37,320 --> 00:00:37,620
Right.

12
00:00:37,830 --> 00:00:43,740
So let's get started with the first thing first, which means we need to create the activity for it.

13
00:00:43,740 --> 00:00:46,560
We need to create the UI for it and so forth.

14
00:00:46,890 --> 00:00:47,270
All right.

15
00:00:47,280 --> 00:00:48,150
So let's get started.

16
00:00:48,540 --> 00:00:52,470
So the first thing that we need to do is we need to create a new activity.

17
00:00:52,470 --> 00:01:00,750
So let's go over to our activities here and create a new activity called cards, details activity or

18
00:01:00,750 --> 00:01:02,050
card details activity.

19
00:01:02,280 --> 00:01:06,090
So here activities, empty activity is going to be.

20
00:01:07,850 --> 00:01:11,450
Card details activity.

21
00:01:13,780 --> 00:01:14,320
All right.

22
00:01:17,810 --> 00:01:23,570
OK, so first of all, let's import our here so that we can use it and then let's go over to the card

23
00:01:23,840 --> 00:01:26,450
details activity XML file.

24
00:01:26,820 --> 00:01:29,630
So here I'm going to use prepared code.

25
00:01:29,630 --> 00:01:31,910
You can, of course, download it if you want to.

26
00:01:32,180 --> 00:01:35,260
And let's have a look at what we have in here.

27
00:01:35,270 --> 00:01:39,710
By the way, we also need to update our Dimond's file so the dimensions file.

28
00:01:39,920 --> 00:01:45,920
You can, of course, go ahead and just download the latest dimension's file and this XML file if you

29
00:01:45,920 --> 00:01:52,730
don't want to type it in, because I think at this point we are way past creating UI elements in XML

30
00:01:52,730 --> 00:01:53,600
step by step.

31
00:01:55,250 --> 00:02:00,020
And by the way, you can, of course, created the way you want it, right, so you can create your

32
00:02:00,020 --> 00:02:02,990
very own layout if you don't like the one that I'm using.

33
00:02:03,210 --> 00:02:08,479
So here and the dimensions file, I'm going to create a bunch of new dimensions which you can find here,

34
00:02:08,750 --> 00:02:14,390
card details, content padding, CV card name margin, then content, putting it for the.

35
00:02:16,000 --> 00:02:17,740
Card view and so forth.

36
00:02:17,770 --> 00:02:20,240
All right, so we're using Katia's once again.

37
00:02:20,500 --> 00:02:26,920
Now, let's go over to the card details and let's see what else we are missing, because we're still

38
00:02:26,920 --> 00:02:28,460
missing some variables.

39
00:02:28,480 --> 00:02:30,810
OK, so we're missing strings here, for example.

40
00:02:31,270 --> 00:02:40,450
So let's get those strings in as well, because we want to keep this application as flexible as possible.

41
00:02:40,450 --> 00:02:45,100
So you can see we have label color so that color select members, due date and select due date.

42
00:02:45,800 --> 00:02:50,120
OK, now let's look at the XML file, because now we shouldn't have any errors.

43
00:02:50,560 --> 00:02:53,380
So what we have here is let's look at the design first.

44
00:02:53,830 --> 00:02:54,280
All right.

45
00:02:54,290 --> 00:02:56,380
So here we have, first of all, a toolbar.

46
00:02:57,270 --> 00:03:05,610
Then we have a cart in which we have the name of the cart, which means an edited text in which we can

47
00:03:05,610 --> 00:03:11,520
then also edit the name of the cart and then we have another cart here on the Leaford, which has the

48
00:03:11,520 --> 00:03:17,190
label color, which we can then select so we can select the color for this card that we have the members

49
00:03:17,520 --> 00:03:18,840
which are assigned to it.

50
00:03:18,870 --> 00:03:20,210
We can also select members.

51
00:03:20,460 --> 00:03:23,150
Then we have the due date and we can select the due date.

52
00:03:23,160 --> 00:03:24,660
And finally, we have this update button.

53
00:03:25,050 --> 00:03:25,410
All right.

54
00:03:25,410 --> 00:03:28,410
So these are the things that I want to display in a card.

55
00:03:28,600 --> 00:03:30,390
Of course, you could add a lot more here.

56
00:03:30,390 --> 00:03:37,680
You could add notes that people can add, you can add even files that people could upload to a card

57
00:03:37,680 --> 00:03:38,270
and edit.

58
00:03:38,550 --> 00:03:47,700
So there's a lot to potentially adjust and add here if you want to make this a fully fledged and complete

59
00:03:48,210 --> 00:03:49,570
project management tool.

60
00:03:49,980 --> 00:03:50,450
All right.

61
00:03:50,640 --> 00:03:56,080
But I think at that point, you should be able to learn how to get these things done.

62
00:03:56,340 --> 00:04:03,270
I mean, you would have to, of course, check out how to even upload something to Firebase and all

63
00:04:03,270 --> 00:04:04,090
of those kind of things.

64
00:04:04,090 --> 00:04:05,860
So not just images, but real files.

65
00:04:05,860 --> 00:04:09,090
So how to select a file from your phone and so forth.

66
00:04:10,080 --> 00:04:15,420
But overall, in general, when you want to create an application, you will have to research quite

67
00:04:15,420 --> 00:04:21,720
a bit and you will have to find the right features, find the right third party libraries to use and

68
00:04:21,720 --> 00:04:22,280
so forth.

69
00:04:22,650 --> 00:04:24,880
But we're going to start with what you can see here.

70
00:04:25,200 --> 00:04:26,970
So let's look at the real quick.

71
00:04:27,910 --> 00:04:33,910
So here what we have is a linear layout, which is vertical inside of that, we have an upper layout,

72
00:04:33,910 --> 00:04:39,080
which is contains this toolbar, which is basically this toolbar here at the top.

73
00:04:39,700 --> 00:04:44,740
Then we have a linear layout, which is, again, vertical, in which we have to cart view.

74
00:04:44,770 --> 00:04:49,930
So first of all, this car view, which contains the added text and then another card view which contains

75
00:04:49,930 --> 00:04:50,920
all of the other elements.

76
00:04:50,950 --> 00:04:52,810
So this one here.

77
00:04:54,040 --> 00:05:01,210
Is card view one, this one here at the top, and then another card we here at the bottom because I

78
00:05:01,210 --> 00:05:02,780
just think our viewers look pretty cool.

79
00:05:03,370 --> 00:05:10,540
Then we have the text input layout, which is this app compared to edited text in which we can enter

80
00:05:10,540 --> 00:05:12,340
the card detail name.

81
00:05:13,180 --> 00:05:17,470
Then further down we have another card for you with a linear layout.

82
00:05:17,750 --> 00:05:18,760
That's the second card for you.

83
00:05:18,760 --> 00:05:24,130
Right, in which we then have to text you one, text you two.

84
00:05:24,280 --> 00:05:25,670
So it's those two.

85
00:05:26,170 --> 00:05:28,690
First of all, it's this label color.

86
00:05:29,440 --> 00:05:31,180
Then it's the select color.

87
00:05:32,410 --> 00:05:38,170
Then it's the TextView here, which says members and then we can select members.

88
00:05:40,240 --> 00:05:44,270
And then the text you, which says due date and we can select the due date.

89
00:05:44,500 --> 00:05:49,440
So these are not buttons, but they are text views as we use them here.

90
00:05:49,690 --> 00:05:53,710
So if you wanted, you could, of course, use patterns for this.

91
00:05:53,710 --> 00:06:00,130
But I think textures are totally fine because we need to open something up once we click on that anyways.

92
00:06:00,130 --> 00:06:00,410
Right.

93
00:06:00,760 --> 00:06:06,640
So it's not like we are going to select it here directly, but we can then see, for example, the selected

94
00:06:06,640 --> 00:06:11,260
color, then we can click on it and change it, or we can see the selected members and then we can click

95
00:06:11,260 --> 00:06:14,110
on it and we can add more members to it and so forth.

96
00:06:14,770 --> 00:06:15,150
All right.

97
00:06:15,160 --> 00:06:21,850
And then finally, we have this update button, which basically just should allow us to update the whole

98
00:06:21,850 --> 00:06:22,240
card.

99
00:06:23,610 --> 00:06:30,570
All right, so now let's go over to our task list activity and here I'm just going to create a new function,

100
00:06:30,900 --> 00:06:33,540
which I'm going to call card details.

101
00:06:33,960 --> 00:06:43,140
And here I need to pass in the task list position, which should be an integer, and then the card position,

102
00:06:43,860 --> 00:06:45,150
which will also be an integer.

103
00:06:47,600 --> 00:06:48,020
So.

104
00:06:49,900 --> 00:06:51,080
What I want to do in here.

105
00:06:51,220 --> 00:06:54,700
Well, I just want to start an activity.

106
00:06:55,750 --> 00:07:02,890
Which will create an intent or use this intent that we use here, so we go from this activity over to

107
00:07:02,890 --> 00:07:03,490
our.

108
00:07:04,390 --> 00:07:05,950
Card details activity.

109
00:07:07,930 --> 00:07:08,420
All right.

110
00:07:08,440 --> 00:07:12,640
And that's it, what this method does, so, by the way, it has this position and card position, let's

111
00:07:12,640 --> 00:07:18,790
look at those real quick, because if we look at our cards here, you can see that a card has a position

112
00:07:19,090 --> 00:07:22,680
and it's it's inside of the list.

113
00:07:22,690 --> 00:07:24,270
So the wrist also has a position.

114
00:07:24,280 --> 00:07:26,670
So this is position zero for this one.

115
00:07:26,680 --> 00:07:33,380
So the first entry then if we create another list, that will be position one, so to speak and so forth.

116
00:07:33,400 --> 00:07:33,730
All right.

117
00:07:33,970 --> 00:07:39,250
So we need to know in which list we are and then we need to know which card we are looking at because

118
00:07:39,460 --> 00:07:42,730
we want to load details about this specific card.

119
00:07:42,730 --> 00:07:43,060
Right.

120
00:07:43,060 --> 00:07:44,650
And not about any card.

121
00:07:44,710 --> 00:07:45,130
All right.

122
00:07:45,970 --> 00:07:48,130
So this is the card details function.

123
00:07:50,140 --> 00:07:55,570
Then we need to give every single card and all click event so that we can click on it, because currently

124
00:07:55,570 --> 00:07:57,070
nothing happens when we click on it.

125
00:07:57,440 --> 00:08:02,440
So let's go over to our card list items adapter.

126
00:08:03,300 --> 00:08:11,390
So here we need to go to the adaptors, because in the adapter, that's where we handle how the Carlist

127
00:08:11,400 --> 00:08:11,890
behaves.

128
00:08:11,910 --> 00:08:12,230
Right.

129
00:08:12,690 --> 00:08:21,510
So here inside of this Carlist item adapter, inside of our unbind view, holder here, that's where

130
00:08:21,510 --> 00:08:22,890
we assign the cards, right.

131
00:08:22,910 --> 00:08:26,310
So here we just say, OK, card should be model name.

132
00:08:26,320 --> 00:08:29,240
So whatever the card name is, we want to have that in here.

133
00:08:29,460 --> 00:08:34,750
And now at this point, we can also give every single card and unclick click event.

134
00:08:35,460 --> 00:08:39,960
OK, so inside of this if statement we just say Holder.

135
00:08:41,320 --> 00:08:46,660
Item, you said on Click Listener and here, what do we want to do?

136
00:08:46,930 --> 00:08:53,650
Well, first of all, we should check if the UNCLICK listener is not now and this listener is, of course,

137
00:08:53,980 --> 00:08:54,430
the.

138
00:08:56,500 --> 00:09:02,380
Class that we created this interface to be more precise, and here we're just going to say on Click

139
00:09:02,590 --> 00:09:03,340
Listener.

140
00:09:05,120 --> 00:09:11,870
On unclick, so we just call the unclick event with the position of the cart and the position comes

141
00:09:11,870 --> 00:09:17,900
from the unbind view, older function itself, because here you can see we get to position past here,

142
00:09:18,600 --> 00:09:22,250
OK, so we pass in the position to the unclick function.

143
00:09:25,410 --> 00:09:32,010
And then you can see that it's still complaining because if we look at unclick, we can see that unclick

144
00:09:32,010 --> 00:09:33,450
also requires a card.

145
00:09:33,460 --> 00:09:34,560
So we have two options.

146
00:09:34,560 --> 00:09:41,250
Either we pass in the card directly here or we can just get rid of the card here because we can just

147
00:09:41,250 --> 00:09:43,320
pass into position for now.

148
00:09:43,590 --> 00:09:50,820
And then once we click on it, the click event will be called, the position will be passed and now

149
00:09:50,820 --> 00:09:53,130
we can go to the task list items adapter.

150
00:09:54,070 --> 00:10:02,740
And here we can give this adapter and on Click Listener as well, and this one, of course, also in

151
00:10:02,740 --> 00:10:06,310
the same function and the unbind view holder function.

152
00:10:06,790 --> 00:10:07,210
All right.

153
00:10:07,210 --> 00:10:13,500
So here, a little further down, pretty much towards the end of this function here.

154
00:10:13,840 --> 00:10:15,160
So it was scroll all the way down.

155
00:10:15,170 --> 00:10:18,850
We have all of these holder and then we have this adapter.

156
00:10:19,390 --> 00:10:24,250
And here we can then go ahead and say Adapter, dot set and click listener.

157
00:10:24,260 --> 00:10:31,600
So we give this adapter and unclick listener in which we create a new object of the card list items

158
00:10:31,600 --> 00:10:32,160
adapter.

159
00:10:32,890 --> 00:10:33,260
All right.

160
00:10:33,280 --> 00:10:37,510
So what we're just saying is we want to use this on Click Listener.

161
00:10:38,620 --> 00:10:45,370
Which we said here, to be more precise, we want to this to happen once we click on one of those items

162
00:10:45,370 --> 00:10:48,040
and here we need to set the unclick listener.

163
00:10:48,340 --> 00:10:54,040
There should be an object of the cart list items adapter.

164
00:10:55,540 --> 00:11:02,010
So he would just use the on click listener and this should be a new object.

165
00:11:02,020 --> 00:11:04,620
So here we need to use the colon.

166
00:11:04,630 --> 00:11:11,680
So the on click listener and here we override the on click event.

167
00:11:13,190 --> 00:11:20,450
OK, so we basically override the unclick click event of this unclick listener, which we.

168
00:11:21,430 --> 00:11:28,530
Use in here, so we pass in the position and now, if that is called this unclick event will be called

169
00:11:28,540 --> 00:11:31,690
and here we can check if the context.

170
00:11:33,230 --> 00:11:35,360
Is the task list activity?

171
00:11:36,660 --> 00:11:40,800
So context is task list activity.

172
00:11:42,170 --> 00:11:47,180
Then I want to run context card details.

173
00:11:48,230 --> 00:11:55,190
With the position that I have and Tigard position, which is going to be the hard position.

174
00:11:58,130 --> 00:12:00,110
OK, so where does card position come from?

175
00:12:01,310 --> 00:12:07,970
Well, our position is this actual position here, so this can be a little bit confusing, but let's

176
00:12:07,970 --> 00:12:08,390
look at it.

177
00:12:09,080 --> 00:12:16,340
So we present the card position from the card list items adapter, but in this function itself.

178
00:12:16,700 --> 00:12:23,660
So if we scroll all the way up here, we can see that the unbind view holder already gives us a position.

179
00:12:24,080 --> 00:12:26,960
OK, so this is the position of the task list.

180
00:12:27,510 --> 00:12:34,010
And now once we are inside of the task list, we have this additional unclick listener which would create

181
00:12:34,010 --> 00:12:40,550
an object of right of this unclick listener interface that we have in our cart list items adapter,

182
00:12:41,000 --> 00:12:43,580
which is this Arncliffe listener interface.

183
00:12:43,820 --> 00:12:50,870
We override the on click event in which we get a position and we get the position when clicking on the

184
00:12:50,870 --> 00:12:51,410
holder.

185
00:12:51,860 --> 00:12:52,370
So.

186
00:12:53,830 --> 00:13:01,540
The card position is the one that we get from the card list items adapter and the position, which means

187
00:13:01,540 --> 00:13:06,580
in this case, if we look at the card details of the task list position, we get this task, this position

188
00:13:06,580 --> 00:13:10,220
from the list items adapter Unbind view Holder.

189
00:13:11,170 --> 00:13:13,530
So from this one here.

190
00:13:14,290 --> 00:13:21,040
So this one, if we wanted to make it more clear, we could call this one list position, but basically

191
00:13:21,340 --> 00:13:22,840
it's default to call the position.

192
00:13:22,840 --> 00:13:23,050
Right.

193
00:13:23,050 --> 00:13:24,830
So we can just keep it like that.

194
00:13:25,120 --> 00:13:29,110
So then with this year, we get the position.

195
00:13:30,010 --> 00:13:32,740
Here we get the position of the.

196
00:13:34,310 --> 00:13:40,640
Task list, and then we get the position of the card, which means if we look at that here, we can

197
00:13:40,640 --> 00:13:45,350
see let's say I create another list here, list to.

198
00:13:47,330 --> 00:13:48,530
So let me create that.

199
00:13:51,580 --> 00:13:56,590
Now, I have this list, too, and inside of lists to let's say I have caught one.

200
00:14:00,060 --> 00:14:07,800
So now I have caught one in two and caught one in list one, so this card one is not going to be the

201
00:14:07,800 --> 00:14:08,630
same as this one.

202
00:14:09,240 --> 00:14:17,640
This one, we'll have to list one list position and here card one card position.

203
00:14:18,870 --> 00:14:24,150
This one here will have the list to list position and a card one list position.

204
00:14:24,150 --> 00:14:26,220
So it's here, for example, two one.

205
00:14:26,520 --> 00:14:31,680
This one is one one, OK, even though the numbers don't really fit.

206
00:14:31,680 --> 00:14:34,590
But that's basically how you could interpret it.

207
00:14:35,590 --> 00:14:42,040
All right, and at that point, we can just test the application and see if this card details activity

208
00:14:42,040 --> 00:14:43,410
is even opening up.

209
00:14:44,780 --> 00:14:50,630
All right, so there we are approaching Menasche, let's go to the border with Image and now let's click

210
00:14:50,630 --> 00:14:53,760
on Cart and you can see it opens up here.

211
00:14:53,990 --> 00:14:55,680
So here we have an added text.

212
00:14:55,700 --> 00:14:59,090
Now, he, of course, wants to populate this edit text with the card name.

213
00:14:59,300 --> 00:15:01,100
So he should be called court one.

214
00:15:01,310 --> 00:15:04,220
And then we, of course, want to be able to adjust it.

215
00:15:04,850 --> 00:15:08,930
Now, what you can also see is we have two bars here at the top, which I don't like.

216
00:15:09,170 --> 00:15:15,040
So let's go to our project manifest file and make changes here, of course, as well.

217
00:15:15,050 --> 00:15:20,480
So I'm just going to use the same approach for this activity as well here.

218
00:15:20,510 --> 00:15:21,020
So.

219
00:15:22,170 --> 00:15:28,830
Let's add those two lines to the activity here at the top and run it again just to see if that took

220
00:15:28,830 --> 00:15:29,220
effect.

221
00:15:30,420 --> 00:15:38,520
So that we are bored with image, let's click on a card and we can see now only our apart that we have

222
00:15:39,150 --> 00:15:40,620
defined ourselves as dear.

223
00:15:41,600 --> 00:15:46,760
OK, so I'd say let's look more into this court in the next video.