We'll come back and this video, we are going to design a cart 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 our build gradle and then here we're going to need another implementation line.
So I'm using this one here, Dezi H.
Dotan Hoft and then Circle Image View 3.0 021.
And it's this GitHub here.
And that's basically what we want.
So we want to have an image, which is.
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 cost 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 sink 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 on the score.
Happy on the score place.
And it's going to be a constraint layout inside of which I want to define everything so quickly, see,
OK, with the width here, which is much apparent, and to hide, I'm going to set to high to wrap content.
So it should only take as much 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 card view, which is this new widget.
Which is an Android X widget.
All right.
And then the width should be apparent.
So take as much space as you need and then the height should be wrapped content.
So only.
As much space as you need.
Well, this one was the hole with that is available.
OK, so that is going to be our you 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 the margins 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 we're just going to add all of them so you can see item happy place,
KVI main margined start and eight insipidity 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.
While we're at it, let's also add the colors so here.
Colors, XML.
I'm going to need two more colors, which is going to be two great colors.
All right.
And it's these two so circular image, Watercolor and Adam have your place, description, text color.
And then I will need to know your strengths, so let's go there as well, and new techs will be image
contact 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, and so I am happy place S.V. main margin start and.
As well as the margin and will be the same, so margin start and.
Has the background I'm going to use white, so here background will be a white.
The corner radius.
So to cut corner radius will be.
Item on the corner, Radio's Adam Harvey plays KVI corner radius, then the car to use compact padding
will be.
Such a true.
So this will add a little padding to the cart and of course, we're still missing the constraints here.
So this one constraint bottom to bottom off will be parent.
As well as to end to end of.
Well, the apparent.
Start to start off.
Will be permanent.
And then finally, top to top off.
So this is going to be our cart 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 with should be apparent, the height should be wrapped content.
And then inside of this linear layout, I want to also set some more settings.
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 heavy placed 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, OK, 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 the age Dudenhoeffer.
All right.
So the width should be something like 70 density pixels, but that's something that we have defined
in our dimensions.
So is this image size here?
So I want to have it for the with item happy place, circular image size.
And for the hide 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 is going to be a paper map, I see launcher around and then finally we set the
SCIF border color.
So the circular image of you, particular as being circular image or color, so the color that we defined
here.
Which just this great color.
All right, so this is our card for you here and of course, we can close that and it needs an I.D.
so that we can change it.
And I'm going to call this one.
Ivy plays Mitch.
OK, so that is already it.
This is our circler image view, if you 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 map and later on we will, of course, replace this with our own images.
And as I said next to this image, you 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.
I'm going to add the namespace declaration so this TextView will be text your title and the other one
will be text to your description.
All right.
So now let's look at it and this is what we get.
So let me.
Close to a little bit here.
There we are.
So we have this image which will be circulated around them with 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 just go over it.
So let's create a new package here.
And I'm going to call this one adapters.
Add up Turse 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 CTY 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 depth wits, which requires this happy place model, so it's important.
And then, of course, you need to get rid of the imports of them 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 recycler of you adapter class.
So we have this recycled UV holder, of course, which is our own view holder that we create down there.
So private class, my view Holder, which is inheriting from recycled view and which just requires this
view.
Then, as always, with adapters, you have some override functions, such as the cat item count, where
you get the list of items that are inside of your adapter.
So instead of the result of you, then unbind view holder.
That's what is 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 on to 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 present 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 don't use then.
We just say, OK, 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 Ivy Place 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 your eye and the your eye is what we
get from our model image.
As you might recall, we used to store it as your eye and our database.
So the link where the image is.
So we just say, OK, in this case, don't set the image based on a bitmap, but base it on your eye.
So on the image that is stored inside of the phone.
All right, so that is our view, Holder, and then we have this uncreate view holder where we just
return or my view holder, where we use the layout and flavor from context and we inflate our.
So now art doesn't exist here.
So we need to import our and our is our resources folder.
So we're just saying, OK, we want to have from the resources folder they lay out and we used to item
happy place layout, which we just created.
So it's this XML file which is just going to be there's a whole card here that we're using this card
for you.
All right.
And then that is what's going to happen each time that is created.
So he would just say, OK, this is how it's supposed to look.
All right, and then that's it, so that's our happy place adapters, as you see, is always the same
structure.
So it depends on the context and you have a list that you need to person and you inherit from this glass
called recycler view adapter.
And then you need to have a recycler view holder here.
And we are creating our own view Holder, which we call my view Holder, and which inherits from recycled
view.
Then you have these three methods.
Get item count, get the unbind view holder.
By the way, this list is, of course, the list that is passed to this class and the on line view holder.
You say which items you want to display and what kind of information you get from there.
And then, of course, and the uncreate 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 to be title and description and of course, our image.
All right.
And, of course, in our main activity, that's where this recycled view and this whole adaptor should
be displayed.
So let's go there.
And some of the activities, main activity, let's create a new function here.
Which is going to be private function, set up happy places, recital of you.
And here we need to have the heavy places, which is going to be on the list of happy plays model,
so happy plays list array, list of happy plays, 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 which we prepared in the last video.
OK, so we're going to use that one and we're going to assign to adopt her that we just prepared to
this type of you so that they are connected with each other and they know what to do.
So here, first of all, we say with layout manager, we want to have and I'm going to use the linear
layout manager and it needs the context, which will be this class.
So our main activity.
And then.
We need to define our adapter so well places adapter will be a happy place.
Had that after so happy places adapter with this as the context and the list that I want to assign here
is going to be our happy playlist.
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 will 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 that 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 TV.
So here where we check currently, if the size is greater than zero and we have this Falu.
So instead of having this for loop, what I'm just going to do in here.
I'm just going to say, are we happy places list visibility should be said to view not visible.
So now we are making our recycler visible, but at the same time, we should make our text view, which
says no records available, invisible.
So their 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, reciter of you and where do we get the list from?
Well, it's a good, 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.
OK, so make the RV list invisible and make the text here, the text visible, even though for now this
will not be required button 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 wrong button, we can see that this is the screen that we get.
All right, there we are.
So you can see our happy places out there and they are beautifully and these carts.
So you can see these are the carts.
They have a little shadow that they create and they have these circular images, OK?
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.