All right, and underneath, we have four times this text you.
So this is not a button, this is a text to you.
So let's go ahead and use text use here.
And I'm just going to post them in here because they all look the same and I'm going to go through one
of them.
For you to see so it has to be in between those two closing linear layout brackets because it's underneath
this linear layout, but it's inside the greater linear layout, which is our second highest parent,
so to speak.
All right.
So let me put that in there.
So what I want to use are for text use, and they are all the same.
Pretty much the only difference is, of course, the text that they will display and the idea that they
have.
All right.
So the idea and this one is TV option one, TextView option one, they're going to match the parent
in with use only the height that they need.
The margin should be 10 density pixels so that they are slightly apart from each other.
Then I'm using a default option for the background.
So what this is is going to be my own trouble resource.
So let me create this file by hovering over it.
So what you can just do is you can set the background as at drawable and then just create a name that
you have not created as a drawable yet and then hover over it to create this resource file.
And then you can just leave the default and we're going to implement this file right now.
So what I want to have is a shape.
So basically, I want to shape my text views so that they appear like buttons.
And you can do that with the power of XML.
So you can pretty much create a very own design by using XML files.
All right.
And what I need in here is to assign the right shape to it.
So here I'm going to say that it's going to have the shape of a rectangle.
So this text we hear is a rectangle.
It has a certain background, which is white, as you can see, and then it has this little gray stroke
that surrounds it.
So what we need to do is we need to create all of that.
We need to say, OK, I want to have a stroke surrounding it.
I want to have a solid background color.
And I want to have rounded corners because you can see even those rectangular, it has rounded corners
here.
So let's do it one by one.
Let's create the stroke first.
So I want to create a stroke in here and the stroke will have a certain with and I'm going to say it's
just one density pixel thick.
So it's a super thin stroke.
And then I want to define the color, which will be a very light gray.
So it's going to be 1888.
So this is going to be, as I said, a super light gray.
And then I want to have a white background color.
So if you want to have a background color, you use solid here because it's a solid background color,
which is part of the shape.
So here I'm going to use an Android color slash white.
And then finally, as I said, I want to have rounded corners, so I'm just going to say the corners
should have a radius of five density pixels and that will then create this rounded corner shape that
we have here.
All right, so this is going to be how this shape allows our text you to look like.
So going back to our activity quiz questions ximo now the error disappeared and it accepts this background
here.
So you can see there are our buttons and they are rounded and they have a white background and a gray
stroke that surrounds them.
Then I sent her to text, so I'm setting the gravity center so that the text is centered inside of the
text TextView or button, whatever you want to call it, even though it's not really a button.
I have padding so that it makes the whole button bigger.
So this padding is taking care of this distance between the text itself and the.
Stroke that surrounds it.
So here it's 15 density pixels between Argentina.
So this text and the stroke towards the bottom and towards the top.
And then we set the text color to be grey and text size to be 18.
And of course, the text in the tools would just be, in this case, Apple and the second entry, the
Google and so forth.
So you can see they are all the same.
The only difference is this tool's text.
And by the way, Tool's it's just for us to see it in this design overview here.
So if we want to look at it and see it here, so it's just to see it inside of our idea, it's not going
to be visible in the application itself during runtime.
And then, of course, they have different ideas.
So one of them is to option two, TV option three and TV option for.
OK, so now there is one last element to be added, and that is this submit button here at the bottom.
So let's go ahead and add that there as well.
It's inside of this linear layout and it's just a regular button this time.
So we're not only using text use as buttons, but you can see the possibilities are limitless.
You have a lot of options how you can do that.
All right.
So Ledwith, it's going to be much parents and the height will be content.
So we've seen that multiple times before.
And then what's important for buttons is that they get an I.D. because we want to be able to click on
them.
So submit should be the ID.
And then we need to define the layered margin so that we have a little bit of distance towards all directions,
then the background, and I'm going to use the color primary that we have.
OK, so it's this purple color.
Then the text should be submit.
The text color should be white, so if we look at it currently, the Texas white and as you can see,
it's also bold.
So let's make it bold as well.
It's a little bigger than this text, for example.
So it's 18 Espie.
So the color will be Android.
Color white and the text size will be 18 Espie, as well as the textile will be pulled.
And at this point, the colors, they don't look like the colors here, so in our app, if we run it,
they don't look the same.
We don't have those exact colors.
So let's change those as well.
And we can do that in the colors XML.
So it's inside of your resources folder, then values and then colors, for example.
So the colors that I want to use are nine zero one three Effy for the color primary color, primary
dark six A.
One B, nine A.
And colour accent will be the same as our color primary, even though we're not really using it, but
in some cases internally, this color will still be used, so.
That will be important.
And before running it, I'm, of course, missing something in the color here.
So when creating a color inside of your default option, border, big smell or in general and using
examples, you, of course, need to have the hash tag at the beginning of the color name.
All right.
So let's go ahead and run it again.
OK, so there we are.
So you can see the hint now also has the right color.
So that was an arrow before or a mistake that I had in there yet.
And we are.
So you can see, of course, that the text is not really filled yet.
So it doesn't display anything.
But other than that, we can see that our UI is there.
Of course, the texts are still missing.
And of course, we have to assign all of those values in our quiz questions activity so we get the data
from our questions list.
So please go ahead and try to assign all of those values so post video and try to assign the relevant
information onto relevant values.
So for the progress bar, the TV programs, the questions, the options, everything.
Quick hint, you will need to have the current position, but you're looking at.
All right, so I hope you tried it so well, current position, it's going to be one.
So we started one.
The first question and then the question that we're currently looking at will be of type question nullable,
which we assign to questions list at the current position, minus one.
So why they use minus one here?
Well, that's because.
The current position is set to one because that's how we named our Constance.
So the first question, we give it the idea of one, but internally, this is the zeroth index.
So it has an index of zero inside of this array list because, as you know, I really start counting
at zero.
So that's why we need to use the current position minus one here in order to get zero as the first entry
of our questions list.
And then at that point, we can just go ahead and assign the progress bar.
So we're just going to say progress, Pardot progress is going to be the current position.
So it's going to be our.
Progress bar here at the top, we call it progress bar, so we gave it the ID Progress Bar, so I'm
just accessing this thing here and I'm assigning the progress one.
And then TV underscore progress, the text should be our current position, plus slash and the progress
bar, maximum social progress bar get maximum.
Or get Max and I will actually just be Max.
And then accordingly, we need to set the text of the question so to the question, what the text is
equal to question?
That question.
So the question is the current question that we're looking at and every single question object has a
question string.
OK, so not to confuse you, but that's how we called them here, then we need to set the image of Ivy,
this underscore image, that such image resource and that one will be question that image.
So that's how we can set the imagery.
I think that was the most difficult part of trying this little exercise, then we have to underscore
option one, option two and so forth, and we need to assign texts to them.
So text of the TV option one will be question thought, option one and so forth.
All right.
So.
Let me post them in here.
And there we are.
OK, so at this point, we can run the code again and see if.
Everything will be populated accordingly.
All right, so let me enter my name.
And we are so what country does this flag belong to?
We have Argentina or the Argentinean flag, we have our progress bar, which is said to one because
we are at the first question.
Then we have all of the four possible answers, as you can see, in the same style and then at the bottom
with the submit button.
All right, we covered a lot this video, and we finally brought everything together, so we brought
the model that we prepared and the UI together to display what you see here.
And that is super powerful.
So what's happening here is really powerful.
And it's also very important approach that you will need many, many different times.
So using objects is very strong and very powerful.
So that's what we're doing here.
This is the model that we created and now we use this model over and over again.
And that is a big part of object oriented programming.
All right.
I'd say let's move on to the next video.