Welcome back and this video, we are going to build this UI that you can see here, so we have a scroll
view.
So this whole thing is inside of a scroll.
You then we have a linear layout so that elements are put on top of each other.
And then here, those two elements here.
This is a progress bar which has a TextView next to it.
So this is another linear layout where we are using the orientation horizontal instead of vertical and
of course, these four buttons.
And then at the bottom we have one more button.
But these four buttons, by the way, they are not buttons.
They are text views.
So I'm using text use here.
So if you want to build this UI, you can do so yourself.
Of course, you may not forget that we have a text here at the top and an image view here as well.
All right, let's get started.
Let's go to our Twitter quiz question.
And as I said, this is going to be a scroll view.
So scroll view and I need to add the viewport setting.
So fill viewport.
I'm going to set that to true so that it fills the whole viewport.
So the idea is that this will still look good on super small devices and will still work on very small
screens.
Now, of course, inside of this quote, you, I have my linear layout, which has a match parent with
and a rep content height, and inside of this linear layout, we want to have all of our other elements.
So what's important for the linear layout is to know the orientation.
So let's set the orientation to vertical so that things will be on top of each other.
I want to have a little bit of padding towards all directions.
So that is visible here.
You can see there is a little distance towards all directions here, these 16 density pixels.
And then I also want to center elements.
So as you can see, they are centered here.
All of the elements, they are not push towards the left.
So in order to get there, we need to set the gravity to.
Centre.
All right, so that's our linear layout inside of this linear layout.
First of all, we had a TextView here at the top, so let's create that TextView.
Text view, which has.
A whiff of match parent and the height of prep content, and I'm going to assign an idea here so that
we can access it, so I'm going to give this idea TV question it.
OK, so that's how I'm going to call it.
Then I'm going to give it a little margin towards all directions so that it has a little distance and
that will be 10 density pixels.
I'm going to send it a text, so I'm going to get the gravity to be centered.
Then we need to have a specific text color here, the text color I'm going to use is three six three
a four three.
So at that point, you can see we reuse this text color multiple times.
So at the point you could go ahead and save that inside of your values.
Colors example.
All right.
So now would make sense at this point.
So if you want to go ahead and do that.
So text size, of course, needs to be said.
So 22 ASPE is going to be fine.
And then the text itself.
So what country?
And this is just the default text later on.
We are going to override that with the question that we have in our constants, Katie.
And it's going to be the same question, but.
Still, we still need it here.
All right, so that's our TextView.
And then underneath that, we have an image here, so we have this image here, and I'm going to create
an image of you in here, image of you with a whiff of Web content and a height of Web content.
Then margin.
Towards the top of, let's say, 16 density pixels.
A source that's the most important part, and that's actually our image that we want to use and I'm
going to use Argentina here, or you could use any color or any flag that you want to use here.
And then because we want to exercise it, we should give it an I.D., so I'm going to give it the idea
I've image because we want to change this image through quote.
And if you want to do that, we, of course, need to assign an I.D. to it so that we can access it.
All right.
The next thing that we have here is a progress bar.
So you can see this is a progress bar and then we have a text next to it.
So if you want to have both of them and you want to have them next to each other, you need to have
another linear layout.
So you can see we create a linear layout within a linear layout.
And this one will match parent in terms of with and Øvrebø content in terms of height.
And then that's going to be this linear layout which holds our progress bar and another TextView.
So I'm going to assign some more.
I had some more variables here.
So let me Santo's, real quick here, we can see we have an ID progress details of how I'm calling this
a linear layout.
We have a little margin.
I'm setting the gravity to be centered vertically.
And the orientation that's the most important part is horizontal.
So now the two elements or all elements that are inside of our linear layout will be next to each other.
So, as I said, I want to have a progress bar in there.
So let's go ahead and create a progress bar.
Now, this progress bar should have a width of zero density pixels.
And what is zero?
Why does it make sense?
Well, the thing is, we are going to use wait here.
So we're going to use to lay outweight property.
And I'm going to show you in a second.
So then the height will be Øvrebø content.
So it's only going to take its own height here.
And then you can see it's complaining.
So the width is complaining.
That's because we don't have the layout on the score weight yet and I'm going to assign one to it.
And you see the arrow disappeared.
So at this point, because there's only one element in our linear layout, it would take the whole width.
So it would take every bit of available space there.
Then I'm going to set the maximum value to ten, even though we could then, of course, access that
later on and assign the value by a code.
So if we want to access it by a code, we need to give it an ID.
So let's call this one progress bar.
I'm going to set the minimum height of it.
Two 50 density pixels, so even though it's going to rep its content, it should at least be 50 density
pixel high and then the default progress.
So the progress at the start, you can set that via the progress property.
And I'm going to set that to zero because it should start at zero and then it should fill up each time
that we get to the next question.
Then there are two more settings that I want to set for our progress bar, and one of them is to make
indeterminate faults so we can set the value to false if we want to make it a determinate progress.
So determinate mode for the progress bar when you want to show that a specific quantity of progress
has occurred.
So here, for example, you can see determinate progress bar that is 25 percent complete, so the progress
is set to 25.
So I'm going to set indeterminate to false and then finally, I want to assign a style or define a style
that I want to use, and here it's going to be Android.
And here, not the at sign, but the question mark, question mark Android attributes.
And then there is the progress bar style.
Horizontal.
So I want this to be a horizontal progress bar style.
And then on the knife, I want to have a text to you, so I'm just going to paste in the text to you
here.
And the underneath I mean, underneath the coat, even though and the visibility on The View, it will
be next to each other, so the texture will be next to the progress bar.
You can see now this is the texture that we have here and this is the progress.
So this is how the UI currently looks, because we haven't filled it up completely yet.
But you can see here that the TextView has an idea so that we can access it because we need to change
its text.
Currently, it's zero out of ten, but later on we will fill it up each time or increase the value each
time that we answer to another question.
Then we start with and height to wrap.
Content to gravity is centered.
We have a little bit of padding, 15 density pixels, so a little bit of distance there.
And the text color hint will be this great color and the text size will be 14 so that we then in the
end get this element here.
All right, and underneath, we have four times this texture here.
So this is not a button.
This is an TextView.