Welcome back.
And this video, we are going to design a card view which will pretty much be our list elements.
And it will look a lot better because we're using a third party library here.
And in order to use it, we need to implement it.
So let's go to your build Gradle and then here we're going to need another implementation line.
So I'm using this one here, d, h dodon Hoff and then circle image view 3.0.1.
And it's this GitHub here.
And that's basically what we want.
So we want to have an image which is.
Sergio.
So instead of a square image, I would like to have a little circle.
And if you want to achieve that, then it very often just makes sense to use external resources as this
one is one.
All right, so circle image view is the class that we then can use.
And of course there are some limitations, but still good enough for our purposes.
All right.
So once we added that, we need to sync it.
Never forget that, because otherwise it won't appear so it's not going to show you when you need it.
And then I'm going to create a new layout.
So let's go ahead and create a new layout resource file.
I'm going to call this one item, underscore happy on the score place.
And it's going to be a constraint laid out inside of which I want to define everything.
So let me quickly see.
Okay, we have the width here, which is match parent and to height.
I'm gonna set the height to wrap content.
So it should only take as much height as it really requires.
All right, then the next thing I want to have in here is, of course, the card view.
So let's go ahead and use cart view, which is this new widget.
Which is an Android X widget.
All right.
And then the width should be match parent.
So take as much space as you need and then the height should be rep content.
So only.
As much space as you need.
Well, this one was the whole width that is available.
Okay.
So that is going to be our card view.
Now, of course, we need to give it some more properties here.
For example, we can set the margin start.
So a little margin towards the left.
So layout margin start and I'm going to define this dimension.
And by the way, let's define all dimensions real quick that we're going to need.
So go to the diamonds file.
And here I'm just going to add all of them so you can see item happy place.
CV main margin start and 8/10 P two pixels corner radius three, elevation three and so forth.
So here are all of the dimensions.
You can either type them or you can copy them from the dimensions file.
Well we are.
Edit lets also add the colors.
So here.
Colors.
XML.
I'm going to need two more colors, which is going to be two gray colors.
All right.
And it's these two.
So circular image, watercolor and item.
Have you placed description, text color?
And then I will need two new strings.
So let's go there as well.
And the new text will be image content description will just be the image.
All right.
So these are the three things that we needed to add dimensions, colors and strings.
Now we can go back to our item, happy place, because here we were defining the dimensions and here
the margin, for example, that I wanted to set.
And I'm going to set that to.
Margin start ent.
So item happy place CV.
Main margin start end.
As well as the margin and.
Will be the same.
So margin start and.
As the background I'm going to use white.
So here background will be white.
The corner radius.
So the card corner radius will be.
Item or not corner radius item happy place CV corner radius.
Then the card use compact padding will be.
Set a true.
So this will add a little padding to the cart.
And, of course, we are still missing the constraints here.
So this one constraint, bottom to bottom off will be parent.
As well as the end to end of.
Well, every parent.
Start to start off.
Will be apparent.
And then finally top to top off.
So this is going to be our card and you can see it here.
It really isn't that visible because it doesn't have any content.
And we said that it should wrap its content.
So inside of it, I want to have a linear layout where things are next to each other, so where the
orientation is horizontal.
So let's create a linear layout here and the width should be match parent, the height should be rep
content.
And then inside of this, a linear layout.
I want to also set some more settings.
So as I said, the orientation should be horizontal, the gravity should be centered vertically.
And then I want to have some padding and I'm going to use item happy place content padding.
All right.
So inside of this linear layout.
That's where I want to have the image.
So first I want to have the image, then I want to have the title and the description and they should
be on top of each other.
So we are going to require another linear layout in there.
But first of all, let's start with our circle image view, and that's the one that we imported from
D, H, Dawn Inhofe.
All right.
So the width should be something like 70 density pixels, but that's something that we have defined
in our dimensions.
So it's this image size here.
So I want to have it for the width.
Item.
Happy place.
Circular image size.
And for the height is going to be the same, then the content description will be that it's going to
be an image.
The source.
It's going to be that.
It's going to be a map.
Map.
I see launch launcher round.
And then finally we set the CIF border color.
So the circular image view border color as being circular image border color.
So the color that we defined here.
We're just this great color.
All right.
So this is our card view here.
And of course, we can close that.
And it needs an ID so that we can change it.
And I'm going to call this one.
Ivy plays a major.
Okay.
So that is already it.
This is our circular image view.
If we look at it.
So this is going to be the image you currently.
It's not circular, but this is our icon that we're using, by the way, which is this icy launch around.
So currently I'm using this MIP map.
And later on we will of course replace this with our own images.
And as I said next to you, this image, you I want to have two texts which are on top of each other.
So we are going to require another linear layout here.
So in this case, we have a little margin towards the left and right and the orientation will be vertical.
So the text is will be on top of each other.
And he is complaining the tools doesn't exist.
So I'm gonna add the namespace declaration.
So this text view will be text view title and the other one will be text view description.
All right.
So now let's look at it and this is what we get.
So let me.
Close just a little bit here.
There we are.
So we have this image which will be circular later on.
Then we have the name and the description.
And you can see how they are created here.
All right.
Next, we can use a happy place adapter.
So we're going to create a new adapter.
And we've done that multiple times already.
So I think it makes sense to I just go over it.
So let's create a new package here and I'm going to call this one Adapters.
Adapters, and we might add more adapters later on, of course.
And not that this project, but generally speaking, you could later on have more adapters and in our
case we're just going to have this one adapter.
So I'm just going to paste the whole CD file.
So the Scotland file in here and let's quickly talk about this adapter.
So what is this adapter doing?
So what we have is our adapter which requires this happy place model.
So it's import that and then of course you need to get rid of the imports of the OR that were there
before.
All right.
So then this is an open class that we can inherit.
And as you can see, it inherits from the recycle view adapter class.
So we have this recycle view view holder of course, which is our own view holder that we create down
there.
So private class, my view holder which is inheriting from recycler view and which just requires this
view.
Then as always with adaptors, you have some override functions such as the item count, where you get
the list of items that are inside of your adapter.
So inside of the recycler view, then on board view holder, that's what it's called.
Each time that you bind a view.
So each time that it is constructed and you can see that we have our model which is the list at a position.
So the list what is this list?
Well, it's this list that we pass into our happy place adapter each time we create a happy place adapter.
And of course we're only going to create it once.
But still we need to pass in the context and we need to pass in the array list of happy places.
And guess what?
In our main activity we have a function which just does that, which gives us the array list of happy
place models.
All right, so this is going to be the list that we then use then.
We just say, okay, the model that we're currently looking at, which is of type happy place model
and then we see if the holder is of type, my view holder, then please go ahead and set the image,
you or I as the I've placed image.
Then set a title from that model and set the description.
Now when it comes to this image, we are getting it from the URI and the URI is what we get from our
model image.
As you might recall, we used to store it as URI and our database.
So the link where the image is, so we just say, okay, in this case, don't set the image based on
a bitmap, but base it on a URI.
So on the image that is stored inside of the phone.
All right, so that is our view.
HOLDER And then we have this on create view holder where we just return our my view holder where we
use the layout inflator from context and we inflate R so now R doesn't exist here.
So we need to import our and our is our resources folder.
So we're just saying, okay, we want to have from the resources folder they lay out and we use the
item happy place layout which we just created.
So it's this XML file which is just going to be this whole card here that we're using this card view.
All right.
And then that is what's going to happen each time that is created.
So here we just say, okay, this is how it's supposed to look.
All right, then.
That's it.
So that's our happy place adaptation.
As you see, it's always the same structure.
So you pass in the context.
Then you have a list that you need to pass in and you inherit from this class called Recycler View Adapter.
And then you need to have a recycler view view holder here.
And we are creating our own view holder, which we call my view holder and which inherits from recycler
view.
Then you have these three methods get item count, get the unbound view holder.
By the way, this list is of course the list that is passed to this class.
In the online view holder, you say which items you want to display and what kind of information you
get from there.
And then of course, in the on create view holder, you define the layout that you want to use.
And inside of this layout, of course, we have those things such as our text.
And title and description.
So TV title and description and of course, our image.
All right.
And now, of course, in our main activity, that's where this recycler view and this whole adapter
should be displayed.
So let's go there.
Inside of the activities.
Main activity.
Let's create a new function here.
Which is going to be private function set up happy places recycle of you.
And here we need to have the happy places, which is going to be an ArrayList of Happy Place model.
So happy place list array list of happy place model.
All right, so then we need the curly brackets, of course.
And what should happen in this function.
Well, we want to set up our r v underscore happy place list.
So what is that?
Well, it's inside our activity, main.
It's this recycler view which we prepared in the last video.
So we're going to use that one and we're going to assign the adapter that we just prepared to this recycle
view so that they are connected with each other and they know what to do.
So here, first of all, we say which layout manager we want to have, and I'm going to use the linear
layout manager and it needs to context which will be this class.
So our main activity.
And then.
We need to define our adapter.
So well place's adapter will be a happy place adapter.
So Happy Places adapter.
With this as the context and the list that I want to assign here, it's going to be our happy place
list.
So the one that is passed to this method here.
And then we can set that to the adapter of our RV Happy Places list.
So RV Happy Places list adapter should be the Places adapter.
Now, this by itself would already work.
But what I want to do is I want to add another line here to my Happy Places list and I want to fix add
size here.
So set has fixed size to true.
All right.
And now, of course, we need to call this method at one point.
And what would be a good point.
Well inside of our get happy places from local DB.
So here where we check currently if the size is greater than zero and where we have this for loop.
So instead of having this for loop, what I'm just going to do in here.
I'm just going to say RV Happy places.
List visibility should be set to view dot visible.
So now we are making our recycler view visible, but at the same time we should make our text view which
says no records available invisible so they're visibility view dot com.
So not just invisible but actually gone so that it doesn't impact our UI.
All right.
And then, of course, we need to call this set up.
Happy place, recycle view and where do we get the list from?
Well, it's this get happy place list.
All right.
So what will happen if our get happy place list is empty?
Well, in order to make sure that it's going to be working, even after we had a list that had entries
and then we don't have any entries anymore, we need to reverse the whole thing.
So make the RV list invisible and make the text here the text view visible, even though for now this
will not be required.
But then if we have the feature where we can delete entries at that point, this will be relevant.
And now if we hit the test button or the run button, we can see that this is the screen that we get.
All right.
There we are.
So you can see our happy places are there and they are beautifully in these cards.
So you can see these are the cards.
They have a little shadow that they create and they have these circular images.
Okay, cool.
So that is it for now.
And of course, there's still a lot to do later on.
We will also add the feature to swipe to delete or swipe to edit and a lot more.
So see you in the next one.