Welcome back.
And this and the next video, I would like to set up the screen here where we have a text view at the
top than an image view than we have this progress bar with another text you.
So this whole thing has to be a linear layout where items are next to each other.
And then we have four buttons, which are not buttons.
I'm using text use here, which will be treated like buttons in the sense that we can click on them.
So here, for example, you can see then they are selected, and then we have this actual button at
the bottom.
You could see I can scroll here because this entire surrounding view is going to be a scroll view.
OK, so everything that we have inside of the screen is inside of this scroll view so that we can have
as many items as we want, as long as well, we can scroll, that is going to be fine.
So let's go ahead and implement that.
And you can, of course, try to build that by yourself.
I told you the names of everything that you need to use, so you could really just try and build this.
It won't be easy, but if you give it some time, you will be able to build this and this will really
catapult your knowledge of excel and how to create a UI dramatically.
OK, so let's get started.
First of all, this is our activity quiz questions excel file that I want to jump over to.
So this one here?
And as I stated, this will be a scroll view.
OK, so lets you scroll view here and then I want to make sure that my scroll view is going to fill
the entire viewport.
So I will set the property fill viewport true.
OK, so inside of the scroll view, that's where I'm going to have a linear layout, where items are
going to be on top of each other.
So it's basically going to be the same thing as we've seen before, where we just have a linear layout
that then has everything else inside of it.
OK, so this linear layout here.
I'm going to match parent in terms of with so the entire screen with and then it's going to wrap the
content, so it's only going to take as much space as it requires.
On top of that, I want to make sure that everything is centered so the gravity will be towards the
center and the orientation will be vertical.
So items are going to be on top of each other.
And then finally, I will add a little bit of padding on the highest level so that everything is a little
lower, has a little bit of distance to the board or to the edge of the screen.
OK, so inside of here, I will then have a text view and this text view will match apparent in terms
of with and content in terms of height.
And I'm going to give it an idea because I want to be able to access this texture.
So I'm going to call the TV question.
OK, so what else do I want to have for this text you?
Well, a little bit of margin towards all the of 10 density pixels, then it should have the text in
the center.
So I'm going to gravitate to the text to the center.
So if you look at it, the question is in the center, right?
So let's gravitate towards the center.
We, of course, need to override the default text size to twenty two.
For example, you can of course, use your own values here, and the text color will be the grayish
color that we used before.
So six, three, three, a 43.
And finally, for my tools, so only for the designer here, for example.
So you see, there is no text here in the designer, and I'm going to set text for the designer only.
So this text will not appear when we are actually running the application.
This will only appear in my tools.
So here what?
Country, does this flag belong to?
And then that's pretty much it.
OK.
So this is going to be my main text to you, and that's the text that it will display.
So here.
What country does this flag belong to?
And it's centered or gravitated towards the center, which is exactly what I want.
It's on both sides on the linear layout side, as well as on the text that is inside of the text view
itself as well.
OK.
So then we have this image you.
All right.
So how can we create an image for you?
Well, by using the initial you tag here.
So the width will be content, so it only will be as wide as it requires, and the same goes for the
height.
So I need to have an ID here because I need to set the value.
Of course, I'm going to call this ivy on the square image I've standing for image view.
Then I'm going to add a little bit of margin towards the top.
So 16 density pixels always sounds like a good idea.
And then I can well, I will add something called content description.
So this is not something that will be displayed, but for people that cannot see, for example, there's
going to be helpful because it's going to tell them what is the content.
So this will be the image, for example.
OK, so this will be the, well, something that will be read for people that cannot see if they are
using tools that allow them to read items on the screen.
OK, and then finally, I'm going to set an image for the tools only.
So here I'm going to say that by default, I want to use the German flag here, and that is only going
to be for my designer.
So you see here we are using this German flag, but as I said, it's only for the designer.
So if we run this application, we will see that it's still going to be pretty much empty.
So you see, there's nothing in here because all of the details that we have added so far are only in
tools.
OK.
They are empty and empty items so far.
OK.
Then as you see here, we have this progress bar.
OK, so let's go ahead and create a progress bar.
Like so and with I'm going to set that to zero dpi the height.
However, I'm going to wrap its content.
So we saw earlier when we want to put something at zero dpi for any given direction, we need to give
it a weight because otherwise it will not be displaying correctly.
So I'm going to set the weights to one and then I'm going to set the maximum value to four now nine
because with nine questions and the min height.
So I'm going to say, OK, well, you should rep your content, but I want you to be at minimum, 50
density pixels.
And then there are progress.
Property is going to be set to zero.
So this progress bar you could see well has a whiff of zero right now.
And that is because I need to put it into a linear layout.
Let me add another linear layout that will be now surrounding this progress bar because I said, we
have this progress bar and then this little text view here on the side.
So we need to make sure that we use both of them.
So here to with will be much apparent and the height will be rep content, so it should only be as high
as it requires.
OK, so this will be the linear layout with the progress bar now, the linear layout, I want it to
be gravitating towards the center vertically.
OK, and a little bit of margin towards the top is also a good idea here so that it's not going to be.
Too cramped, too close together.
And then the orientation will be horizontal.
Why horizontal?
Well, because items are next to each other.
So usually we use vertical all the time where items are on top of each other.
Now this time, this progress bar and this text to you there next to each other.
So we are using the horizontal key here.
Now I'm going to set a style for this progress bar, and the style that I want to use is going to be
progress bar bar style horizontal.
Well, it seems like it's not existing.
So let me put that in here and show you how it's going to actually look like.
So there's this and there are Android attributes just as progress bar style horizontal.
OK, this attribute, which is a horizontal progress bar style, this is a horizontal progress bar.
So the progress by will not be vertical, but it will be horizontal.
So that's what we are styling here.
We're defining that's how we want it to be.
And then I'm going to use the in there terminate value of false.
So what is this?
Indeterminate allows to enable the indeterminate mode in this mode, the Progress Bar Place an infinite
looping animation.
So I don't want it to constantly animate this progress because we're not downloading anything right?
We're just fixing the progress.
So it's going to be, let's say, at one out of 10 or whatever.
OK.
And we'll see here.
Max is nine and progresses at zero.
So this is how it's going to look like right now.
But what if we change that to, let's say, five?
Then we see, OK, now it's semi done.
So the progress bar is at 50 percent, while five out of nine, not 50 percent, but it's actually something
like 65 percent or so or 56 percent.
So that's a progress bar.
And next to it, I said I would have a text you buy next to it.
I mean, of course, the item that will be right next to it because its orientation is horizontal for
the parent, the linear layout.
So the linear layout that surrounds the elements.
So here that with will be rep content and the height will also be rep content.
Now this text view.
Should be gravitating towards the center as well.
So I want to at least the text of the text, you should be gravitating towards the center.
I will add a little bit of padding so that it's going to be thicker inside.
So you can see here I wanted to be a little bit of space.
You see here, while you can't see it very well because it doesn't have a background color, but there
is some distance inside of it, which is just padding.
And then I will add a text size of 14 Aspie, as well as the text that will be displayed in the tools.
Settings will be zero out of nine, for example.
So let's see how that's going to look like, and we can see that this is it.
I can see out of nine.
OK, now let's give this TextView an idea because we will need to be able to access it later on.
So I'm going to call this one TV progress and accordingly, this progress bar itself will also need
to be able to access it.
So let's give it an idea of progress bar.
Like so.
And I've also seen the Progress Bar has a weight of one, and this text doesn't have a weight at all,
which just means that it's just going to take the rest of available while just going to take as much
space as it needs and the progress bar is going to take the rest of the space.
And you see there is an edge here, and that is because of the padding that I have added on the older
linear layout.
So these 16, as Pete, that we have here.
So if you look at the designer here.
This is the style that we are getting, so here.
What country does this belong to the flag progress bar?
That's it.
So that's it for this video and the next one, we're going to finish the.
So see you there.