Welcome back.
In this video, we are going to set up this activity here, our quiz activity quiz questions activity
to be precise, and it's going to have the functionality where we can select one of the options and
it will have a different appearance once we selected it.
As you can see, there is a stroke here which has a different color surrounding this text you and it's
a lot thicker.
So what we will need to do is to also reset that for all of the buttons or in this case it's text use,
but then set it for the one that we click on because we don't want them to stay all active, so to speak,
after we clicked on another one, for example, if we change our mind.
In order to create this functionality, we need to, first of all, create such a background color or
such a drawable for our button, so we had this default option border, but now we also want to have
a selected option border.
So very similar to what we have here.
So we can just go ahead and copy that and then we can name it Selected Option Border.
And here we need to make a minor change, so here to color will be colored primary, that one here.
And then we could, of course, also change to with, but maybe it doesn't make sense or it really depends
on how what you prefer, but I think for now this is going to be fine.
So now we just changed the color for the selected option and now we can go ahead and use that.
So let's go back to our quiz questions activity.
And here we are going to require several variables.
For example, we need to know which question we currently.
Our ads, then the questions list and then which option is selected.
So these are very important variables.
If we look at it, you can see the question.
Well, in our case, it's always the same question.
So it wouldn't be that much of a problem here.
But still, if you each time have different questions, then you, of course, need to take care of
that.
Then we need to know the questions list in order to have the questions in general so to even know which
questions we should position at the right spot.
And then, of course, the options that we have here as well as the selected option.
All right.
And the questions list will, of course, contain the information about the different options, because
a list of questions is a list of our model that we created.
So of objects of this model that we created, which is called question, as you might recall, which
has the question, but also all of the options, the image and the correct answer.
No.
All right.
So let's go ahead and create those variables first.
So private variable, which I'm going to call my current position, which is going to be an integer
and I'm going to assign one to it, because each time we get to this activity, we should start with
the first question.
Then I'm going to have a variable for the questions list, which will just be an array list of questions.
So of our question object that we created.
And for now, I'm just going to set that to now because I will need to initialize it later on.
So instead of the uncreate and then private var m selected option position, so I need to know which
options the user has selected.
So for example.
This one option one option to option three, option four, so then I can go ahead and then check if
the answer is correct.
So why did I make this now?
Well, because I need to have an object that I can use in order to set this question list.
OK, so what we did before was we created this variable, but only locally.
So it was only visible inside of this uncreate.
So it's not in the scope of the whole project.
So we changed that now.
And we are going to use this same question list, which is our global variable here that we created
that we can now go ahead and use.
All right.
So this Lakeway request will not be required anymore.
And then also this part here is also something that we just created for testing purposes.
So we will need to change that, of course, as well as well as pretty much this whole part.
So we want to put that into a function which will take care of that.
OK, so we could go ahead and create a function for this, which I'm going to call set question.
And India, we're pretty much going to do the same thing as we've done here.
So let's go ahead and put that here, of course, we now need to change the variable names because we
had this global variable called my current position, as well as the questions we get them from our
question list.
So.
Here, we're just going to say my question is a list, and by the way, we assign it here, I'm questions
a list.
Get the, um, current position, minus one, so it's pretty much the same code that we had before.
And here we can also directly use the approach as you can see it, so you don't need to use to get function
here.
All right.
And then, of course, the progress bar should be at the M current position, because now we're not
using the local variable that we had before, but we're using this global one, which we have here.
All right, this one, of course, will also be the current position accordingly.
All right, the risk and stayed the same for now.
And of course, we need to go ahead and call this questions, more questions method here in uncreate.
All right, the next thing that we need is a function which will take care of assigning the default
layout for our buttons, which they have by default when we get to the screen.
So we could either go ahead and start with defining the color here or defining this background that
we used for the selected button.
But the thing is, each time that we click this button or click on any of the buttons, we also need
to make sure that all the others are default.
So what we can do is we can make them all default and then change to one that we have selected in order
to do so.
I think it makes sense to start with the function that makes them look default first, and that will
make more sense once we do that.
So private function default options view should be.
Well, options, a list of text use, so you can see we can even create array lists of UI elements or
a few elements as this text you is one.
So what I want to have is the different options that we had and the different options are our text use
here to text you.
Option one takes the option to and so forth.
So what I'm going to do is I'm going to assign them to my options, a realist by saying ADD and then
I'm going to assign an index and this one will be TV on the score option.
Underscore one then options at.
One TV on the score, option two and so forth.
All right, so we need to add all of the options that we have here.
And as it is with a race, we start at zero, so with a realist's, we start counting at zero and our
chance at three TV on the score option for.
All right, now we can go through a follow up or create a follow up, which will go through all of the
different options and which will assign the default user interface or the default UI for our button,
which is the default.
Drawable that will create so this default option border, which was just as white for slightly grey
border, which surrounds the patents.
OK, so let's do that, let's run through a follow up for option and options, I want to go ahead and
set the text color to be colors or color, dot parse color.
And it should be the great color that it was by default, so it's not in here, it's actually in our.
Activity quiz colors, so here we had this color here, which is.
This great color.
So I want to use this same color.
Here.
All right, so this is the default color, if you look at the button, you can see that this is the
default color for the text and we want to set that because you can see when it selected the color is
not the default color anymore, but it's this black.
All right.
So we need to make sure that we set that accordingly.
Then another thing that I want to set is the typeface.
So option that type face is going to be typeface, dot default.
So what is this typeface?
And I need to type it correctly here like this, so the typeface set the typeface and style in which
the text should be displayed.
So we just said it back to the default typeface or the default appearance, so to speak.
And right then I need to assign a background for my option, so option background and what is this background?
Well, it's our drawable that we created, which is this default option border B.G. in order to set
such a border, PJI in this case, so such an XML file, we can use the following approach.
So context comput, get drawable.
And then we need to pass in the context, which is this so in this class and then the drawable that
we want to use and it's in our resources folder.
So we use are then we get it by going to the Dropbox folder.
So you can see here it's inside the drawable folder.
And in there we have a file called Default Option Border B.G. That's the file that we created.
So this one here.
So we just assign it for that now.
All right, and that's already it for our default option to you.
Now, the thing is, each time we set a new question, what we also should do, we should set the default
options to you just to make sure that all the buttons are back to the default appearance before we then
later on select one of them by clicking on them, for example.
Now, of course, all of our buttons should have an on click listener so that we can click on them.
So I'm just going to say TV option one DOT set on Click Listener and I'm going to assign this to it.
Then TV option to should also have an on click listener.
Which I'm going to assign this to and so forth.
Now you can see that this is not accepted here, and that is because our class, our quiz questions
activity is not a click listener.
So we can get that by using the following line in a second.
So let me just finish that on Click Listener for all of our four buttons and then I make this class
and click listener.
So on Click Listener.
So now you can see once you do that, the class is complaining because you need to implement the members.
So we need to implement this member, which is the unclick method.
So let's implement that.
And you can see now we have this unclick method here, which we can now define.
So what do we want to do once the user clicks on the button?
Well, we want to select it can see we want to make it selected as we have it here.
So it should have a another color for the text, then?
It should have another color for the background, which is our other our dot drawable.
So it's just this other.
XML file that we prepared or so we could, of course, do that in the unclick each time, but we can
also prepare and function, which is going to take care of that.
And I'm just going to call this function selected option view.
So let's go ahead and create that private fund selected option view, which needs to have a text view.
So text view and then the selected.
Option number.
Which is of type integer.
All right, so we need to know which option was selected in order to do the right thing.
All right.
So here, first of all, what we will do is set the default options for you so we reset everything to
the default.
Once I click on something you can see.
This one is reset.
So Armenia, for example, this button is reset to the default view.
And this Australia also is for a short moment, still default.
But just a second later than we said this design that we had set before.
So now we pretty much need to assign that this button that we currently have clicked on is going to
be our selected options position.
So the selected option.
This one here selected option number is going to be our new selected option position, and then the
next thing we need to do is similar to what we have done here, where we assign the typeface and everything.
All right.
But this time it's not for the option itself, but it's for the text view that we are looking at.
OK, so let me copy that.
And put that in here, because now it's not the option, as I said, but it's the text view that is
passed to this function.
OK, so.
There we are again and TV now, of course, I want to use a different color here, so I'm just going
to use three, six, three, a four or three, which is also this black color, which or dark gray color,
which we have used before.
So but as I said, the color of our text and then the typeface in order to change the typeface, you
can do it the following way.
So you can say that you want to set the typeface by saying which typeface here and how you want to set
it typeface.
Thought bold, so I want to make the text bold, so that's how I can do it.
And then the background, of course, is now not our default option supporter, but our selected options
border, which is this XML file that we prepared, which has this purple border or purple stroke which
surrounds it.
All right.
Now, there is just one thing left, and that is to use this function and we're going to use it in the
unclick here so we can use a one here when we don't hide.
Is our dot eyed dot TV underscore option one?
What shall we execute in that case?
Well, I'm just going to say selected option view is going to be our V.
And then we also need to say, which is the selected option number and it's going to be one.
Now, our view is a view, but we actually expect TextView here.
So actually what we can say that it's our TV option one.
Which is, of course, this text you hear.
So we can directly pass a whole texte to a function which we then can use, OK, and that's what we
do here.
So now we call this function that we created.
We pass in TV option one, which is this TextView that was required, and then we pass in the number
in this case, number one, because it's option one here as the second option number.
And then it goes through this process here.
So it says, OK, let's reset all the buttons, then select the or use the option that was used.
So in this case, one has the selected option position, then select the TV text color to be this dark
gray color, said the text to bolt and set the background or the border of the button to be this extra
drawable that we created.
And of course, we need to do the same thing for all the other buttons as well.
So here we go ahead and say, what if it's our dot I.D. dot TV option too.
So if the second option was clicked, then I want to also call the selected option view press and TV
option two and pass in the value to us to select an option here.
And, of course, for the other buttons as well.
So TV underscore option three, when that one is clicked, then we also want to say selected option
view TV option three and devalues three.
And finally, the last button, which is our DOT I.D., the TV option four and one that is clicked.
We select option view TV option four come off four.
So this is just another way of doing it, as we would have done in our uncreate, where we could have
said to unclick click listener and implement the code directly here.
That would have been an option.
But as you can see, there is another option to use buttons and that's to set the click listener Indian
create make the class itself, follow the structure of an unclick listener and implement the on click
event here.
So what we're doing here is we are implementing the on Click Listener to our class quiz questions activity.
And at this point we can test it and we will see that we get the same functionality as in the demo that
I've shown you before.
All right, let's test it.
Start and then let's click on the buttons on, as you can see, they are beautifully set to default
and then also the one that we click on is highlighted.
All right, perfect.
So we have prepared the buttons, but we also have prepared selected options.
And the question.
So we went a little further and that's what we're going to keep on improving in the next video, because
the submit button, of course, doesn't do anything yet.
And that's what we, of course, still need.
So see you in the next video.