Next, we are going to implement the functionality to select a color so I can see we have a bunch of
colors to choose from and then we can use that for the color of that particular card.
All right.
We can then update that.
And for now, it will not store it.
But basically, the idea is that the card itself will then have a top layer here, which will then say,
OK, that this is a blue card, for example.
All right.
But this is for now what we're going to implement.
So this a little additional dialogue here.
All right.
To get started, I think it makes sense for you to just download the latest strings and diamonds file.
So here I mentioned that we're going to add are going to be the following.
So.
Item labeled color, height, label color, margin, color, selected image margin and so forth, that
list kartu elevation and corner radius and so forth.
OK, so just download the latest Dimond's file and also the latest strings file, because we are going
to use one string here as well.
Of course, you can also just type in the string because it's not that much effort.
So it's the string.
Select the label color.
OK, so what we're going to need is a new layout, so I'm going to create a new layout resource file,
which I'm going to call item label.
Color.
And it will be a frame layout as the root element, so let's create that one.
And inside of this frame layout, I would like to use a new vector asset, so let's use the tick box.
Actually, it's a check, this one here.
I want to use the check and I'm going to call this one.
I see Victor White.
Don, 24 DP.
And finish so inside of this frame layout, I would like to use it, so let me show you what this code
is going to look like.
So basically what we have is a frame layout which matches parathion with and wraps content in height.
Then the foreground is set to attribute selectable image or Eitam background.
Then we have a view here, which I call Dumain, which has a width of match parent.
And the height is Eitam labeled color height, which is fauji density pixels.
Then we have a layout margin, which I'm going to set to five density pixels and color and is used as
the background color.
For now, of course we want to adjust the color accordingly.
And then we have this image here, which is basically the tick box.
It has an ID.
I've selected color.
It represents content and height and weight and its center vertically and gravitated.
So this means that it will basically look like what you can see here.
So we have this little icon here on the right hand side.
This is the selected check, which means that this is the color that we have selected so the user can
select multiple different or from multiple different colors.
Pretty much.
Right.
So we have this blue color, for example, and we, of course, want to adjust that for the different
colors that we want to use.
The visibility set to go on for this image of you and and the tools.
We see it, of course.
OK, so that is the individual item for the colors that we want to be able to use, but then we will
need another XML file.
Which I'm just going to call dialogue list, so here, dialogue on the score list.
XML, and what that will do is it will be a frame layout also.
And it will contain the following code, so let's look at it, you can, of course, also download this
file if you don't want to type everything in here.
So we use this frame layout, which matches the parent.
Then it's a card view, which has a linear layout inside of it in which we have a TextView view and
a recycler view.
OK, so basically if we look at it, we have select and then we have it the separator and underneath
we have a recycler view which we cannot see much of yet.
OK, this recycle of you should be full of item labeled color XML files, so full of these kind of colors
and then the user can use the one that he wants to use for the card.
So basically, the dialogue list is this card here.
With a select label, colored text and the separator and underneath where this recital of you with a
bunch of items, label colors, which are the colors here that we can then select from.
So this is how they are linked together.
And of course, as we are working with a recycler view, we also need to have an adapter, so let's
go ahead and create the new adapter inside of our adapters folder.
So here you.
Kotlin file, it's going to be a class called label.
Color list items adapter.
Pretty long name, but that's basically what it is and.
The information that we need to pass in here is the context of private vital context, which will be
of type context.
Then.
And I think it makes sense to put that into multiple lines, so we need to import context here and content
context, then we have the list, private var list, which is an array, a list of strings, which are
basically the color code.
And then the private ball, um, selected color, which will be a string.
Now, as this is an adapter we inherit from recycler, you dot adapter.
Of type recycle of you.
Thought V. Holder.
All right.
So this is how it's going to look like overall.
They will call the items adapter, which is a recycled view adapter, and then, of course, we need
to implement the functions that are missing.
So.
He wants me to make this abstract, what I want.
But I want to implement the members so I have a overclass in implement members and then let's implement
those members here, OK, so we have on create view holder, so get item count and so forth.
So let's first start with the easiest one.
Get item count.
Let's get rid of that one or of the to do and let's just say return list that size.
Then on create Holder, well, the thing is, as we are going to work with an item colliculus in there
and with our class view older, let's just implement them real quick.
So private class, my view, holder view view, which is going to be a recycler view.
Thought.
You hold her and we pass in The View.
All right.
So we need to import a view here, import AndroGel and then as we want to be able to click on the individual
elements, let's add an on click listener, which is going to be an interface.
Called on item click listener, where we have the unclick function, which will need the position and
the color, which is a string, so we need to know which color we pressed on.
All right, so now let's implement this uncreate view holder here.
Which will return my view, Holder, that's the one that we have.
Added at the bottom.
And it should return my shoulder, so there what I want to return.
As layout inflator from.
Context.
Inflates and then Artaud, Liautaud Eitam.
Label color.
Apparent and false.
So we need to import our here and then we can use item label color, which is this XML file, so we
inflate this XML file inside of our view holder for every single element.
OK, so that's the idea behind this line of code.
We've done that multiple times already.
Now Unbind view Holder.
So what do we want to find inside of the Bueler?
Well, first of all, we will get the individual item that we look at, which is the item at the position
of our list that we get passed.
So the list of colors, so to speak.
And then we can check if the holder is of type, my view Holder, if that's the case, then we can go
ahead and design it.
So item you view thart view.
Main.
Said background.
Background, color.
Which will be.
Color, not pass color.
Out of the item, OK, so what's happening here?
You mean is this part here of our item little color?
So if we look at it, it's this view.
Then.
We set the background color of that view based on the color DPAs, color item, so item, what is item?
Item is the individual item of our list and then we pass it into a color.
So if it's something like hash for six F's, then that will be, for example, white.
If it's a bunch of zeros, then it will be, for example, like, OK, so this year is passed to us
as a string.
And then.
It makes it color out of it, so this color makes them the color out of it.
All right, on top of that, what I want to do is I want to make this item view.
Or this image, you better said this one here.
This tick box I want this to make.
Or make this visible or invisible, depending on.
Whether the item is the selected color or not.
All right, so let's go back to our adaptor, we can here check if.
Item is equal to M. Selected color, then we want to make this I've select color visible.
His view thought visible and otherwise, I want to make it invisible.
So basically this part here.
Is equal to Gonne.
And then, of course, every single individual element should be clickable.
So if you click on Green, we want to have green and blue and so forth.
All right.
So.
Let's make them clickable as well, so holder item you thought set on Click Listener if.
On item click, listen, there is not equal now then I want to set it or set an unclick for it.
So we need to create a variable for this, of course.
So let's create a global variable here on top of the uncreate view.
Holder So on item click listener will be a variable.
Which will be of type on item click listener nullable, which I'm going to assign null to.
OK, and now we can check is it now if it's not now?
Then go ahead and.
Set the on item click listener thought unclick with the current position and then we also need to pass
in the item.
So this item, which is part of list position, which is.
What position as an entity about that position will give us a strain so here.
A string of the array list.
Because if you look at it, we can see unclick expects an integer and the color, and that's what we
pass the position at the item, which is a color or a string, which then would be a color.
All right, so next, we need to create this dialogue, because you can see once we click on it, it
opens up this dialogue, right?
It's nothing new TVT that we are populating or anything.
It's just this little dialogue.
So does pop up.
And if you want to use dialogue, well, you need to create them.
So let's create a new class here.
Which will be.
And sign of a new.
Directory or package, and I'm going to call this one dialogues.
All right, so let's create a new codling file for class, and I'm going to call this one label color
list dialogue.
And this one will be an abstract class.
And abstract classes cannot be used to create objects from the OK, so classes cannot be instantiated,
so you can create objects of an abstract class.
However, you can inherit subclauses from them.
OK, so I don't want to be able to create objects from them, but I want to directly access the.
Elements of it, so here I'm going to need the context.
Then the private var list of array list.
String's.
And then.
I want to know the selected color so private.
Vul.
Unselected.
Color, which should be a straight but away.
We also need to title so private four or maybe Volle title should be a string of.
An empty string, by the way, this one should be EVAR as well, so that we can change it.
So it will be an empty string.
In each cases, and we need to import context so that we can use it now, this whole class should inherit
from the dialogue class because, well, it should be a dialogue.
Right.
And if you want to use the dialogue class to inherit from it, you need to pass in the context and you
need to import it.
So now we have dialogue and context.
All right, so at this point, we can now implement this class, so private var, so first of all,
I want to create an object of my adapter, which for now will be empty.
So color list items, adapter nullable, which I'm going to assign null to for now.
All right, and then.
I need an uncreate here, so uncreate.
What I want to do here?
Well, I want to create a view which will be using the layout inflator dot from context thought inflate.
DOT and humanity in Port Arthur as well, but this will allow us to inflate our own layout or be created,
so it's inside of the layout folder and it's called dialogue list.
Along list.
So let's import our here so that we can use our dialogue list.
And we also need to pass in the route when we call and flight and we're just going to pass here, OK,
so we call the layout inflator.
We create a new view out of this.
Right.
So based on this dialogue list, XML file that we created.
OK, so now we have this new view and we can now set the content, set content view to be the view that
we just created there.
I'm going to set the cancelable on touch outside to Drew.
So once we click next to it, you could see the dialog just disappears.
So this is done by this set.
Cancel on touch outside and I'm going to set cancelable to true so that it can be cancelled and I'm
going to set up a recycler view which we need to create a function for.
So let's create a function which will take care of the result of you.
Private fund set up recycler view, which we need to pass on a view.
And let's import viewers so that we can use it, and I thought you and here we can then design the view
so we can just say view that TV underscore title or how did I call it to be title?
I think that's what it takes to be a title.
This one here.
The text.
Should be the title, and by this I mean the title that is passed to me, so to the label colored this
dialogue class.
So here probably it's empty, but we can override it, of course.
Then.
View that RV list.
So the.
List here.
If we look at it, it's this recycled that you list are list.
Let's set that layout manager to be a linear layout manager.
Which also needs a context.
And then we can set the adapter, so let's set the adapter to be label color items adapter, which need
it needs a context.
And what else does it need?
The list and the select color.
So let's passing the list.
And selected color.
And then we can set the adapter off our our V list.
So here you are, relist thought adapter.
Should be the adapter to be prepared.
All right, now, every single adapter.
Needs to have an on click listener, right, so adapter dot on item click listener.
Should be a new object of label color list items the doctor thought on item click listener and here
we can implement it.
Okay, so we're creating a new object off label color items adapter on item click listener, which is
this on item click listener interface.
And now we need to overwrite its events so implement its members.
So overwrite on click.
And here once we click on the button what we want to do.
Well we want to dismiss this dialogue and we want to say that we have selected an item.
OK, so we need to create this additional function protected abstract from an item selected.
So here we can then implement what should happen once we selected an item.
OK, and we need to pass on the color of the item that we selected.
OK, so here we just say it's abstract so that we can later on implement it.
You know, our class as abstract as well, so we can now create abstract functions in here and it's
protected so it can only be used inside of this project or.
Yeah, that's pretty much it.
Right.
So here I can just say on it and select it should be called with the color that is passed to us as a
string when we click on the item on the individual item of our adaptor.
So here this is our recycler view.
We used the adapter for it.
We click on one item and that is pretty much what is then called.
So the on item selected and the dialogue itself, as you can see, is also dismissed once I click on
a color.
OK, and now there's only this function to be left, to be called here, and we need to pass in The
View.
And luckily, we prepared a view already, which is our layout and later dialogue list.
So at this point, I think we're going to make a pause because it's still a little bit to set up.
So we still need to do all of the setting up in the card details activity itself, which will then,
of course, use our label colorless dialogue.
So you can see we created the adapter to be then displayed inside of the dialogue.
So we create a new dialogue in the way that you can see here.
So we pass in the context the list that we want to display in the dialogue that's not necessarily required,
if you will ever want to create a dialogue.
But in our case, we need to because our dialogue needs to display this list.
Then I want to have a title for the list and I want to know which color is selected so that I can then
make this color specifically different so I can make a tick box here, for example, which we don't
have at that point yet.
Even after finishing the next video, we will not have that yet.
But overall, you can see we first of all, need to have an adapter, which is our little color items
adapter that we created before.
And then in the uncreate, we can inflate a view, which is the dialogue list view, which we prepared
before this XML file.
Then we can set that as the content view.
We make it touch touch outside.
True.
So we can cancel it once we touch outside.
Then we set up the recycler view and now we need to do a lot of coding inside of card details activity
to actually add the functionality.
It's not that much, but still we need to do that in the next video.
All right.
So see you there.