Welcome back.
This time, I want to take a slightly different approach to bring this topic closer to you, because
what we're going to create is a UI, which looks confusing at first.
So we're going to build what you can see right here.
And what you see right here is rather complex.
So I have to explain it slowly.
OK, so I'm going to go over this UI and once we're done with this, then we can look into the XML code
and copy it into our project.
Right.
So I will not build it up with you step by step.
But I want to explain everything.
Then we will look at the code and then we can just use the code.
OK, so if you want to build something like that, that's not something that you would do in 10 minutes.
OK, this is, um.
Yeah, this there's a lot of thought process behind it.
OK, so let's just start with it.
So what we have here is the screen that should appear once we get to this screen here.
So once we open up the board, once we go to a board, we want to have.
What you can see here on the screen, but this shouldn't take the whole width of the screen because
we want this to be scrollable right in both directions, because in the end, we can have multiple lists
here.
All right.
So we have multiple tasks with multiple carts underneath them.
OK, so we have this ADD list, which is a button which you already can see.
Right.
So when we're done with this version, with this video, we will have this button.
But the button doesn't do anything.
So we still need to implement it.
And it's still going to take several more videos to do that, because this now is going to be the super
advanced stuff, which really.
Yeah, makes a pretty cool up in this case, I think, because we are using features which look pretty
good and they have a certain length to them.
I don't know.
It's like it's just so cool.
I really like this.
So let's look at this.
We have this atlast button underneath it.
We have what you can see here at a task list name.
So how I did it is one task can have multiple individual cards.
OK, so you have multiple different steps to finish for one task.
OK, so that's basically how the concept behind that is.
So we want to have multiple cards.
Right.
But before we can have cards, we still need to create a list.
So we have this button.
When we click that we see this ET task list name.
So this added text, which allows us to create a new task list.
And we have on the left hand side, we have a little button which cancels the whole process.
And on the right hand side we have a little button which starts or finishes the creation of that list.
So this will then create a list item in our database as well.
And of course, whatever name we have entered there, that will be the name for that list or the task
list.
OK, and then once we have that, it will display like this, it will display the title.
And then on the right hand side we will see two buttons.
So one for editing and one for deleting.
Now, once we want to delete it, it will just be gone, right, but if you want to edit it, we press
this button here to edit button and then this added text opens up.
OK, so this edit text where we can then change the name, we can delete the whole thing or cancel the
whole process and we can save the changes.
And underneath all of that, that's where we want to despite the cartoonist.
So here we will have a bunch of different cards and currently just look stupid because it's just item
zero, item one and so forth.
It's not super interesting.
Right.
But as soon as we see how it looks like, that's going to be a lot better.
So you can see when we create a card, so we want to create a new card, this is what's going to this
going to appear.
So we have this add cart button.
Once you click that, it will open up this added text, which allows us to enter a name for that card
and we can delete the process or cancel the process by pressing the left button, or we can finish the
process by pressing the go button or the finish button.
And once we have added the card, it will go into this are card list.
So it will appear on this Arvi card list.
OK, so that is basically the UI that you have here.
And of course, not all of those elements will be visible.
So, for example, only if there are cards, this Arvi card list will be visible only if we have a list.
This ATM card will be visible only if we have a list.
We will, of course, see the title of the list with those two buttons.
Only if we want to create a new list.
This added text will be visible only if we want to add it.
And you list this added text here or added our list, this added text will be visible.
OK, so that is the overall UI structure that we have here.
So a bunch of stuff that will not permanently be visible.
OK, so that is the UI for.
The screen here where we see the individual board with all of the lists and then all of the different
cards inside of the list.
OK, so now let's look at the code, because the thing is, it's the individual parts of the code are
not something new.
So we have used all of that.
We have used card views.
We have used linear layouts and everything.
So if you want to look into that in more depth, just download version 27 and really look into the code
and try to understand everything that is going on here.
So first of all, this whole thing, so this whole item task is a card for you.
So this part here does add list.
It's just one button of the whole card for you.
So there's a bunch of stuff there that is hidden currently that is not visible or actually gone even.
So, if you want to make it visible, we, of course, need to only make it visible at the right time.
So this is the correct view and inside of the car, we have everything else.
So first of all, we have a little bit of elevation which creates this little shadow around it.
Then we have the linear layout, which is a vertical.
So this is basically the overall linear layout on which we have all of the content.
But that linear layout itself is inside of a car for you.
OK, then we have a text.
You would says add a task list.
If we look at it, it's this one here where it says add list.
So we use this add list, which is not even a button.
It's actually an TextView, this one here.
OK, so the text color is blue.
It's the color accent that we use.
The text is at list, which is, of course the string that we create.
So action, at least the padding is 12 density pixels, which is a new dimension that we create.
Then we have some more settings here to make it look a little better.
So we have a white background, which is the action color.
You can change that any time you want.
Of course, if you change the color for this so you can, of course, also check out the colors here.
We are going to copy them into our project afterwards.
But let's finish this first.
So that is our text.
You write the very top one and then we have a cart view, which then contains a lot of other information
again.
So we have another card for you, which is the CSV and task list name.
So we are using this card for you.
We have a little elevation, a little layout margin.
The visibility is set to go on, but in the tools it's set to visible.
The same goes here for our takes you.
So when we actually run the app, the visibility will be gone.
So it will not appear.
But when we.
Tested here, look at it in the design, you can see they are there, so this thing here, this overall
element here is another card view.
So it contains this button at the left and it contains the added text and then it contains another button.
So it's this card for here which contains a linear layout, which then has an image button.
So I have a button, which is an image.
Right.
So it's just this little icon that we can see here, which is this cross.
OK, so this is the image button.
Then we have the added text and then we have the image button, so we are using the orientation horizontal
so that those three elements are next to each other.
So first to image button, then the added text and then to image button again.
OK, for the added text, we have the input type here, which is very helpful to keyboard will be accordingly.
Then the hint that we want to display is a list name.
So it's another string that we use here as well as the autofill hints is also hitlist name.
All right.
So the layout wait, I use one for this one and for the image button.
I use the layout with rep content.
So this time we're just saying, OK, only take as much space as you need as well as the image button
here.
It only takes as much space as it needs, but has a little padding.
Of course, we don't want to push things too close to each other, but this editor is going to have
the layered weight of one, which means it will take the whole with that is possible.
All right.
So the whole with that is still available.
So as you can see, we have this button with this button here and this edit text just takes all of the
rest of the width that is available.
All right.
So then the next part is our linear layout.
So here we use the AL task item, linear layout.
We give it an ID so that we can make things visible and invisible.
It's really important.
And inside of that, we have another linear layout where the orientation is horizontal again.
So we want to position things next to each other.
So first of all, we have this text view so you can see we're using buttons as text to use, write or
text use as buttons pretty much in this case.
It's just the texture.
Actually, this is not the button this time, but we use it as a button up there at the top.
OK, so then we have this image button here and another image button.
So now this time we are using the two image buttons right next to the.
Texture to the title, you could, of course, if you prefer to have this button here at the left hand
side, you could just copy this image button and put it on top of the text you saw here just before
the text you.
All right, so then.
We have the two inch buttons, of course, which have individual IDs so that we can connect with them
in the code and we use certain backgrounds here, selectable item background, content descriptions,
all the good stuff.
OK, and then I have a little view here, which is just a divider.
So it's just a little bit of.
A visible divider here so that we can see, OK, this is where one thing ends and this is what the other
starts.
OK, so then we have another card view, which is the same thing that we had before.
So we have an image button, then an added text and an image button.
This time it's this one here.
OK, so this ETTY added task list and then afterwards we have a result of you.
So here we are using a complete recycler view, which afterwards has done another card for you.
So this card to you has the same.
Rules pretty much as the other to use, so you see this here is a car view, that one is a cart view.
And then finally that one here at the bottom is also a cart view in which we have a button and an added
text and another button.
OK, so this is the final car to you with the linear layout where.
The elements are horizontally oriented, which means our image button is on the left hand side and in
the center, we have to edit text and this image button here is on the right hand side, OK?
And then finally, we have another text view, which I use as a button again.
So it's going to be this ad card text to you.
OK, and just by changing some settings, it appears like an actual button, but it's really just a
TextView.
So you can use pretty much anything as a button, so to speak, if you add an on click listener to that
element.
But for now, our text to you is the better choice for me, at least in terms of the UI.
I have some more settings that I can play around with and so forth.
OK, and that is it.
So that is our item task XML.
I hope this was a good enough explanation.
The thing is, we have to play around with view gone and view visible, and it's always good to put
those kind of things into a bigger container.
For example, here everything is or this linear layout is within the card view and we can play around
with the visibility of that card view in order to either make it appear or not appear.
And of course, if you want to see things and the designer, it always helps to have tools, visibility
visible if the actual visibility is set to go on.
OK, so now let's go ahead and add all of that to our project so you can simply download the file,
download the whole XML file and add that to your resources.
So to your layout folder, because I think posting it in here is not even going to be as useful.
So let's just copy it over, download the project, copy the item, task XML and paste it into your
layout with control the.
OK, now, of course, we will need the latest dimensions, so let's just add those as well.
And of course, you could have left the dimensions out and just put it directly into the XML file,
but this is just a slightly cleaner way.
So this is where we have all of our dimensions here, task item titled View, Text, Petting and so
forth.
So everything is in in those dimensions that we use then in item task.
OK, now, of course, we still have some errors because we're using colors and strings which aren't
prepared yet.
So let's put those into our project as well.
So here we have a bunch of new strings.
That we use.
So let me put those in here, I can add list, so to add list text then list name card at cart cart
name add list.
OK, so here we have the action at least, and then we have the another text for atleast so you could
of course use the same one, but if it's different positions, then you might want to think about different
names for them because maybe you want to.
Give them more specific texts.
All right, and then finally, we have the colors that we need to add, and it's just two colors that
I'm using here.
So let me add those here as well.
So it's this task list, action color, which is this white ish color.
And then we have the task, this title view, background color, which is also a whitish color, but
slightly lighter.
OK.
I think it's enough for this video, we still, of course, need to add some code now, we need to add
adapters because we have a new recycler of use.
So we need a new adapter to add and a bunch of other code.
So I think let's make a break here and just go ahead to the next video where we're going to add those
little adapters and so forth.
So I'll see you in the next one.