1
00:00:00,390 --> 00:00:05,640
Welcome back, all of the hard work is going to finally pay off because we can finally see something

2
00:00:05,640 --> 00:00:06,360
on the screen.

3
00:00:06,390 --> 00:00:10,380
As you can see here, we have a bunch of dots here at the bottom.

4
00:00:10,380 --> 00:00:14,400
And that is the goal for us because that's what we want to display.

5
00:00:14,700 --> 00:00:20,970
And these should be the exercises that are well in our whole application.

6
00:00:21,000 --> 00:00:23,180
As we can see, we have 12 exercises in total.

7
00:00:23,430 --> 00:00:28,050
And if we should add one, it will be 13 and it will be automatically generated for us.

8
00:00:28,080 --> 00:00:28,920
So that's pretty cool.

9
00:00:29,520 --> 00:00:31,770
And I'd say, let's get right into it.

10
00:00:32,009 --> 00:00:38,130
In order to get all of this displayed, we can finally go to our exercise activity because that's where

11
00:00:38,670 --> 00:00:39,930
we want this to be displayed.

12
00:00:39,930 --> 00:00:40,260
Right.

13
00:00:40,500 --> 00:00:44,370
And what we need is, first of all, an exercise adapter.

14
00:00:44,370 --> 00:00:52,680
And I'm going to create a new variable here, private var exercise adapter, which is going to be of

15
00:00:52,680 --> 00:00:54,300
type exercise.

16
00:00:55,340 --> 00:00:56,210
Adapter.

17
00:00:57,210 --> 00:01:03,540
That we created ourselves, so exercise status adapter, and it's going to be a nullable because I will

18
00:01:03,540 --> 00:01:08,720
not be able to initialize it straight away here, but I'll be able to initialize it later on.

19
00:01:08,730 --> 00:01:10,680
And what's a good point to initialize it?

20
00:01:11,010 --> 00:01:14,870
Well, we can create an own function for this.

21
00:01:14,880 --> 00:01:21,240
So I'm just going to create a function here at the very bottom, which I'm going to call so private

22
00:01:21,240 --> 00:01:22,920
fund set up.

23
00:01:23,880 --> 00:01:26,100
Exercise status.

24
00:01:27,360 --> 00:01:28,710
Cycler view.

25
00:01:29,640 --> 00:01:31,840
Pretty long name, but that's what it does, right?

26
00:01:31,860 --> 00:01:39,780
It's going to set up our exercise that as we sit of you and the exercise status meeting at which exercise.

27
00:01:39,810 --> 00:01:42,770
Are we currently so in here?

28
00:01:43,110 --> 00:01:51,270
What we need is to exercise our layout manager and say that we want to have a linear layout in there.

29
00:01:51,750 --> 00:01:55,420
So Arvi exercise status, where is that?

30
00:01:55,860 --> 00:02:02,220
Well, if you look at it, it's within our activity exercise and it's over here.

31
00:02:02,340 --> 00:02:09,150
So we have this recyclability that we set up in one of the last videos where we called it our exercise

32
00:02:09,150 --> 00:02:09,600
status.

33
00:02:09,930 --> 00:02:11,039
And it should just.

34
00:02:12,090 --> 00:02:13,750
Display some stuff.

35
00:02:13,830 --> 00:02:17,240
So in our case, it's just going to display the circles next to each other.

36
00:02:18,200 --> 00:02:23,510
So we need that and what we do is we go to our.

37
00:02:24,990 --> 00:02:26,010
Exercise.

38
00:02:27,160 --> 00:02:34,510
Activity and in here, we can set the layout manager from it.

39
00:02:35,280 --> 00:02:42,420
So you can see there is this particular layout manager and his return to layout military currently responsible

40
00:02:42,420 --> 00:02:45,360
for the layout policy for this recycler view.

41
00:02:45,690 --> 00:02:51,870
So I want to set the layout manager as a linear layout.

42
00:02:52,830 --> 00:02:59,120
Manager, so linear layout manager, that one down there, because I want to have the.

43
00:03:00,050 --> 00:03:01,010
Little circles.

44
00:03:01,880 --> 00:03:07,410
In a linear layout fashion, and I want to them to be positioned horizontally.

45
00:03:07,700 --> 00:03:15,320
So what I can do is for our exercise status, I can set the layout manager to be a linear layout manager,

46
00:03:15,620 --> 00:03:22,700
and I need to pass the context and then the order in which I want to have them.

47
00:03:22,700 --> 00:03:29,380
And I'm just going to say linear layout manager or horizontal because I want to position them horizontally.

