Welcome back and this video, we are going to build this screen that you can see here where we have
this little text here and another text, another text, an edited text and a button here, which is
inside of a cart view.
So this part here, which is white, this white background is a cart view.
So at this point, I think you should be able to build this.
Are yourself at least try to build it, give it a try, post the video and and try to build this yourself.
And then, of course, you can check out the video, how I have done it.
All right.
So I hope you tried it.
Of course, you would need this background image here and the color.
So that's something that you could have gotten from the project itself.
Or, of course, you could have used another image as the background.
But generally speaking, the rest should be something that we have seen already multiple times.
So let's just build that inside of our activity.
So something that I didn't tell you and that was on purpose is that I don't want to use a constraint
layout because everything in our UI is built on top of each other.
And that's why I think it is much easier to use a linear layout here.
Of course, you could have used a constraint layout and drag all of the UI elements that you need inside
of this view.
But I personally really prefer the code because you are much precise or this way.
And let's go ahead and use a linear layout here.
And then, of course, we need to adjust some settings here for this linear layout, so I'm going to
set the gravity to center so that everything is centered.
On a horizontal wait, and then I'm going to set the orientation itself.
Vertical so that everything is on top of each other.
So now if I go ahead and duplicate this TextView, then I will just have to tuck text use, which are
top of each other, as you can see here.
All right.
So that's what we get through using a linear layout where the orientation is vertical.
Now, as the background of this, I want to use a beautiful image.
And you could have downloaded this image from the course.
So I'm also going to just pasted into the drawable folder.
All right.
Now let's see how it's going to look.
And actually, I haven't set that up yet.
So here.
That's going to be had trouble, I CBG, that's the one.
Now let's look at it.
And we could see we have the background already.
And then I want to use this quiz app text or have this quiz app text there, so let's implement that.
It's going to be a text bill that's going to match the parents in terms of it's with the content in
terms of its height, and I'm going to give it an ID so that I can talk to it if necessary.
So here I'd had I'd TV on the score app underscore name.
So TV standing for takes to you then, I don't need to have all of these constraint elements because
we're not using a constraint layout, so let's get rid of all of them as the text.
I would like to use something like quiz app.
Then I want to have a little more layered margin bottom, so some space towards the bottom of, let's
say, 30 density pixels.
As the text says, I'm going to use 25, so 25 aspy.
Then the textile should be bold, so you can also see that this text is.
Pretty bold here, and as the text color, I'm going to use white, so text color is going to be at
Android Kolan color
slash white.
All right, let's look at it right now, just going to be this text here and yes, you can see it's
not centered, so I would like to center it.
How do I do that?
Well, I used to gravity here.
So here, Androes Gravity Center, let's look at it again.
And now the text is centered underneath it.
I would like to have this card view.
As you can see, there are multiple different elements inside of this card view, for example.
Welcome.
Please enter your name.
So text you text you add a text on button.
So let's get rid of this text you here and instead had a cart view in there.
And that one is from Android X widget.
CAVU.
Here, the width should be match parent, so it should take the whole width and to height should be
Øvrebø content, so it should only take as much as it requires, then I'm going to assign some more
settings in here.
So, for example, I want to have a little margin towards the top.
And I get that by using margin start here, I'm going to say it should be 20 density pixels then also
some margin towards the end, which will be 20 density pixels.
So it will be was the right hand side.
And then I'm going to set the background to a white color as well.
So here.
And draw it color.
White.
Now, what you also can see here is that this cart has rounded corners and that there is a little bit
of shadow that this car creates, you can barely see it.
But still, if it's not there, you will see the difference.
So currently the cart is empty.
That's why we cannot really see it.
But let's add.
The card corner radius in here, which I'm going to set to air density pixels and the card elevation,
which will create this shadow of five density pixels.
Now, let's fill this with some values in there.
So I want to have text's on top of each other, as you can see here.
So I will need a linear layout with the orientation being vertical.
So let's create that linear layout with the width of each parent, with the height of prep content,
with the orientation of vertical and the heading, because I want to have some space.
Inside, so a little bit of padding of 16 density pixels now in here, I would like to have text use.
So let's go ahead and create a TextView here.
Which has a whiff of apparent, a height of rap content, so you can see most of the times like this.
Rep content and then.
Some more settings here, for example, the gravity should be that it's centered, so the text should
be centered, the text should be something like welcome, so.
Going to set out to welcome the text color and here I'm going to use a color three six three, a four
three.
And it will be this light gray color here, or maybe even dark gray, actually dark gray color and the
text size is going to be rather big.
So 30 espie here.
All right.
So let's look at it.
This is our card.
So we have a little, well, context in there, which is to start great and we can unfortunately not
really see the shadow that we create and we can also not see that it is around that.
So if we test our application, then we will see it.
OK, but first, let's add the other elements in there as well, so that is one of the texts and it's
not completely done.
So I'm going to set the textile to Bolt as well here so that it's thick and white.
All right, now let's copy this text view and paste it just underneath it.
It's going to be pretty much the same TextView here.
And then we have one minor change here to make, and that is to please enter your name and then maybe
also the color.
So I'm going to use a slightly different color here.
I'm going to use seven eight eight zero nine, which is a lighter gray.
As you can see, the text size should be significantly smaller.
So when we look at the example here, you can see this text is significantly smaller than the other
one and it's also not bold.
So let's get rid of that as well.
And now let's look at it again, see, welcome.
Please enter your name so we can see that quite well already.
So the next thing we need to add is an added text or justice field here now in order to use it in the
right format and right style that I want to have, I'm going to have to use something from the material
design, and that is a text input layout.
So text input layout.
And you could see it's the second one in my case.
The width should be much apparent again.
The height should be of rep content.
And then.
I'm going to.
Set up some more things in here, so I'm going to give this a little margin towards the top so that
there is some space in between this field and the text views that we have there.
And then I'm going to give it a style so there are multiple different styles that you can assign to
such a text input layout, and I'm just going to use the style which is going to be had style.
Widget material components.
That text input.
That then you can see there are multiple options here.
Unfortunately, they are too far off, so let me see it like this outlined box is what I want to use.
So it's this one.
So if we check that out, we can not see anything in there yet because we don't have an actual added
text in there.
So this text input layout is just preparation for our actual at a text.
Now, the thing is, I could of course, use to edit text, but I want to use the app compared to text,
which will work on all the versions just the same way as well.
So that means compatibility.
So it's going to be compatible to all the versions as well.
So it's going to just adjust according to the version that the user has installed on his phone.
So the Android version right here, the with will be apparent again.
The height will be Repp content and then what we need to set up.
Here's a hint, so I'm going to assign a hint to be named at this point, we should be able to see something
once we close this bracket here.
We should see that here has this expert added text that isn't there.
Unfortunately, we don't see the hint yet that something that we would see once we run the application.
Now, as the text color, I would like to use the same text color that we had here, this dark text
color.
For my edit text, so here, text color will be hash three six three, a four three and then has the
text color of the hint so you can even define that.
I want to have this lighter colored up.
We had it.
So this one here.
Let's now at the final part of this UI, and that is the button, so let me create a button down here
inside of this linear layout at the very bottom.
And we, of course, need to define this button.
So I'm going to give it an ID so that we can communicate with it.
And I'm just going to call this one button start and then the layout with and height.
We'll be.
Much power and for the width and layout height.
Will be content.
So it's going to spin over the whole with, as this button does so inside of its parent, it's going
to spend whole with here.
Then, as you can see as well, it has a little margin towards top, I'm going to assign 16 density
pixels here, which is this distance between those two elements here, because otherwise it would be
too close to each other.
And then I'm going to assign a little background color, which will be the color that we have in our
primary colors.
So color primary.
And finally, the text of it should be start.
Now, let's run this and then make some adjustments on the way.
All right, so there we are, it's almost the same.
There are some minor changes here.
You can see that this background is a little different and then the color of the star text is a little
different, the size of it as well.
So let's define another text size here, which will be.
18 ASPE and text color, which will be white, so I'm just going to use Android.
Color slash white.
All right, let's run it again just to see the changes.
And you can see now the Texas white and it's a lot bigger and we're almost having the same kind of effects
that we had in our other example.
But what you can also see is that the whole UI pops towards the top.
Once we click onto our added text here, you can see because the keyboard comes up and that is due to
our settings and the manifest where we set the window, soft input mode to adjust resize.
All right, coming back to our activity now, of course, you can play around with all the values and
hear our CAJ view that we're using.
For example, here, the corner radius, you can see it said to eight density pixels.
So let's say we set up to 50 density pixels.
Let's have a look at how our UI will look.
You can see it's significantly more rounded.
All right, so this is the radius that you can assign here, and I had it at eight density pixel.
All right.
So I think at this point, we have a great UI from which we can go to the next screen.
And once we click to start button, we should go over to the next screen.
There's one last thing that I would like to add, though, and that is to get rid of our bar there at
the bottom, at the top, this status bar.
So if you want to get rid of the status bar in your application, because it has its advantages, of
course, but in some cases it really just doesn't make the app look as good as it could look.
Then you can go to the activity settings here in uncreate and set up your window dot décor, view dot
sys UI visibility and set that you view dot system.
And here's you need to import a view.
So let's do that real quick import.
And here it's going to be that system, Yui flag fullscreen.
Now, let's test it again.
And you can see there at the top, the system UI has gone.
All right, so I hope you managed to build at least some parts of this, you are yourself, and the
next year we're going to set up the model and a bunch of other things that are required for this application.
So see you there.