Welcome back.
Now that you know how to create a board, it's time to also display the board and in order to do that,
we will need to create a recital of you for here.
As you can see, we have this whole world text currently as the only content of this page, but we want
to changed it.
So we will need to create a recital of you.
And therefore, we, of course, need to create an adapter and we will need to create an individual
row inside of that recital of you, as well as the overall page that can see your overall activity XML
file.
All right.
So let's go ahead and start with that.
Therefore, what I'm going to start with is with the content main or in my case, I think I called the
main content.
So here in I lay out I called the main content, even though it should have been content on the screen,
but let's go ahead and start with that.
So first of all, what I will start with is that I want to use a linear layout here.
Then let's add a background so here background.
Should be there in the background as well as the gravity should be a center and the orientation should
be vertical.
And then I will add some padding, and for that I will use 16 DPI, even though, of course, we could
go to the dimensions.
So here in the Values Dimond's, if you want to stay consistent, let's just create some more dimensions
in here.
And I'm going to do that real quick.
So these are the new dimensions that I want to use, so main screen content padding, no boards available,
text size, item, board content, margin, bottom item, board content, padding, image size image,
circular border with and so forth.
All right.
So a bunch of new dimensions.
You can, of course, download the dimensions file from this chapter.
And these are going to be the dimensions that they're going to use in our main content, but also in
another XML file, which will be our individual role inside of our recycler of you.
Then I will do something that I think we haven't used before, and that is to lay out behavior, so
lay out on the score behavior.
This one here and there.
I want to use the APA scrolling of you behavior.
All right.
So this already exists and.
If you look at it, it's here.
Inside of the values example, and these are not necessarily strengths that we have created, but it's
the ones that are directly available by Android or made available by Android and the layout behavior,
what it does is the class name of a behavior class defining special runtime behavior for this child,
for you.
So what we will do is we will make the bar where we will use the app, our scrolling view behavior.
So the idea is, do you want to leave the app open or do you want to get rid of it when you want to
scroll?
So these are these are the things that you can change in the layout behavior.
All right, and then what I want to have is a layout that allows me to put something inside of it and
that it looks good.
So I'm just going to use a cart view.
All right.
So, of course, I could use multiple different things to fit that description.
But basically, I'm just going to use a cart for you here, which matches the parent in both directions.
And I want to have a white background.
So I'm just going to use add color or actually Android's color.
White, all right, then, a little bit of elevation for our car to you so that it creates a little
shadow and here I'm going to use elevation.
So here, Carthew elevation.
As well as a little radius for the corner, so that it's rounded, so that we get a rounded radius,
so card corner radius and here cards view corner radius.
This one here.
OK, so inside of this card for you, I want to have a recital of you.
All right.
So this is where our review view comes into play.
Recycler of you.
And it was not this one free sky color view, this one here with a whiff of match parent and a height
of match parent.
Now, this one is going to get an ID so that it can communicate with it.
And I will use the RV underscore bords list here.
So this will be the name of standing for all of you and will be the board's list.
And then finally, I'm going to set the visibility to go on for now.
OK, so it should be invisible for the beginning.
And underneath that, I would like to have a text to you.
So I'm just going to use the text that we had before, what we just said, Hello World.
And I'm going to use that so you can see we have those two inside of our cart view.
And at the beginning, we just want to display a text view which says no cards available.
Please create one or something like that.
And.
I'm going to call this one on TV, No.
It's available so that it's a little more descriptive, it should match to parents.
In both directions.
And the text should be something like no bars available, so let's go ahead to districts and create
a new string here as well.
So string's.
So it's just going to be the string here, no boards are available and the text will just be no boards
are available.
Exclamation mark, exclamation mark, exclamation mark.
So now we can use that instead here.
So heartstring.
Or actually, Eliseo's no boards are available, that's easier this way.
We don't need to use all of this constraint layout stuff because we are using a linear layout.
So let's get rid of that.
The tax should be centered, so adjust the gravity to center so that it's beautifully centered, their
tax color.
Well, let's use the secondary tax color that we have prepared and then the text size should be text
size for.
What is it?
Oh, boards are available, text us.
This one here.
All right, so these are the dimensions, the main content, the strings.
Now let's add one color here that I want to have, and that is going to be my divided color.
So I will create a little divider and I will use this color here.
So EAA and I don't mean the video game company here.
Of course, it's just this color that we are using here.
All right.
So.
Let's design every individual board that we want to display, so it's just going to be a list view,
elements of list view item that we want to design.
So let's go ahead and create a new XML file for our layout, new layout.
And I'm going to call this one item bought.
And how I wanted to look like is on the left side, I want like to have an image and then a title and
then also underneath it, who created this board?
All right.
So that's basically it not too complicated.
Of course, you can adjust it to your liking.
You could add to created the date and so forth.
So a lot of information that you can get.
OK, so instead of a constraint out, I'm going to use a linear layout here again.
The width should be much apparent, but the height should be only Øvrebø content, so only the content
height, then the background.
Should be attributes, selectable item background, as you can see, so there is one by default.
This one here, selectable item background.
Which is a style that may be applied to buttons or other selectable items that should react to pressed
focus states and so forth.
OK, so this is the one that I want to use.
Then the orientation will be vertical as well as I want to have a little margin towards the bottom for
this whole thing of margin.
And this one is called.
Item board content, margin bottom, this one here.
All right, so this is the linear layout inside of that linear layout.
I want to have another linear layout which puts things next to each other and then one where things
are put on top of each other.
OK, so we have multiple linear layouts here.
So let's create another one, which will be very similar.
So let's go ahead and.
Close this linear layout, so this is the linear thought that I want to use.
Apparent Web content orientation horizontal so that elements are next to each other and the padding
should be item board content padding.
And then I want to use the circle image of you.
So this one here, I'm going to call this one, I've bought image and the width should be Eitam board
image size, which is 60 density pixels.
As well as the heart and soul in both directions, 60 density pistils, then we have a content description.
We have a source which is our ABC board placeholder in case we don't have an image for it.
Right.
And then I would like to use the safe border color of color, primary text color.
And in order to do so, I need to create the namespace for app.
OK, so it's editor at the top.
A new namespace.
So this will put the image here, as you can see, and now I would like to have a text and then another
text underneath it.
So the top text should be our title.
So what we will need is another a linear layout so that things can be top put on top of each other.
So this time the orientation will be vertical.
So here orientation vertical margin start will be item, board name, layout margin in my case.
So this is the dimension that I created.
But internally it's just going to be 10 density pixels.
Then this linear layout has to of course, be close at one point.
And here we can now create our two textures.
OK, so I'm just going to paste him in here.
So that we have them director here.
So you.
No one will be TV name match, parent web content, as usual, we take the whole with, but only the
height that is necessary.
Then we set the text color as the primary text color, textiles as important in textiles, then in tools.
I'm going to add this namespace as well and tools.
I want to call this one board name, as you can see now in tools is called board name.
And underneath I had this created by and that will then later on, of course, be replaced by created
by the user name.
So it's going to add the user name here to the text itself because he we're just using the tools text
so that we see something in the design, but we're not actually setting the text specifically.
All right.
Now let's go ahead and create the adapter so we will need to create a new class.
So let's go ahead.
And I'm going to put that into a new directory, so let's go ahead and create a new path here, new
package, and I'm going to call this one add up Turse.
And here, let's go ahead and create a new.
Glascott then file, and I'm going to call this one Bought Items Adapter.
OK, so each time we work with recyclable use, we of course need to have an adapter and I'm going to
make this one open so that I can inherit from it.
And here.
I will directly add a constructor.
All right, so.
I'm going to say that I want to have the context and.
The list that I need to display, which will be an array list of Borz.
OK, so nothing new, we have used this approach multiple times already.
Of course, we need to import context as well as Boort.
And then we can add the recital of you text here, so we need to have a recital of you or we need to
inherit from recital of you thought adapter.
And here we will create a new view, hold a class.
So I'm just going to say recycler view dot.
View holder.
All right.
So that's important sector of you, and now let's create our own view Holder and here implement the
members that are necessary, so let's implement all of them, select all.
And it created the ones that we need in here.
And, of course, let's go ahead and create this private class.
My view holder here where we pass in The View.
And.
It's a result of you.
Todd, you hold the.
Where we pass in The View.
So if this is a little too quick for you, check out the demo on recycled views, OK, because we're
not doing anything fancy or new here.
It's the same that we have used before.
The same code, pretty much.
So let's start with uncreate view, Holder.
What do we want to do in here?
Well, we will return my view, Holder, which we then can pass on the view that we want to display,
while the view that we want to display is coming from lay out inflator from context inflate.
And then we used to lay out that we want to inflate and to lay out to be prepared just for this was
called item on the scoreboard.
And we need to pass on the parents as well as the stipend for attached to root.
OK, now let's import our.
OK, and that seemed to work, that's fine, so let's go ahead and put it in a different.
Line here, so it's a little more readable, so we return our viewer holder here.
With the parents and those settings, as you can see, then let's go to our own Pind view Holder here.
What we want to do is we want to, first of all, use the model, which will be our list.
OK, so list at the position.
So.
Our class bought items adapter gets a list of Bortz, so a single board should be our model.
So we're using this model here in order to then check.
If the holder is my view holder, then we can use Glide in order to display an image.
And the image that we want to display is, of course, the image of the board that we have used.
So I'm just going to use with context and context is the variable that is given to our adapter, which
will be the class in which this recycler will be displayed.
Of course, in our case, it's the main activity, then it's going to be model image.
And by the way, model, of course, will be our last position, which means it will be the board itself.
So it's going to be Dysport and it's going to give us this image, OK, because that's what we are passing
to this class, to the sport items adapter.
All right.
So we get the image of the board.
We sent across it as a placeholder.
We use ICEE board placeholder and then we put that into the holder item view.
I've bought image and I've bought images inside of item on the school board XML, this SERPELL image
view that we have prepared just a couple of minutes ago, and I called it I've bought image.
Now, if we look at this item board, we of course also need to set the board name and created by.
All right, so let's just do that inside of this unbind view holder.
So now we have the image.
Now it's time to set the item.
You.
Take TV name, text, so here, hold her thought item, view, dot TV on the screen name, that text
will be model dot name and then we have holder dot item, view, dot TV underscore created by text.
Should be for now created by.
And then we get that info from the model, so model DOT created.
By.
OK.
Now, of course, every single holder should have an unclick listener, so every single one of those
boards should be clickable because then you get into the board and you see the board details with all
of those cards and all of those list items that you have there.
So all of the tasks that have to be finished.
All right.
So what we'll do is we'll say holder dot item view that set on Click Listener.
So we add an unclick listener.
All right.
So then what I want to prepare as well is an anklet listener.
So I'm going to create my own interface here, which will be an on click listener, which will then
have a function on Click with a position where it was clicked, which will be an integer and the model
that it was pretty much clicked.
So when we click onto one of those list elements, it's always at a specific position and there is a
board in the background.
Right.
So I want to use this on Click Listener here.
But the thing is, we, of course, need to create an object or an instance of that one click listener.
And I'm just going to create it up here at the beginning of the class.
So for now, I'm just going to say private var on click Listen, there should be an on click listener
nullable, which I'm going to assign null to.
And then later on and to be specific, when we assign an omelet listener to our holder item, which
means to our list item, at that point I want to assign an unclick event.
So here if the on click listener has not now then the unclick listener on Click with the position and
model because we get both right.
So in this.
Unbind view holder, that's where we get it, right, where we get the holder, we get the position,
and then based on the position, we can find out the model and we can then pass both to the UNCLICK
event, which is, of course, this unclick that will then be executed.
Now, let's do the get item count.
I think that's the easiest one where we just return the amount of items.
So here, return list that size.
And by the way, the list is the one that we get past when we create this adapter.
So depending on how many list items we have in our database, that's the amount of items that we want
to have and get item count.
All right.
And at this point, we have prepared our bought items and your item adapter, of course, we still need
to add a recycler view, but that's what we will do in the main activity and in the next video.
So unfortunately, this is not the point where we can test it yet, but we will do so in the next video.
So this was just a preparation to prepare to board items and to prepare the adapter, the UI and everything.
But at this point, we can now go ahead and implement the final parts of this to finally then test it.
So to load the data from the database, load it into our app, then load it into our recycler view and
display the different boards that we have.
So see you in the next video.