48
00:03:29,690 --> 00:03:32,810
And then you can set another variable here.

49
00:03:32,810 --> 00:03:37,420
Reverse layout is how it's called, and I'm just going to say false.

50
00:03:37,460 --> 00:03:40,730
So it shouldn't be displayed in a reverse manner.

51
00:03:40,970 --> 00:03:41,320
All right.

52
00:03:41,330 --> 00:03:42,410
So this is what we have here.

53
00:03:42,440 --> 00:03:46,570
Are we exercise the the manager is going to be a linear layout manager.

54
00:03:46,790 --> 00:03:50,810
So this is a way to create a linear layout in code.

55
00:03:51,180 --> 00:03:53,390
OK, so that's what we're doing here.

56
00:03:53,930 --> 00:03:58,100
So here we can finally go ahead and set our exercise adaptor.

57
00:03:59,460 --> 00:04:04,290
Because that's what we were going to do, right, so this variable that we created here, which is of

58
00:04:04,290 --> 00:04:06,060
type exercise status adapter.

59
00:04:07,170 --> 00:04:15,870
So this exercise adapter can finally set it to be an exercise status adapter where we, first of all

60
00:04:15,870 --> 00:04:21,600
need to pass the list and it's going to be our exercise list and it's going to be the context, which

61
00:04:21,600 --> 00:04:22,019
is this.

62
00:04:23,300 --> 00:04:27,350
OK, so now if we look at our exercise, that is adapter.

63
00:04:28,270 --> 00:04:34,240
You can see that it expected an array list of type exercise model and it expected a context, and that's

64
00:04:34,240 --> 00:04:37,870
what we are passing to it with this line here.

65
00:04:39,030 --> 00:04:48,630
And then we can set the adapter of our harvest exercise status, which is our recycler view, so we

66
00:04:48,630 --> 00:04:54,990
can now set its adapter to be the adapter that we prepared, so we can just say, all right, that's

67
00:04:54,990 --> 00:04:56,670
going to be the exercise adapter.

68
00:04:59,150 --> 00:05:05,260
And now the only thing left to do is to call this function here, set up exercise studies, recycle

69
00:05:05,260 --> 00:05:09,070
of you, and a good spot would be in uncreate.

70
00:05:09,410 --> 00:05:10,480
So let's do that.

71
00:05:11,240 --> 00:05:12,680
Let's go to uncreate.

72
00:05:12,680 --> 00:05:17,210
And I'm just going to call it here at the very end.

73
00:05:19,890 --> 00:05:27,240
All right, now is the moment of truth of truth, so let's play this up and see if it finally displays

74
00:05:27,240 --> 00:05:28,410
the cool stuff and.

75
00:05:29,340 --> 00:05:35,040
As it seems to have an arrow somewhere and by the way, I'm getting a build fail here and that has to

76
00:05:35,040 --> 00:05:38,730
do with dependency, so it says unresolved reference and so forth.

77
00:05:38,740 --> 00:05:41,630
So I get a bunch of arrows here.

78
00:05:41,670 --> 00:05:47,550
The builders failed, even though it doesn't recognize the errors when or during.

79
00:05:48,920 --> 00:05:54,290
The coding session itself, but it finds it when it's trying to build it, so during compile time I

80
00:05:54,290 --> 00:05:57,950
can change the version to sixty one and then click on Sync now.

81
00:05:58,130 --> 00:05:59,510
So I did that.

82
00:05:59,960 --> 00:06:04,070
And now once I do that, you can see that in my exercise activity.

83
00:06:04,070 --> 00:06:05,920
It's complaining about the recital of you.

84
00:06:06,170 --> 00:06:10,880
So I need to add a dependency on Android X recyclability recycler of you.

85
00:06:11,420 --> 00:06:13,520
And once I do that.

86
00:06:15,180 --> 00:06:21,570
It's trying to reconfigure the build and run the build, so the build seems to be successful and now

87
00:06:21,570 --> 00:06:26,510
we can try and run it on our phone again or on our emulator again.

88
00:06:27,990 --> 00:06:35,550
And then it seems to work, so this is something that maybe is also just a roll or a bug with the version

89
00:06:35,550 --> 00:06:40,470
that I'm using, maybe you don't get this error, but in case you get it, this is a little workaround

90
00:06:40,470 --> 00:06:41,460
to get this fixed.

91
00:06:41,880 --> 00:06:42,210
All right.

92
00:06:42,210 --> 00:06:43,310
So now we have that.

93
00:06:43,650 --> 00:06:48,070
Let's see if we can see what we wanted to see here at the bottom.

