Welcome back.
And this video, we are going to implement the functionality of cards, so pretty much to overview the
UI and all those kind of information about a cart.
And of course, we will later on need to give it a lot of functionality as well.
So, for example, we can assign a member to the card, we can add a due date to the card and so forth.
All right.
So we are going to keep it simple.
We're just going to have three features for now.
But those things will be good enough for you to start and you can easily extend that card now that you
know how to do that.
Right.
So let's get started with the first thing first, which means we need to create the activity for it.
We need to create the UI for it and so forth.
All right.
So let's get started.
So the first thing that we need to do is we need to create a new activity.
So let's go over to our activities here and create a new activity called cards, details activity or
card details activity.
So here activities, empty activity is going to be.
Card details activity.
All right.
OK, so first of all, let's import our here so that we can use it and then let's go over to the card
details activity XML file.
So here I'm going to use prepared code.
You can, of course, download it if you want to.
And let's have a look at what we have in here.
By the way, we also need to update our Dimond's file so the dimensions file.
You can, of course, go ahead and just download the latest dimension's file and this XML file if you
don't want to type it in, because I think at this point we are way past creating UI elements in XML
step by step.
And by the way, you can, of course, created the way you want it, right, so you can create your
very own layout if you don't like the one that I'm using.
So here and the dimensions file, I'm going to create a bunch of new dimensions which you can find here,
card details, content padding, CV card name margin, then content, putting it for the.
Card view and so forth.
All right, so we're using Katia's once again.
Now, let's go over to the card details and let's see what else we are missing, because we're still
missing some variables.
OK, so we're missing strings here, for example.
So let's get those strings in as well, because we want to keep this application as flexible as possible.
So you can see we have label color so that color select members, due date and select due date.
OK, now let's look at the XML file, because now we shouldn't have any errors.
So what we have here is let's look at the design first.
All right.
So here we have, first of all, a toolbar.
Then we have a cart in which we have the name of the cart, which means an edited text in which we can
then also edit the name of the cart and then we have another cart here on the Leaford, which has the
label color, which we can then select so we can select the color for this card that we have the members
which are assigned to it.
We can also select members.
Then we have the due date and we can select the due date.
And finally, we have this update button.
All right.
So these are the things that I want to display in a card.
Of course, you could add a lot more here.
You could add notes that people can add, you can add even files that people could upload to a card
and edit.
So there's a lot to potentially adjust and add here if you want to make this a fully fledged and complete
project management tool.
All right.
But I think at that point, you should be able to learn how to get these things done.
I mean, you would have to, of course, check out how to even upload something to Firebase and all
of those kind of things.
So not just images, but real files.
So how to select a file from your phone and so forth.
But overall, in general, when you want to create an application, you will have to research quite
a bit and you will have to find the right features, find the right third party libraries to use and
so forth.
But we're going to start with what you can see here.
So let's look at the real quick.
So here what we have is a linear layout, which is vertical inside of that, we have an upper layout,
which is contains this toolbar, which is basically this toolbar here at the top.
Then we have a linear layout, which is, again, vertical, in which we have to cart view.
So first of all, this car view, which contains the added text and then another card view which contains
all of the other elements.
So this one here.
Is card view one, this one here at the top, and then another card we here at the bottom because I
just think our viewers look pretty cool.
Then we have the text input layout, which is this app compared to edited text in which we can enter
the card detail name.
Then further down we have another card for you with a linear layout.
That's the second card for you.
Right, in which we then have to text you one, text you two.
So it's those two.
First of all, it's this label color.
Then it's the select color.
Then it's the TextView here, which says members and then we can select members.
And then the text you, which says due date and we can select the due date.
So these are not buttons, but they are text views as we use them here.
So if you wanted, you could, of course, use patterns for this.
But I think textures are totally fine because we need to open something up once we click on that anyways.
Right.
So it's not like we are going to select it here directly, but we can then see, for example, the selected
color, then we can click on it and change it, or we can see the selected members and then we can click
on it and we can add more members to it and so forth.
All right.
And then finally, we have this update button, which basically just should allow us to update the whole
card.
All right, so now let's go over to our task list activity and here I'm just going to create a new function,
which I'm going to call card details.
And here I need to pass in the task list position, which should be an integer, and then the card position,
which will also be an integer.
So.
What I want to do in here.
Well, I just want to start an activity.
Which will create an intent or use this intent that we use here, so we go from this activity over to
our.
Card details activity.
All right.
And that's it, what this method does, so, by the way, it has this position and card position, let's
look at those real quick, because if we look at our cards here, you can see that a card has a position
and it's it's inside of the list.
So the wrist also has a position.
So this is position zero for this one.
So the first entry then if we create another list, that will be position one, so to speak and so forth.
All right.
So we need to know in which list we are and then we need to know which card we are looking at because
we want to load details about this specific card.
Right.
And not about any card.
All right.
So this is the card details function.
Then we need to give every single card and all click event so that we can click on it, because currently
nothing happens when we click on it.
So let's go over to our card list items adapter.
So here we need to go to the adaptors, because in the adapter, that's where we handle how the Carlist
behaves.
Right.
So here inside of this Carlist item adapter, inside of our unbind view, holder here, that's where
we assign the cards, right.
So here we just say, OK, card should be model name.
So whatever the card name is, we want to have that in here.
And now at this point, we can also give every single card and unclick click event.
OK, so inside of this if statement we just say Holder.
Item, you said on Click Listener and here, what do we want to do?
Well, first of all, we should check if the UNCLICK listener is not now and this listener is, of course,
the.
Class that we created this interface to be more precise, and here we're just going to say on Click
Listener.
On unclick, so we just call the unclick event with the position of the cart and the position comes
from the unbind view, older function itself, because here you can see we get to position past here,
OK, so we pass in the position to the unclick function.
And then you can see that it's still complaining because if we look at unclick, we can see that unclick
also requires a card.
So we have two options.
Either we pass in the card directly here or we can just get rid of the card here because we can just
pass into position for now.
And then once we click on it, the click event will be called, the position will be passed and now
we can go to the task list items adapter.
And here we can give this adapter and on Click Listener as well, and this one, of course, also in
the same function and the unbind view holder function.
All right.
So here, a little further down, pretty much towards the end of this function here.
So it was scroll all the way down.
We have all of these holder and then we have this adapter.
And here we can then go ahead and say Adapter, dot set and click listener.
So we give this adapter and unclick listener in which we create a new object of the card list items
adapter.
All right.
So what we're just saying is we want to use this on Click Listener.
Which we said here, to be more precise, we want to this to happen once we click on one of those items
and here we need to set the unclick listener.
There should be an object of the cart list items adapter.
So he would just use the on click listener and this should be a new object.
So here we need to use the colon.
So the on click listener and here we override the on click event.
OK, so we basically override the unclick click event of this unclick listener, which we.
Use in here, so we pass in the position and now, if that is called this unclick event will be called
and here we can check if the context.
Is the task list activity?
So context is task list activity.
Then I want to run context card details.
With the position that I have and Tigard position, which is going to be the hard position.
OK, so where does card position come from?
Well, our position is this actual position here, so this can be a little bit confusing, but let's
look at it.
So we present the card position from the card list items adapter, but in this function itself.
So if we scroll all the way up here, we can see that the unbind view holder already gives us a position.
OK, so this is the position of the task list.
And now once we are inside of the task list, we have this additional unclick listener which would create
an object of right of this unclick listener interface that we have in our cart list items adapter,
which is this Arncliffe listener interface.
We override the on click event in which we get a position and we get the position when clicking on the
holder.
So.
The card position is the one that we get from the card list items adapter and the position, which means
in this case, if we look at the card details of the task list position, we get this task, this position
from the list items adapter Unbind view Holder.
So from this one here.
So this one, if we wanted to make it more clear, we could call this one list position, but basically
it's default to call the position.
Right.
So we can just keep it like that.
So then with this year, we get the position.
Here we get the position of the.
Task list, and then we get the position of the card, which means if we look at that here, we can
see let's say I create another list here, list to.
So let me create that.
Now, I have this list, too, and inside of lists to let's say I have caught one.
So now I have caught one in two and caught one in list one, so this card one is not going to be the
same as this one.
This one, we'll have to list one list position and here card one card position.
This one here will have the list to list position and a card one list position.
So it's here, for example, two one.
This one is one one, OK, even though the numbers don't really fit.
But that's basically how you could interpret it.
All right, and at that point, we can just test the application and see if this card details activity
is even opening up.
All right, so there we are approaching Menasche, let's go to the border with Image and now let's click
on Cart and you can see it opens up here.
So here we have an added text.
Now, he, of course, wants to populate this edit text with the card name.
So he should be called court one.
And then we, of course, want to be able to adjust it.
Now, what you can also see is we have two bars here at the top, which I don't like.
So let's go to our project manifest file and make changes here, of course, as well.
So I'm just going to use the same approach for this activity as well here.
So.
Let's add those two lines to the activity here at the top and run it again just to see if that took
effect.
So that we are bored with image, let's click on a card and we can see now only our apart that we have
defined ourselves as dear.
OK, so I'd say let's look more into this court in the next video.