Welcome back in this video, we're going to finalize the why, which means we just need to have these
text views here, these four buttons or text use, I'm going to use textbooks, but they will be treated
like buttons, so to speak.
And then we have this submit button.
So let's go ahead and implement the missing pieces.
And therefore I will add a bunch of text use and then I'm going to go over what they do because as I
said, I'm going to use textbooks here and not actual buttons.
So you see, we have this scroll view in which we have a linear layout in which we have a linear layout.
So these are the closing tags, right?
And I want to add the text use underneath this linear layout, which contains the progress bar.
OK, so and what's important, it has to be in the outer parent linear layout.
So this is where I will put my text use and I will need to add the options here.
So I'm going to paste the code here and just give you and run through what's happening here.
So first of all, we need to have this text view with an ID, and I'm going to call this one TBE option
one.
Then I will need another one with option two.
So this one will be option two, then I need another one.
Option three.
And then finally option for OK.
So I have all of these options now.
And now let's run over what is actually happening here.
So first, we have the ID.
Then we say the width should be the entire with that is available for its parent.
Then it's a wrapping the content in terms of height.
There is a little bit of margin towards all directions, so distance towards all directions.
And I'm going to use this background, which will be adorable that we don't have yet, which is why
I get this error.
We're going to create it.
In a second, I centered a text, so I'm using gravity centered here, which means that the text will
now be in the center.
Then I'm adding padding, which creates this distance between the text and the edge, so to speak.
And then we have the text color, which is this light grey, as well as the text size, which is eight.
So now let's create this draw, and therefore you can hover over it.
And by the way, to create that you just need to create.
While in this case, I'm creating it for the background, which means the background property, and
I'm just saying at slash and then whatever name you give it here.
Once you do that, it will turn red and this will be an error, but you can then go ahead and hover
over it and create a drop or resource file, which will have that exact same name.
So let me just do that.
I'm going to leave it as it is.
So this just creates a new resource file for me, and you can then also look at your resources.
It will be under the Troubles folder.
So default option board object x amount.
So this file was just created for me by the IDE, so by Android Studio.
So what is it that I want to do here?
So first of all, I'm going to make it a shape.
So let's change that to shape and inside of this sheep.
I want to define what kind of shape it's actually going to have.
So the property and this has to be here inside the opening bracket.
So here I can define the shape and you see you can select line.
Oval, rectangle and ring.
And I'm going to use a rectangle.
So this will be a rectangular shape.
And then inside of this shape, I want to have a stroke.
OK, so here adding a stroke, which is just going to be a line and two stroke will have a whiff of
one density pixel and it will have a color of.
Let's use E!
Eight, eight, eight.
OK, so this is going to be my stroke, let me close that up.
So this was the stroke, which means the line and now I want to have a background and the background
should be a solid background.
So I'm just going to use the color of white.
OK, so color white.
And then I finally just need to add corners, which will allow me to have this rounded edge.
You see here, it's rounded.
OK, and that's what I want to have here, so corners with a radius of five density 50 pixels, so that's
it.
So once we have that, we go over to our questions activity XML and you see the arrows have disappeared
and we can now check out our design and we will see that it is round it.
We have this grey border as well as a white background.
So let's run this real quick just to see how this is going to look like.
OK, so let's go over to the next screen and we see here that we have our text use slash buttons.
Of course, they're empty because there's nothing in there, but we're going to set that up in this
video also so that at least it will be populated with a question.
OK, so now finally, we just need to add a button underneath all of those text views.
OK, so let's just add this button.
Which is just going to be a default button.
Let me just add it in here.
And it will be inside of the linear layout still and underneath this text, you.
So this button, I'm going to call it button submit will have a whiff of match parent height of rap
content, a margin of 10, so a little distance towards all directions.
And I want to use the primary color.
So let's see how we can get that design color primary.
So this one will be this purple color that we have.
So the naming convention has changed a little bit ever since I created this code.
So you see here, design evolved, Color Primary is working for me, but you can just use any color
you want.
And then as the text, I'm going to set that to submit all in caps.
The text color will be white, as well as the text size at ESP and the textile being bold.
So if we check it out now, we can see that we have this submit button here at the bottom, which will
then generate the button as I want to have it.
So let's look at it once it's created.
So here you see this is going to be the submit button.
All right.
So now let's populate the data, which means populate those text to use so that they are usable and
we are into questions activity there.
That's what we created this XML for.
So we need to set up all of the items that we want to access.
So all of the views, so the text views, the image, view, their progress bar, all of that needs
to be added.
OK.
Therefore, we can use find view by ID for all of them.
This will be a little bit of effort, but that's how it has to be done unless you're using view binding,
which we don't do at this point of the course, but we will be using your binding later on.
So let's set up all of the items that we need so private VAR Progress Bar, which will be of type progress
bar.
OK.
So this will be a Nullarbor.
So I'm going to assign null to it and let's check it out.
Progress Bar has been automatically added for me, so Android widget has been imported with the Progress
Bar, then I'm going to require the text of your progress.
So there's this progress bar, but also this text to you that we used as well.
So it's this little text to you.
I need to access it as well because I want to change the number that is displayed.
So let's import text you see here with all enter.
By the way, I added the text you.
And now we will need to do the same thing for the question.
So private bar TV question, which will be of type, text view, optional as well, or Nullarbor.
And then the image.
So private bar I've image.
So an image view image.
And this was an image view optional.
And I'm going to assign null to it, and we need to import image view for this as well.
So here you see, the import has been done, and now I need to have the four options.
OK, so I'm just going to copy them in here.
You see, it takes you option one, which is of Type X text you Nullarbor and Option two, option three
an option for.
So now inside of the create method, here we can set up all of the user interface items so we can just
say, OK, the progress bar can be found via its ID, so find view by ID, ODOT, ID Progress Bar.
That's how we called it the TV progress.
So the text you progress can also be found by its ID ordered ID that TVE progress.
That's how we call it.
And you can, by the way, if you don't know what that is, you could just hold the control key.
Click into it and you will see that it jumps directly to this element in the code as well.
So here is a TV progress, which is saying zero out of nine.
OK.
And accordingly, we need to do the same thing with the question.
So TBE question is going to be found by its ID, our Dot ID Dot TV on the score question.
So it's super boring, I know, but we have to do it.
And well, yeah, of course, we have to do the same thing with the image view and all of the other
views, so you can just, well, try this by yourself, just post a video and set this up with all of
the items.
All right.
So now let me do that with the TextView options as well here.
Find them by their I.D. And that will be pretty much it.
So now we have this question, right?
And before we use this log entry to see how much we have in terms of questions.
So now let's just go ahead and run through a follow-up, which will then give me the questions.
So I want to have the individual questions, and therefore we'll use this for loop, which will display
the log.
Well, I'm using the Arrow log entry, so I as information I'm going to use Arrow, which will turn
it red.
So just for you to see how it's going to look like, and I'm going to give it the tank of questions,
and then I'm going to call this I thought question or I'm going to use either question.
So what is either question?
So I is going to be the individual question inside of the questions list.
You can, of course, also give it a more descriptive name, something like question.
But then it would look like question that question.
So either way.
So this I is the individual question inside of this questions list because this questions list contains
questions, OK?
And we are getting the individual question of the question.
So the question is the object type or the data class.
And then the question is the actual question with a lower case.
Q is the actual question that we want to display.
So that's what we are going to do with this log entry here.
So for now, let's see if we get that.
So let's start it and the UI will not be updated.
But let's look at the Lock app now and search for questions.
And we will see all of the questions, so what country does this flag belong to?
What country does this flag belong to?
So not very interesting details that we get here, but the good thing is now we can go ahead and use
those questions to set them up, as well as the text you for the question that we are at.
So one question will give us the current question, which will be of type question, and I'm going to
get it for my questions list.
As we know, this questions list contains all of the different questions that we have, and we gathered
from the constants here.
So it's this questions list, right, which is in the list of individual questions, and I can now get
the current position and we get the current position, which will.
And of course, I will need this current position, so let's go ahead and create a variable called current
position, I'm going to set that to one.
It's complaining that it's over, but we're going to overwrite this and I'm going to get that minus
one.
So what does that mean?
Well, we are starting at the position one and then we're going through the individual positions now.
You could, of course, also say start with the current positions zero and then go through the questions
list like so this would work as well.
So now this will give us the individual question that we are currently looking at.
Now the question itself is cool and all we can now use it and we can assign the question to our text
you questions, right?
So here we have the question, but we can also go ahead and first of all, set the progress bar on our
progress.
Bar is another bill, so we need to add the question mark here and we set the progress of the progress
bar to be their current position.
And here you can already see why I would not like to set current position to zero.
But we will change that in a second and then we have the TV progress to display the text of the current
position.
And then a slash sign, so sheer current position.
With a slash and then there.
Progress Bar thought max value.
And the Progress Bar and Nullarbor, so need to add the question mark.
OK, so that's what they want to display here and maybe without empty spaces in between.
All right.
So that's TBE Progress Bar.
Now let's set up the question, and the question itself will be another bill or is in the bill.
So we need to set the test text with a question mark.
So here question that question.
So here we get the actual question.
Of the question object.
So let's test this for now, let's see how this is going to look like.
And we'll see what country does this flag belong to, and we see we are at zero out of nine.
So that's why I'm not happy with using the zero.
And that's why we should use the current position being one and the minus one here, which allows us
to still start a position zero.
So the array list will start at zero.
So right, it's starts counting at zero.
And we want to start with the first question, which is why we need to use current position minus one,
because current position is one and we need to pass zero here as we are starting with the first question.
So now that's the text you that we are setting up for the question, and now we need to set the text
views for all of the options.
So here question that option one.
And of course, I need to add the dots here.
And then we need to do the same thing where the option to.
So text will be question dot option to.
And so forth.
OK, so it's the same with Option three and option four, and you can see now we have all of the questions
ready.
Let's test it and see if we are going to get the actual while the actual options here.
So Argentina, Australia, Armenia, Austria and the submit button.
All right, now, the one thing that is the most interesting one I believe is missing and that is the
image.
So let me add the image here and actually let me add it all the way.
The For Progress Bar, So, Ivy, image thought, set image, and here you are.
You can find different ways of assigning an image and what is it that we have?
So do we have a bitmap?
Have we started a bitmap or have we stored an integer?
Well, we have stored an integer because if we look at our question here, the image is stored as an
entity.
OK, so we can now set the image resource with its ID. And we get it from question dot image.
So we are now accessing this image property of our question object and setting it as the image resource
for our IV image, which is our image view, which internally, if we look at it, here is this image
view, which currently has the German flag in it.
So let's run it again, and let's see if it's going to display it.
And you can see that it shows Argentina, which is exactly correct, because the first question if we
look at our constants was, in fact, the Argentinian flag.
So what country does this flag belong to?
Now we see Argentina, Australia, Armenia and Austria.
And that is our question one.
So you see, this user interface pretty much works already.
We see the question.
We see the progress bar.
We see the text.
You have the progress bar displaying the right values and we see the different options.
Of course, nothing works here.
We can click any of the text views, but that's what we're going to cover later in this section.
So see you in the next video.