94
00:06:48,540 --> 00:06:55,500
So start started and we are so we can see we have all of those different little bubbles there at the

95
00:06:55,500 --> 00:06:55,910
bottom.

96
00:06:56,730 --> 00:06:58,830
And let's see if we can get them in the other view as well.

97
00:06:59,430 --> 00:07:00,070
Yes, we do.

98
00:07:00,150 --> 00:07:01,410
So you can see the jumping jacks.

99
00:07:01,420 --> 00:07:04,320
So this timer has been pushed to the top a little bit.

100
00:07:04,320 --> 00:07:08,550
And there are now there is enough space for all of those little bubbles that we have.

101
00:07:09,780 --> 00:07:17,070
By the way, in case that the bubbles don't appear underneath the timer, at least in the exercise of

102
00:07:17,070 --> 00:07:22,610
you, then that has to do with the above layout of the layout above.

103
00:07:22,650 --> 00:07:29,070
So you can see here that now in my case, it is above, but that has to do with this line of code.

104
00:07:29,080 --> 00:07:37,200
So here we can lay out above and then say that it should be above the ID, our exercise status.

105
00:07:37,350 --> 00:07:38,850
So it should be above our.

106
00:07:40,580 --> 00:07:47,630
Here at the bottom, recycler of you exercise status, so only then it will be pushed on top of it.

107
00:07:47,810 --> 00:07:51,310
OK, so that's the idea behind this layout above.

108
00:07:51,560 --> 00:07:57,010
And if you add that, then it should look as it is in my video or as it does in this video.

109
00:07:57,020 --> 00:08:01,590
So it looks a lot better when in the exercise view jumping jacks.

110
00:08:01,610 --> 00:08:07,010
So here now it is on top of all of those little recycled view elements.

111
00:08:08,070 --> 00:08:13,230
All right, so that's the recycle of you and you can see it's a little tricky sometimes, so it can

112
00:08:13,230 --> 00:08:16,580
become tricky, especially if you run into these weird errors.

113
00:08:16,830 --> 00:08:23,670
But overall, now you know how to create your own adapter and your own recycler of you.

114
00:08:24,640 --> 00:08:30,160
And I'm just going to quickly summarize this, because it might be a little confusing, because we had

115
00:08:30,160 --> 00:08:33,370
so many different steps that we had to take before we even saw anything.

116
00:08:33,380 --> 00:08:33,630
Right.

117
00:08:33,909 --> 00:08:40,510
So the first thing we had is this item exercise status that we created, which is our TV item, which

118
00:08:40,510 --> 00:08:45,280
is this little bubble here or the circle here with the text.

119
00:08:45,430 --> 00:08:53,050
And I wanted to have a list view which put them in a horizontal manner now list, which by itself is

120
00:08:53,050 --> 00:08:53,920
not available anymore.

121
00:08:53,920 --> 00:08:58,720
So this class is deprecated, but there is an alternative class, which is called recycler view, which

122
00:08:58,720 --> 00:09:02,530
even allows us to do that because Eliscu can only position stuff vertically.

123
00:09:02,530 --> 00:09:08,820
But the result of you can position stuff next to each other, meaning in a horizontal way.

124
00:09:09,070 --> 00:09:10,470
And that's exactly what I wanted.

125
00:09:10,510 --> 00:09:14,260
So I need to create a recycler of you or I need to use a recycler view.

126
00:09:14,650 --> 00:09:15,730
So that's what I did.

127
00:09:15,820 --> 00:09:18,370
I went to the.

128
00:09:19,830 --> 00:09:25,730
Resources here to our layout, to our activity exercise and created a recycler of you here.

129
00:09:27,290 --> 00:09:34,850
Now, we gave this an ID because we want to access it somewhere and then we created an adapter, so

130
00:09:34,850 --> 00:09:39,170
here an exercise that is adapter which we extended.

131
00:09:39,200 --> 00:09:46,670
So we took the functionality of recycling you adapter, but we extended it a little bit because we said,

132
00:09:46,670 --> 00:09:50,690
OK, we want to have our own way of doing it.

133
00:09:50,960 --> 00:09:58,750
So we also gave it a new view holder or we created our own type of holder, which inherits from recyclable

134
00:09:58,750 --> 00:09:59,600
view view holder.

135
00:09:59,600 --> 00:10:06,170
But the only thing that is going to inflate or display, it's just going to be our TV item, which is

136
00:10:06,170 --> 00:10:08,450
the little item that we just created the circle here.

137
00:10:09,460 --> 00:10:16,150
All right, so that's what we did in here, we prepared everything we said, OK, we want to use the

