Welcome back, all of the hard work is going to finally pay off because we can finally see something
on the screen.
As you can see here, we have a bunch of dots here at the bottom.
And that is the goal for us because that's what we want to display.
And these should be the exercises that are well in our whole application.
As we can see, we have 12 exercises in total.
And if we should add one, it will be 13 and it will be automatically generated for us.
So that's pretty cool.
And I'd say, let's get right into it.
In order to get all of this displayed, we can finally go to our exercise activity because that's where
we want this to be displayed.
Right.
And what we need is, first of all, an exercise adapter.
And I'm going to create a new variable here, private var exercise adapter, which is going to be of
type exercise.
Adapter.
That we created ourselves, so exercise status adapter, and it's going to be a nullable because I will
not be able to initialize it straight away here, but I'll be able to initialize it later on.
And what's a good point to initialize it?
Well, we can create an own function for this.
So I'm just going to create a function here at the very bottom, which I'm going to call so private
fund set up.
Exercise status.
Cycler view.
Pretty long name, but that's what it does, right?
It's going to set up our exercise that as we sit of you and the exercise status meeting at which exercise.
Are we currently so in here?
What we need is to exercise our layout manager and say that we want to have a linear layout in there.
So Arvi exercise status, where is that?
Well, if you look at it, it's within our activity exercise and it's over here.
So we have this recyclability that we set up in one of the last videos where we called it our exercise
status.
And it should just.
Display some stuff.
So in our case, it's just going to display the circles next to each other.
So we need that and what we do is we go to our.
Exercise.
Activity and in here, we can set the layout manager from it.
So you can see there is this particular layout manager and his return to layout military currently responsible
for the layout policy for this recycler view.
So I want to set the layout manager as a linear layout.
Manager, so linear layout manager, that one down there, because I want to have the.
Little circles.
In a linear layout fashion, and I want to them to be positioned horizontally.
So what I can do is for our exercise status, I can set the layout manager to be a linear layout manager,
and I need to pass the context and then the order in which I want to have them.
And I'm just going to say linear layout manager or horizontal because I want to position them horizontally.
And then you can set another variable here.
Reverse layout is how it's called, and I'm just going to say false.
So it shouldn't be displayed in a reverse manner.
All right.
So this is what we have here.
Are we exercise the the manager is going to be a linear layout manager.
So this is a way to create a linear layout in code.
OK, so that's what we're doing here.
So here we can finally go ahead and set our exercise adaptor.
Because that's what we were going to do, right, so this variable that we created here, which is of
type exercise status adapter.
So this exercise adapter can finally set it to be an exercise status adapter where we, first of all
need to pass the list and it's going to be our exercise list and it's going to be the context, which
is this.
OK, so now if we look at our exercise, that is adapter.
You can see that it expected an array list of type exercise model and it expected a context, and that's
what we are passing to it with this line here.
And then we can set the adapter of our harvest exercise status, which is our recycler view, so we
can now set its adapter to be the adapter that we prepared, so we can just say, all right, that's
going to be the exercise adapter.
And now the only thing left to do is to call this function here, set up exercise studies, recycle
of you, and a good spot would be in uncreate.
So let's do that.
Let's go to uncreate.
And I'm just going to call it here at the very end.
All right, now is the moment of truth of truth, so let's play this up and see if it finally displays
the cool stuff and.
As it seems to have an arrow somewhere and by the way, I'm getting a build fail here and that has to
do with dependency, so it says unresolved reference and so forth.
So I get a bunch of arrows here.
The builders failed, even though it doesn't recognize the errors when or during.
The coding session itself, but it finds it when it's trying to build it, so during compile time I
can change the version to sixty one and then click on Sync now.
So I did that.
And now once I do that, you can see that in my exercise activity.
It's complaining about the recital of you.
So I need to add a dependency on Android X recyclability recycler of you.
And once I do that.
It's trying to reconfigure the build and run the build, so the build seems to be successful and now
we can try and run it on our phone again or on our emulator again.
And then it seems to work, so this is something that maybe is also just a roll or a bug with the version
that I'm using, maybe you don't get this error, but in case you get it, this is a little workaround
to get this fixed.
All right.
So now we have that.
Let's see if we can see what we wanted to see here at the bottom.
So start started and we are so we can see we have all of those different little bubbles there at the
bottom.
And let's see if we can get them in the other view as well.
Yes, we do.
So you can see the jumping jacks.
So this timer has been pushed to the top a little bit.
And there are now there is enough space for all of those little bubbles that we have.
By the way, in case that the bubbles don't appear underneath the timer, at least in the exercise of
you, then that has to do with the above layout of the layout above.
So you can see here that now in my case, it is above, but that has to do with this line of code.
So here we can lay out above and then say that it should be above the ID, our exercise status.
So it should be above our.
Here at the bottom, recycler of you exercise status, so only then it will be pushed on top of it.
OK, so that's the idea behind this layout above.
And if you add that, then it should look as it is in my video or as it does in this video.
So it looks a lot better when in the exercise view jumping jacks.
So here now it is on top of all of those little recycled view elements.
All right, so that's the recycle of you and you can see it's a little tricky sometimes, so it can
become tricky, especially if you run into these weird errors.
But overall, now you know how to create your own adapter and your own recycler of you.
And I'm just going to quickly summarize this, because it might be a little confusing, because we had
so many different steps that we had to take before we even saw anything.
Right.
So the first thing we had is this item exercise status that we created, which is our TV item, which
is this little bubble here or the circle here with the text.
And I wanted to have a list view which put them in a horizontal manner now list, which by itself is
not available anymore.
So this class is deprecated, but there is an alternative class, which is called recycler view, which
even allows us to do that because Eliscu can only position stuff vertically.
But the result of you can position stuff next to each other, meaning in a horizontal way.
And that's exactly what I wanted.
So I need to create a recycler of you or I need to use a recycler view.
So that's what I did.
I went to the.
Resources here to our layout, to our activity exercise and created a recycler of you here.
Now, we gave this an ID because we want to access it somewhere and then we created an adapter, so
here an exercise that is adapter which we extended.
So we took the functionality of recycling you adapter, but we extended it a little bit because we said,
OK, we want to have our own way of doing it.
So we also gave it a new view holder or we created our own type of holder, which inherits from recyclable
view view holder.
But the only thing that is going to inflate or display, it's just going to be our TV item, which is
the little item that we just created the circle here.
All right, so that's what we did in here, we prepared everything we said, OK, we want to use the
model in order to display something because Unbind view, Holder is actually going to set the text here
in our case so we can say, all right, from the view holder that we get here when we.
Call this function or one this function is called is automatically called right from the view holder,
we want to have the TV item and there we want to set the text to whatever is within get ID for that
particular element that we're looking at, because we want to have 12 bubbles in our case and we want
to get the right ID and then we inflate that thing.
Right.
So it's displayed.
Inflating in this case means we display it on the screen or it's being displayed on the screen.
We ever get item count, which just displays or returns the amount of items that we have.
And that's important because in our case, we display 12 items here at the bottom.
That's exactly what we needed.
Right.
So we need to know how many items we need to display.
All right.
So it's going to display this amount of items.
Then we went to our exercise activity and finally used this adapter that we prepared.
So we created an object of exercise that is adapter.
First of all, it was now, but then we created this extra function, set up exercise, that is we of
you, which then takes care of initializing the adapter.
Now, the thing is, in order to initialize the adapter, we need to pass it a list and the context.
But now at the same time, we needed to prepare something where we would display the whole adapter contents
of the list elements.
And that is where we use the ROV exercise status layout manager in order to create a linear layout.
So we call this linear layout manager class or created an object of it.
We said that it should be displayed horizontally and not reversed and then we can finally go ahead and
assign to our exercise status, which now is a linear layout, the adapter that we created, which contains
the exercise list, which contains all of the list elements, meaning in our case, one, two, three,
four and so forth.
So in our case, it's really just the numbers.
But we could, of course, use this exact same approach in order to display many different types of
information.
For example, instead of just numbers, we could display names or we could display an image.
So we have full flexibility with this because it's custom built and we can do anything with it pretty
much when it comes to creating lists.
Right.
I understand that this is a little tricky to do, but once you build some of those so multiple of those
adapters yourself and you created multiple of those custom screens that you have there, it will become
natural.
So no worries if it looks a little intimidating at first glance and at first when you build it.
But once you did it several times and you play around with it and play with the different values that
you have there, it will become natural and a lot easier to implement.
All right.
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.
Implement the finished screen when the workout is complete.
So see you there.