And this video, I would like to show you how to create a recycler of you and a recycled view is like
a list view only that it's also a grid view and it's none of the two as well.
So that's a little confusing.
But in the end, what it really does is it allows us to create lists in different shapes and forms.
And that is something that list viewed wasn't able to do.
So a list view, which was the class that's now is deprecated, which allows you to create lists like
you can see here, which are scrollable, and this is not available anymore.
So it's deprecated, but the recycled if you replaced it because it has a lot more functionality and
is a lot more flexible, because if you look at it, we can make this same list here to also be a grid.
So we have this recycled view which allows us both options here.
All right.
So this one is also still scrollable here.
So that's very useful if you have an application which needs to put stuff next to each other and still
inside of a list.
So let's have a look at how we can build that.
And in this case, we are not going to code anything, but we're just looking at the code that I've
prepared here.
And therefore, we're going to start with a class that you will need to create when working with recyclable
use.
And that is your own adapter.
OK, so I'm in this class here, which I called Eitam adapter, and it's going to be the adapter for
items pretty much, because when you want to work with the recycler, you you need to have an adapter.
The structure that you need is always the same.
You have your own adapter class name and I just called it Eitam doctor.
Then you inherit from a class called recycling, you dot adapter and then in the brackets here you add
the name of your class dot view holder and then in the brackets of your item adapter.
That's where you can put the different information in.
And in this case, the data set has to be passed and it can be of a different type.
It can be of a type array, but it can also be of type array list.
And I'm using array list here for the items that I want to display.
And then you need to pass in the context in which you want to display the list.
So there are multiple functions that you will need to override when using the recycled viewport adapter
because it just needs to have them, otherwise it will not work.
So the ones that you will need is the on create view holder, the unbind view holder and the get item
count.
And then you can also use an additional class in here, which is an asset class in our case, which
is a view Holder or I call that view Holder, and it requires a view when it's created.
And you can see it's inheriting from the view holder class, from a recycler view.
So what we just do here is I just say that I want to have a value which is TV item standing for TextView
item, which is my view dot TV item.
So if we look at our example here, again, each of those entries is one of those TV items so tight
and one is kind of type TV item and so forth.
All right.
But now let's look at those different methods.
Let's start with the easiest ones.
So this one here is getta item count.
What it does is it gets to item number of items in the list.
So in our case here, we have 12 items.
So it will return 12 as the amount of items sold item count will be 12.
So items that size, it's just the amount of items that we have in our list.
Then the next one is on Create View Holder, what it does is it inflates the item use, which is designed
in the XML layout file.
So uncreate view, Holder will return a view holder and view Holder is the class that we created ourselves.
So that's the one at the bottom that we just created.
And what it will do is it will create such a TV item.
Right.
And he will just say how such an item should look like.
So we use layout inflator from context and then we inflate our art or layout that items role.
So what is this item?
Well, it's just this XML file that I created, which is just containing this text you.
That's it.
So that's everything it does.
It just says, OK, take the height that you need, but take the width that is available to you.
All right, coming back to the item adapter here, you also have to pass in the parent and the attached
route, you can set that to false.
And of course, what we're doing here is we are returning this view, Holder, because if you look at
this function, you can see the returns, something of type view holder.
OK, so that is the uncreate view holder method.
And now let's look at the unbind view holder.
So what that does is.
It binds each item in the array list to a view, so we have this array list of 12 items and now we want
this list type to be transformed into something that we can actually see, so into views, so into a
bunch of different views.
So each every single item will become a view.
And a view is something that you can see on your screen.
So, for example, here, this list item is one view and it's going to be our item one.
And then the next one is also a view.
It's item two.
And by the way, this button here at the bottom is also a view and we can click on it, but we can also
click on list items and our recycler view here.
OK, so what does it do?
Well, it's called when the result you needs a new view holder of the give and type to represent an
item.
OK, so each time that our recycler view wants to display another item, this onepoint view Holder will
be called.
So why would that be?
Well, that's because if we look at our list here, currently, all of our items are visible.
But if we had more items, then not all of the items need to be constantly visible.
They are not there, right?
They are not on the screen.
So they also don't need to be calculated or prepared or even loaded.
And that that's where it is on by view.
Holder comes in because it will load them as soon as they are just about to be visible.
And the idea behind this is that you don't want to load a huge list.
For example, if you show a list of database entries on the Web, for example, let's say something
like Instagram, you don't want to load one thousand images all at the same time and load all of the
data, but you only want to load the images that are visible and maybe some more images which are about
to be visible so that the user has a fluid scroll experience.
So you can just preload or buffer a bunch of images that are about to come, even though the user might
never actually scroll all the way.
But still, you want to give the user the best possible experience, right?
So that's what this Unbind view Holder does is.
It is called when the respective units, a new view holder of a given type to represent an item.
So this new view holder should be constructed with a new view that can represent the items of the give
and type.
You can either create a new view manually or inflated from an external layout file.
And that's what we're doing here.
So we're saying we want to use an item which is the item at the position.
So items, if you look at it, is the value that is passed to us when we create an item adaptor, which
pretty much is the list that we want to display.
So the array list.
So in our case, the list of those items like one, two, three and so forth.
And now.
What we do is we want to have this individual item that we're currently looking at because Point View
Holder only looks at one item at the time.
It doesn't look at all of them at once, but only at one at a time.
And what it does is it says, OK, item at the position or items that the position is going to be the
item, which means item it positions zero is item one item at position one item to item at position
or index two will be three and so forth, because the computer or programming languages, most of them
at least start counting at zero.
And then we assign this item to the holder, the active item, the text.
What is that?
Well, it's this TV item here inside our view holder.
OK, so this TV item, which is in terms or in the end, is this item's role here?
This TV item?
OK, so then.
The next thing I do here, so this is just additional code that I added, it's not really something
that you will need, but I added this in order to make a change between the colors so that not all of
them are with a white background, but some of them have a gray background.
So what I'm just saying is, is the position modulo two zero.
So can you divide the position by two and will it have no remainder?
Then please go ahead and set the color to be a light gray.
So which is the case here?
So zero divided by two is zero.
So we get it this great and then otherwise make the background white.
So here Holder TV items said background, color, context, compact color context are color white.
So it's pretty much the same code as we have here.
Only looks a little different.
So let's bring it into the same format so that it's a little more comparable.
OK, so this is pretty much the same coat, only in one case we said it to Gray and in one case we said
it to white so that it looks a little better and it's easier to distinguish the list items from each
other.
Because what you can also see here is that one could imagine that this is just one list item, right.
So this whole row here could be just one row, but in the end is actually two and even three list items
in this case, one, two and three.
And it's easier to distinguish them if they have different colors.
OK, so that's something that, as I said, is just a cherry on top.
You don't need to do that, but that's in order to make it a little more readable.
OK, so that's the preparation of the item adapter and you can create those exactly.
This way.
You can just copy this code and you can reused.
Then every time.
The only thing that you could then or would have to change if you want to have a different design,
is the items all XML so you could go ahead and create a very own design for every single item element.
And that is super powerful because now you could go ahead and add buttons in here.
You could add a bunch of options, image, views and so forth inside of these items.
And yeah, you could customize your list.
You want your recycler of you, and that is something that is super valuable and super important whenever
working with apps nowadays, because almost any app that you will use has at one point a recycler of
you.
Or a list type of approach, either great format or less format.
All right, so now let's look at the main activity and the main activity.
What I have is this value list, view and grid view.
The only thing that they do is they store a value which we then know whether we currently have the list
you visible or grid view visible.
So that's just something that I used in order to make this possible.
What you can see here that I can move around between the two.
So now I'm in the grid view.
So our current visible view, this variable here, will have the value of grid view.
And otherwise, now it will have the value of list view.
OK, so that's the idea behind those variables, then we have to create another nothing too fancy here
and then we call this functionalist you.
So what is this functionalist view?
This function is used to show the items in the list format, so I'm setting the current visible view
to being LASU and then I set the layout manager to be a linear layout manager.
So I want them to appear in a linear layout.
And then I create an item adapter object, which I call item adapter, and I assign it to this Arvi
item list, which is of type linear layout.
So let's look at this RV item list.
It is this recycler view widget that I created in my content maint, which then in turn is called an
activity made so we could pretty much do the same thing.
We could have done this whole thing and activity main.
So it could have been here instead, just like that without including the content.
So if you have never worked with basic activities, then you will not have used content main.
You will only be familiar with activity.
You mean.
All right.
But it's the same type of concept.
So in our case, we have a coordinator layout in which we have a HEPA layout with the toolbar.
So this thing here at the top, then we in our case now have the recycler view and the floating action
button, which is displayed in here at the bottom.
So this is the UI that we have here.
And what I'm saying is that I want to assign the adapter to this item list.
So to this recycler view.
So coming back to our main activity, that's what I'm doing in here.
And then setting the item adopted to be the actual adapter of this Arvi items list, now, of course,
if I do as I did with activity men, so instead of having it in here just as a include and using it
in there, I get this error.
But I just did that to demonstrate the point.
OK, so that's the list you method.
And then we have the similar approach for a grid view.
So here we just say that the current divisible view is the grid itself.
And then we set the layout manager to be a grid layout manager.
OK, so it's a different type of layout.
If we go back here and we would go ahead and create a new grid layout, you can see that's pretty much
the same thing as if I would go ahead and create a grid layout in here.
That's the code here that does that.
And what I can say is the context and the span count.
So how many columns do I want to have?
So let's say I only want to have two columns.
Then I would change to spend count to two.
Let's run this again just to see if that is actually applied.
So that we are.
Let's look at the review and you see now the elements are next to each other just with two columns,
and that is what you can achieve with the Spanker.
And, of course, you can increase it to four or five and whatsoever.
And that will change the amount of columns that you have.
And then we again create an item adapter object, which we then assigned to the ROV item list adapter
property.
So you can assign an adapter to something which is of type either layout or linear layout, because
a linear layout also just displays things on top of each other or in the list, so to speak.
That's why we can or why it has an adapter.
And then finally, I have this GETRUDE here, which gets item lists and it returns an array list.
So we create this little list, which is of type array list, and then we assign a bunch of values here.
So I have 12 values.
So let's say I want to add another one item thirteen.
And.
Item chocolate.
And another item.
Popcorn.
Something like that.
So now let's run this again just to see, because so far when we are on this list, you we couldn't
scroll right, because there was nothing to scroll.
There was nothing underneath it.
But now let's look at it and see.
Now we have a scrollable list here.
Now we can actually scroll and get this little effect indicating, OK, you're done, you're at the
bottom of the list or you are at the top of the list.
OK, and then we returned this list, so we add all of the different items that we want to add and we
return this list.
All right.
Now, we looked at the different function.
Let's go back to our uncreate method, because that's where we even started with this list view.
And now the only thing that I have in here is this fab switch, which changes between the two different.
So one of them is a great view.
The other one is a list you so that's everything that this web which does, because if you look at it,
it's this floating action pattern.
That's why I called fab fab floating actual button, which then just is called fab switch.
And whenever we click on it, we change it from list view to great view and the other way around.
And what we do here with this fab switch, that image drawable is change the little image that we see
here.
So there's a little icon here at the bottom right corner, which is either this list or this grid image
and which are actually visible in our drawable folder.
So I see.
Great, that's great.
And I see list.
That's this list here.
All righty, so this is how you can work with recycled views and we're going to use recycled views quite
a bit because, as I said, almost every app that you can use or that you can think of where you have
any type of amount of information that is bigger than just showing one or two elements is usually done
with a list view or a recycler view, to be more precise, because very often you just don't know how
many entries you have, especially when the data comes from the web or from the database.
You never know how many entries there are.
And that's why recycled views are amazing to do that.
I would recommend that you just download this project and then you go ahead and play around with the
value, so, for example, play around with this one here, the spend count, just to see how it looks
when you have different spans.
Then another thing that you could change is the colors that you want to have as a background.
So instead of having color gray, you could go ahead and use something pretty cool, like primary color,
whatever our primary color is.
You can look that up in colors here.
Our primary color is this.
Greenish here, the staircase, and then you could even create the different structures, so it's not
modulo two, but maybe modulo three and then you have three different versions.
So if modulo three is one, then you have the primary color.
If mother of three is two, then you have a white color.
And if it's something else, then you would have, I don't know, like the secondary primary color or
something like that, because if we run that, we will now have this other color.
And then another thing that I would like you to do is, and that's the most interesting one, is to
adjust this item's role, because instead of just having a TextView, you could go ahead and add image
views in here.
And I'm just going to do that real quick just to demonstrate that.
So I know this video is getting a little long.
I'm sorry for that.
But I think this is super useful to see.
So we have this image for you and it's just going to wrap its own content and then I'm going to set
as a source.
The drawing that we have so drawable gret because we don't have many options here, so let's run it
again and see what's happening.
So this is, by the way, the one example.
It looks awful in my opinion, but this you see how you can change the color.
So that we are back and you can see now we have this image here for every single list item here at the
left hand side, and it's barely visible because it's just just like gray image with white background.
So it's not a perfect example.
But you can see even in the grid view, it's not the same for all of them.
So you could design it as you like.
So.
All right.
So probably you can already imagine how this will be useful, because now you could go ahead and create
a whole list item that looks like a list item in, for example, Instagram or Facebook or whatever app
you're using because they have list items there as well.
And one list item would be, for example, an image, then the poster when it was posted and some further
information so you could get all of that into one of your item roll elements.
OK, so I think that's enough.
Let's make a break here.
We are going to use recycled use quite a bit.
So no worries if that was a little too fast and you didn't understand every single thing because practice
makes perfect and practice really helps to make those concepts stick.
And we are going to use them in almost every app.
So I'd say, let's go to the next one.
See you there.