138
00:10:16,240 --> 00:10:23,620
model in order to display something because Unbind view, Holder is actually going to set the text here

139
00:10:23,620 --> 00:10:29,410
in our case so we can say, all right, from the view holder that we get here when we.

140
00:10:30,520 --> 00:10:35,410
Call this function or one this function is called is automatically called right from the view holder,

141
00:10:36,040 --> 00:10:43,450
we want to have the TV item and there we want to set the text to whatever is within get ID for that

142
00:10:43,450 --> 00:10:49,180
particular element that we're looking at, because we want to have 12 bubbles in our case and we want

143
00:10:49,180 --> 00:10:53,140
to get the right ID and then we inflate that thing.

144
00:10:53,140 --> 00:10:53,410
Right.

145
00:10:53,420 --> 00:10:54,850
So it's displayed.

146
00:10:54,850 --> 00:10:59,260
Inflating in this case means we display it on the screen or it's being displayed on the screen.

147
00:10:59,800 --> 00:11:05,530
We ever get item count, which just displays or returns the amount of items that we have.

148
00:11:05,530 --> 00:11:10,840
And that's important because in our case, we display 12 items here at the bottom.

149
00:11:11,200 --> 00:11:12,910
That's exactly what we needed.

150
00:11:12,910 --> 00:11:13,210
Right.

151
00:11:13,720 --> 00:11:16,810
So we need to know how many items we need to display.

152
00:11:16,870 --> 00:11:17,200
All right.

153
00:11:17,200 --> 00:11:20,280
So it's going to display this amount of items.

154
00:11:20,740 --> 00:11:27,540
Then we went to our exercise activity and finally used this adapter that we prepared.

155
00:11:27,550 --> 00:11:30,520
So we created an object of exercise that is adapter.

156
00:11:30,550 --> 00:11:37,600
First of all, it was now, but then we created this extra function, set up exercise, that is we of

157
00:11:37,600 --> 00:11:42,340
you, which then takes care of initializing the adapter.

158
00:11:42,850 --> 00:11:49,900
Now, the thing is, in order to initialize the adapter, we need to pass it a list and the context.

159
00:11:50,560 --> 00:11:57,700
But now at the same time, we needed to prepare something where we would display the whole adapter contents

160
00:11:57,700 --> 00:11:58,930
of the list elements.

161
00:11:59,650 --> 00:12:07,750
And that is where we use the ROV exercise status layout manager in order to create a linear layout.

162
00:12:07,780 --> 00:12:12,540
So we call this linear layout manager class or created an object of it.

163
00:12:12,550 --> 00:12:19,810
We said that it should be displayed horizontally and not reversed and then we can finally go ahead and

164
00:12:20,290 --> 00:12:27,970
assign to our exercise status, which now is a linear layout, the adapter that we created, which contains

165
00:12:27,970 --> 00:12:35,860
the exercise list, which contains all of the list elements, meaning in our case, one, two, three,

166
00:12:35,860 --> 00:12:37,030
four and so forth.

167
00:12:37,040 --> 00:12:38,920
So in our case, it's really just the numbers.

168
00:12:39,220 --> 00:12:46,600
But we could, of course, use this exact same approach in order to display many different types of

169
00:12:46,600 --> 00:12:47,250
information.

170
00:12:48,040 --> 00:12:54,270
For example, instead of just numbers, we could display names or we could display an image.

171
00:12:54,670 --> 00:13:00,130
So we have full flexibility with this because it's custom built and we can do anything with it pretty

172
00:13:00,130 --> 00:13:02,820
much when it comes to creating lists.

173
00:13:02,830 --> 00:13:03,060
Right.

174
00:13:03,460 --> 00:13:09,310
I understand that this is a little tricky to do, but once you build some of those so multiple of those

175
00:13:09,310 --> 00:13:16,810
adapters yourself and you created multiple of those custom screens that you have there, it will become

176
00:13:16,810 --> 00:13:17,250
natural.

177
00:13:17,380 --> 00:13:23,620
So no worries if it looks a little intimidating at first glance and at first when you build it.

178
00:13:23,800 --> 00:13:28,090
But once you did it several times and you play around with it and play with the different values that

179
00:13:28,090 --> 00:13:32,500
you have there, it will become natural and a lot easier to implement.

180
00:13:33,550 --> 00:13:34,110
All right.

181
00:13:34,120 --> 00:13:40,120
So I'd say this is a good point to make a break and see you in the next video where we are going to.

182
00:13:41,200 --> 00:13:43,840
Implement the finished screen when the workout is complete.

183
00:13:43,960 --> 00:13:44,850
So see you there.