Welcome back in this video, we are going to built the screen that you see here, and the goal is to
really have a screen that is as close as possible to this screen.
You can try to build this yourself.
And I would really recommend it.
And the only thing that you haven't seen the used before is this card view here.
And this is just a card view widget.
So you can just go to the XML file and try to build it using a card view.
I'm going to use a linear layout here, and you can see that we have a text in here.
Then this card view, which has a linear layout in itself where we have another text view, text view
added to text, as well as.
But so we have four items inside of the card view linear layout.
And of course, we have a background here.
You can, of course, choose to use your own background, but you can download this background from
the files that are available at this lecture slash chapter.
So just download the project and you can get the files there so you will find the background here.
I CBG.
So I see on the school background is going to be this background, and there you find the files for
the different sizes.
So screen density sizes.
OK, let's get back to our project.
And first of all, import those troubles.
I'm just going to drag in my PNG file in here, and this will then be my background that I will be using
for this project.
OK, so now let's go ahead and set up our activity.
Main example, and I'm going to use a linear layout here because it's a lot easier to set everything
up in the style that I want to have there.
If we're using a linear layout, we won't need to have all of these constraints, which will make it
a lot easier in terms of setting it up in the Aksum al coat.
So let's start with the first entry here, and this will be quiz app like so.
So this will be the text that we have, and currently there's not really much to see there, just as
a little text that says, Quiz, let's style it a little bit.
Let's give it the better size here.
So I'm going to give it a text size of 25 MP and I'm going to make the textile bold.
So that it's going to be significantly thicker.
So you see this up there we are.
Looks a little bigger.
Then I also want to make sure that it's with it's not going to be wrapped content, but it's actually
going to take the entire width of the parents or matched it with off the parent.
Also, the text should be centered, so the gravity should be said to center here, which will allow
our text to be in the middle.
You can see it takes the entire width and then it's centered in the middle.
Now, as the text color, I would like to use a white color, so text should be white.
Now we won't see it because, well, we don't have a background where it would be visible, so we need
to add a background.
And here's how I'm going to do that is I'm just going to use my eye CPG.
So this file that I just import it, which is this trouble file here.
OK.
This one, you can of course, use an own file if you want to.
You don't have to use this particular background.
OK, so let's look at how this is going to look like.
We see, OK, there we have the white text which has this app, and then we have our background.
OK, so now the important part comes in and that is going to be the card view.
OK, so this card view is basically going to be this whole part right here.
And let's set it up.
Therefore, we will need to use this widget card view here, which comes from, well, I'm going to
use the material one.
So this material card to you?
All right.
And in terms of with, I'm going to much to parent and in terms of height, it should only take as much
height as it actually needs.
So then inside of this card view, I want to have a bunch of information and bunch of UI elements.
But first, let's style this card for you a little bit.
So I want to have a little bit of margin at the start of, let's say, 20 density pixels and at the
end of 20 density pixels also.
So just a bit of distance towards the edges.
The background should be white.
So I'm going to use the white color as the background.
And currently, we don't see our card for you yet because there's nothing to display, and I'm going
to add some more properties later on.
For now, let's create a new linear layout in here, which will then contain all of the details that
we have.
So I'm going to give this a width of match parent and the height of content.
So again, it should only take the height that it really requires and the entire width of the screen.
Now on top of that, I want to add more settings here.
First of all, a margin of 16 density pixels towards all directions and an orientation, because otherwise
you can see we get an error here.
There's just a red icon, which says that our linear layout doesn't have an orientation, so it doesn't
know how to treat the orientation of the inner linear layout.
So once you're using multiple linear layouts, you need to set up the orientation.
And here I also want it to be vertical, so I want items to be stacked on top of each other.
And that's what this linear layout allows us to do.
Now, inside of this linear layout, I want to have a text view and me just copy this text you hear.
And put it in there.
So now, instead of saying quiz app, it should say who will come?
OK, so it should also wrap its contents in terms of height and match apparent in terms of width, and
what I want for this text to do is I want it to be centered as well, you can see here on the right
hand side.
It's also changed the text color of it.
So here text color will not be white, but I'm going to hard code a color here, so I'm going to use
three six three eight four three and you can of course, use a different color, but it's going to be
this gray that you see here.
So now we have this welcome text for our text view and the text is centered, so the gravity is towards
the center.
That's changed to size to 30, so it should be a little bigger.
And then we can go to our next text view, which for a C here says, please enter your name.
So we have this welcome now.
Now, let's add more items in there.
So first of all, I'm just going to copy this text view and then it will match apparent content.
The text should be, please enter your name, and then I'm going to use the text color of seven a eighty
eighty nine.
And of course, you can use a different one if you want to.
But this is going to be this like great that you can see here on the left hand side, and you can just
choose a color from here by using the selector, which is pretty useful.
So now we have the text size, color and text.
It should also be gravitated towards the center and.
If you look at it, it's pretty close together, so I would like there to be a little bit of distance
so we can just add a margin here towards top, so margin top of 16 density pixels.
This will give us a little bit of distance between those two items you can see now.
There's just white space.
And this is also what we want here.
You see, there's a distance of 16 dpi roughly.
And then next will come and text entry field.
And in order to get such a text entry field, we can use to text input.
So text input.
Layouts.
OK, so here it is, this text input, a layout which in turn has an app composite added text.
So that's just how it's done, and you just have to follow along like this if you want to use it.
So let's see.
So first of all, you have this text input layout, which is inside of the material library and then
on their text field.
So I'm going to match the parent and rap content and then inside of it, we need to add an app.
Comput.
Add added text.
So this will be the actual edit text where we can then, well, enter stuff.
So let's match the parent and draw up the content in terms of width and height here.
And then we need to add some more settings for this at its text.
And, of course, also for the input layout and so forth.
But generally speaking, this is how the result currently is looking like.
You see, we have this welcome.
Please enter your name then to text input field.
So let's design those a little bit.
First of all, I'm going to add some settings here to my text input layout, where I'm going to define
a style and the style should be the outline in box.
So this this text input, a layout outline box.
This one here.
So this will give it a different style.
You see, now it is white and it's just generally a different style.
And there's also the style that I'm using here.
You see the has an outline and then it's a box.
So that's what we achieve by using this line here.
And now I'm just going to give it a little bit of margin towards the top.
So margin top of, let's say, 20 density pixels.
So it's not going to be glued to please enter your name.
So also a little bit of distance, a little more than we had before, even.
OK, so now let's style or set the settings for our app compat at its text.
So here I can use the property hint to say what the user should enter.
So you know this which says name so here, for example, enter your name.
Well, guess what?
You should enter your name.
So a hint could be John or something like that.
So, e.g. John.
OK.
So what would be the name that you need to enter?
Well, something like John or whatever, then the input type.
And here you can see there are different types of settings that you have here.
So if you define the input type, you will limit the user's options what he can actually enter.
So if the input type is data, then the user can only enter dates.
If it's a number, he cannot enter letters, for example, and so forth.
So I'm going to use text cap words here.
So this will limit us to use text in terms of words, and then let's give it a text color that will
be slightly different as well.
So I'm going to use three, six, three, a 43.
We had to use this color before, which is the one that we use here for our first text view, which
says, welcome.
OK, so now let's also change the text color hint.
So here, for example, this e.g. John, you can change that as well, and I'm going to hardcoded to
seven a eighty eighty nine.
Of course, you can create separate colours for this as well in the colours file, but I think this
will do the trick.
And by the way, if you were wondering about anything that I'm using here, feel free to just hover
over the property and you will find more details.
So here, for example, the type of data being placed in a text field used to help an input method to
decide how to let the user enter text.
And then you can see the values they daytime.
None, no, no decibel and so forth.
And if you want to know even more about it, definitely just check them out in the documentation.
So here, for example, if you search for input type, then you will find all kinds of information,
you see there's a lot of details that you can find about it and type time, variation time and so forth.
So there's really a lot going on here.
But you can just read through it step by step to get a better idea of what it actually does for you.
OK, so now that we have that out of the way, let's get back to the project and I see here that this
looks already pretty good.
It's not positioned correctly yet, which means we need to change something on the top level.
And also, we don't have the start button yet.
So let's add this button and it's still in this linear layout, right?
So we add this new button here, which matches the parents and wraps the content.
So again, I want it to be as wide as the screen and only be as high as the content that it needs to
display.
Not more than that.
So here, let's close this button.
And by the way, you can either use to greater then sign it and the button will be closed.
And then you can add something inside of the button, which we don't do in this case, or you can just
close it with the slash created and sign.
So now you can set up the settings for your button directly here, and I'm going to set up 16 dpi for
the margin top here.
And then I'm going to give this button a background and I'm going to use the primary color and here
designed default color primary, which will be this purple that you can see here.
So if you wanted to use a different color, of course you can do so.
OK, and here are the different colors which we have in our values XML and I'm just going to use the
purple one.
You can, of course, use any color you want, and to text for this button should say start and then
accordingly, text color itself.
I want to be white.
OK, so let's make this on white as well here.
The text size, let's define it as 18 ESP.
Now let's look at it, and we can see this is the button that we get to the general, oh well, general
view that we get.
So here this is our card view where items are on top of each other, which is why we are using a linear
layout.
OK, so here you see, the card view has a linear layout inside of it, which is oriented vertically
where items are on top of each other.
OK, so now that we have all of those buttons, let's make some changes to our card view, as well as
to the top linear layout, which apparently doesn't want to display everything in the format that we
want.
That is because we don't have the gravity set up yet.
So I want the gravity to be at the center, which will now make sure that everything is gravitating
towards the center, which means that Quispe is not here quite close to our.
Centred.
Card for you.
Now, I want to have a little bit of distance between this text and the next item that comes after it.
And you can achieve that by just adding a margin towards the bottom so we can just go ahead and say,
OK, I want to have 30 density pixels of distance between this quiz app text and then the.
Beautiful little card for you that we have here.
So now let's change something about the card for you that I really like, and that is the corner radius.
So currently our card view is very hard Kornet.
But you see here there's a little bit of a round the corner.
OK, so in order to achieve that, you can use that card.
Corner Radius property and you can define how many density pixels the radius should be.
So the bigger this value is, the more rounded it will be.
So let's test this real quick just to see if this is going to create this around that effect.
And you see, we have this around that the fact if you were to change this to, let's say, 3D density
pixels, the rounded effect would be significantly larger, as you see here.
It's a lot more rounded, so you can really decide what you prefer.
But overall, I'd say this looks pretty close to what we had before.
Now there's one big thing that we still need to change, and that is that we still have this bar here
at the top.
How can we get rid of it?
Well, we can go to our styles.
And we had our theme here.
And there we can define a setting.
So this is the the style that we're using right there, no action bar style.
Which was called my quiz app.
That's the name of our style here, and we can add an item which has the name of Android window full
screen, and we set the value to true.
Now, if a rerun the application, we will see that now the top bar is gone.
So now the status bar is gone entirely.
And this is how you achieve it.
So this is the theme that we are using in the Android Manifest, right?
You have defined the theme here as the style for the entire application.
And then we just did once and it's done throughout the entire app.
OK, so that's pretty much it for this video.
I hope you tried to create some of this UI yourself and you generated your own style, so to speak.
And yeah, let's keep on building the app up in the next video where we're going to create the question
model and prepared to question.