Welcome back.
The result that I want to achieve in this video is going to be that we have this little border around
our buttons when we click on them, and this is going to require quite some effort because we also need
to reserve the old buttons or the other buttons that we had selected before that.
OK.
So in order to get to this point, we of course, also need to create this world disappearance for each
button.
So we need to set the style for the button that we clicked on and therefore let's go ahead and create
a new file.
And what I'm going to do is I'm going to.
Duplicate this file or I'm going to create the new, but it will really learn from this file, or it
will be pretty much the same.
So let's create a news, Roble.
And let me call this one selected option border background, so big, OK.
And we could click OK, here and now let's go out to our default options border.
Let's copy that and now go over to the selected options border and really just replace this.
The only thing that I will need to change here is going to be the color that I'm using, and the color
that I want to use for the stroke will be the color primary primary.
So the default color primary.
So there will be this purple color and you see, well, you barely see it here, but there is this purple
border that is now surrounding our entire screen.
If I make it 22 pixels, you could probably see it better or even 25 densita pixels.
Now you see that we have this purple border now, OK, but I just want it to be one density pixels,
so it's going to be super thin.
The rest stays pretty much the same.
So we just have this shape, which is rectangular.
We have the stroke, which is this fine line that surrounds it, and we have this solid color which
makes the background white, as well as this little radius, which makes the corners around it.
All right.
So that's our selected options.
Border Biggie, a big white background, and I want to be able to set it based on what we clicked on.
So in order to make things clickable, I will need to add something to our app complete activity.
And that will be that we add an on click listener here.
Like so?
So view on.
Click Listen there.
And you see I separated this.
So our quiz questions activity is still inheriting from app combat activity, but it's also implementing
the view on Click Listener.
So now it's going to allow us to click on to items inside of it, and we can now implement the members
who can see we get an error here.
What we can do is we can now hover over it and implement that on Click Method.
So you see there is this override fun on click where we get a view and then we can do something in here.
So currently there's nothing implemented yet, but we're going to change it in this video.
So first of all, we have this big code where we assign the questions, where we get the current position
and so forth.
We will need to change that because I don't want everything to be in the create method.
We will need to separate it clearly and then it will be a lot easier to read our code and understand
what's up in the code and so forth.
Therefore, what I will need to create are going to be a couple of private variables up here.
Which are going to be, for example, the current position.
So I will create it outside of any method so that I can use it in all methods inside of this class.
So I'm creating this global variable and current position so that we get the current position.
And you see we used the current position here.
We're going to have to override that and then we will need another variable and questions list.
So this one will be the array list of questions.
And we need to make it multiple at this point because we cannot sign it at the outside of any method,
we need to sign it inside of the concrete method and then we can go ahead and set up the selected option
position in the chair because we need to know which option was selected.
And by default, I'm just going to say the selected option was zero.
And we're going to override that accordingly once we click on to any of them.
So this will be a position to this will be position zero and so forth.
So we need to know which one was selected because our questions, they have this option one, option
two, option three, option four.
But then the correct answer is an integer, and we need to compare whether the selected option is the
same as the correct answer for us to know whether we were right with our selected answer or not.
OK, so now let's go ahead and create a method that will take care pretty much of all of this stuff
here.
So now we can extract it, refactor into a function.
And let's give the function a name of said question.
OK.
So this woman say private funds that question and you see it just cut out everything from it and created
this private function called said question.
So that's how you could do it, you could just right click the part that you want to extract and then
go to refactor and function, you can also use the shortcut to your control of them.
And this will then create the function and at the same time, call this function.
OK, so now we need to adjust this set question method a little bit or dysfunction.
So first of all, I'm not going to get the question this way here.
So first of all, we will need to get the questions actually inside of the concrete method.
So that's one point where I was too quick with the carpet cutting out.
So the questions list now will be a global variable, as we saw.
So we need to use this global variable that we had created up here.
OK, so we need to assign it at one point, which we now do.
OK, we assigned the questions list and now we can use it throughout our project, which means we can
use it in the six questions method, but we can also use it in other questions where we need it.
So we do need it inside of the sub questions because we need to know which question we currently are
at.
So we have this question which gets it from the questions list and let me get rid of this lock stuff
because we are not going to use the log entries.
This was just for our testing purposes.
And now, because the questions list is a Nullarbor, I need to force on it here with two exclamation
marks because I'm sure that the questions list is not going to be empty at this point.
Also, the current position we need to use to m current position position so our global variable and
assigned a value to it, even though we did already assign a value to it, we studied this one so we
can actually get rid of this set thing statement here as well, but would need to replace our current
position at the other spots where we used it.
OK, so now this will pretty much do the trick and it will be fine.
Now the current position has to be.
Now there is something that I have not assigned yet, and that is the button.
OK, so here we have the front view body for all of the text views and so forth, but the submit button
never has been created.
So let's go ahead and create a variable here private bar.
And this was button submit and this will be a button Nullarbor.
So let's import button here with Alt enter just will add the widget here and now we can use this button
inside of our own create to find it.
So Button Submit will be found by its ID Ordered I.D. Start Button Submit, which is this submit button?
Of course, this one here at the bottom.
OK, so I want to change this to finish once we are at the last entry of our options.
OK, so let's go back to this questions activity.
And when we set the questions, we get the questions here.
We then set everything right.
We set the image, the progress bar and so forth.
But what I'm also going to do here is I'm going to set the button based on the current position to either
display, submit or finish.
OK, so we can just go ahead and say here if the current position.
Is equal to questions, list dot size and only two youths use the double exclamation mark because it's
another bill.
So if that's the case, if we are at the last entry of our questions because we have nine questions,
right?
In our particular case, so if we are at the last question, I want to set the text of our button submit.
So because it's another bill, I need to add the question mark here, but submit or how did I call it,
I call it buttons submit like so?
The text to be equal to finish.
And otherwise, I want to set the text to be next or submit.
OK, I know what I want to do is once we click on to any of the views, I want to set all the views
that weren't selected to be gray and or have this default border, just gray border and the one that
is selected to be purple.
So I'm going to create this new method that I'm going to call default options view.
So a function to set the default options you when the new position is loaded or when the answer is we
select it.
So it's going to reset basically this the colors of the selected answers, then we can just set it to
be gray.
So private fun default options view.
OK, so this method will take care of that.
And therefore I need to know the options that I have, and I get those by having the array list of text
views.
OK, so the options will be and the list of text views, which are my four text use that I can select
from, right?
In this case, this text you one text you text you three text before our text view option one to option
two up to three option four.
So let's use option one here and add that now, because option one is another bill.
I need to use this let's statement and I can now add this option to the options.
So this TV, this text view, which is what we need here for our options array list, I can now add
it at the index zero.
I'm going to add it, and it is the actual text you.
So this TV option one, that's the lumber expression that we are using when we are using let.
OK.
And now we need to do the same thing with the other options as well.
So here.
Option two.
Like so and it will be at index one and then option three and option four accordingly.
So let me add those.
Option three Question mark outlet with option add to add in next to you with it and then the same with
option four.
And now what I want to do with all of those options is I'm going to go through them with a for loop,
so I'm going to go through each option inside of options.
And I'm going to set the color of this particular option, which means of this text you so set text
color.
And here I'm going to use a pass.
Well, I can use a given color that is already created, but I can also use that color that I'm defining
here manually.
So I'm going to define this color like so.
So this will be the color that I'm going to use.
And by the way, just to see how this options or default options view method is actually working, let's
call it just for this purpose, for the testing purpose inside of our own create method and see how
this is actually working.
So instead of using this color?
Let me just use red, which will be f and then a bunch of zeros.
So our rugby red, green blue.
And let me comment this line out.
Let's test this.
Let's just see whether all of our options will now have a red text.
So start, can you see all of the options now?
Have a red text.
So that's basically what I'm doing here.
So the default options view is just going to reset all of those options that we have and we can select
from.
OK, so that's really the purpose of what I'm doing here and here.
I'm setting the text color, but I'm also going to set the typeface, so I'm going to set the typeface
to be default again and because I want to change it once it's selected.
So here typeface is another property of the option, and I'm going to use the typeface default setting.
Then I will choose a background for it.
So the background for this button, so for this text view, it's not the button, really, but it's
a text you should be gotten from our context compared.
And this is something that is some feature that we haven't used yet before, I believe.
So where we get a draw bill from the context composite and to draw blood that I want to use?
Well, first of all, I need to pass in the context.
And then I can say where the file is that I want to use and I want to use the default options border.
OK, so this is going to be the our draw bill.
So our stance for resources, then draw is the folder and then it's just default options border.
And by the way, just so we can test it with this other, our thought trouble thought and we called
it, I think, selected.
Yeah, selected options border.
So let's just run the court real quick with the selected options border, and you will see that now
all of our selections have this or text.
You just have this great old border surrounding them.
OK, so that's what we're basically doing here.
We're setting it back to its default.
The thing is, if we run it now, we won't see the difference because we're just basically setting it
to what it was by default anyways.
But what I want to do is I want to call this method each time that we have selected another option.
I want to first set everything back and then set up the new color for the selected option.
OK, so therefore what we will need to have is, of course, going to be a method that will.
Allow us to display the selected option, so fun selected option view.
And here we will need a text view, so we need to know which text we need to change and then we need
to know which option it was.
So which option?
No select tid option.
No, which will be of type integer.
So once we have selected an option view, so we selected one of those buttons.
We clicked on them, basically.
I first want to call this default options view method, which will set every single button to its normal
state, and I'm going to set our global variable, which stores, which option we have selected.
So I'm selected option position to the selected option number, which is going to be the variable that
will be passed to this function that we have created here.
And then I'm going to set the text view.
Well, it's color.
So set text color and I'm going to use a purple color.
So here set text color to be this color parsed color with this number.
The color string that I'm using, you can just copy that if you want to use the same and the typeface.
So set type face, I want to set the text for your typeface to be bold.
So typeface bolt, which will just make the selected option be bold.
OK, so if we move over to the final solution, you can see here the selected option is bold and that
is what I'm achieving with this line here.
And that is also why we had to add this option typeface type face default here as well in our default
options view method.
Gather wise, but just stay bold after we have clicked on it and everything would be bold at one point.
Super bold text use.
And then, of course, I also need to set the background property.
And here we can just copy this code here, basically.
So.
And we'll get rid of this part.
So context compared, get trouble, and here we used the selected option border backgrounds that we
had created.
So this purple border background and now we of course, just need to add the oncolytic event for every
single option that we have here.
So here in the event, by the way, let me change that to view I'm not happy with the name P zero that
was given to me by default.
So I'm going to say when the view that was clicked on and we are really talking about views, we're
not talking about buttons, even though buttons are our views also, but our views are our text views.
So when we're using the Winkler's here, when the our Dot ID was TV option one.
So when we clicked on option one, I want to call this method that we just created.
So this selected option view.
With our text view as the view that we are passing, so unfortunately, option one is another bill,
so we need to add this thought.
Let's hear.
So it's another bill.
Question mark, but let and then we can do the select option view with it and the selected option number
being one.
So what's happening here?
Well, we're calling this select that option view method that we just created, which will, as I said
earlier, highlight the selected option.
So it will change its appearance.
But at the same time, it's also going to change the selected option number, so select that option
position.
And that's really important because we need to know if we've selected the correct option or not.
So that's what we do.
And you see, we are passing it, which is the TV option one text view.
So here it takes you this great out stuff here that you could see here it's colon text view.
So we are passing a text you, which is exactly what the selected option view requires because we want
to then change that text view accordingly.
And now we just need to do the same thing with Option two and so forth.
So T v underscore option two and here TV option to.
And the rest is pretty much the same, except for the selected option now, of course, needs to be
two as well.
And now we need to do the same thing with the other options that we have here.
So TBE Option three, as well as TBE Option four, and be careful with the selected option number.
So when you're copy and pasting, always make sure that you are changing every single property correctly
or every single piece of code correctly.
Otherwise, you will be confused when suddenly your code doesn't work properly.
OK, now, in order to make this run, we need to add on click listeners to all of our options that
we want to be clickable.
So the text for is that they want to be applicable.
So here we can just go ahead and say TV option one.
Should have an outlook listener set on Click Listener.
And we saw this set on listener before where we would implement it manually like this right for every
single listener.
But if we were to do that, then we would create a bunch of code inside of our own create, which is
really not what we should do, because otherwise the create method itself would be hundreds of lines
and we don't want that.
So what we're going to do instead is we're going to pass this as the click listener.
So because TV option one.
Is a Nullarbor.
I need to add the question mark here.
OK, so now we need to do the same thing with the other TextView options.
Text the option two, three and four.
And what I'm doing here is I'm just saying that this which means the class questions or quiz questions
activity should be the click listener.
And you see it is an analog listener.
So we are passing it as unclip listener and then we're executing this on click method that we have defined
here or which is an override method.
So here we're then saying what should happen once every single item is selected?
OK, so we are basically exporting the on click.
What should happen once we click on it by setting the click listener here?
By making sure we have this view on Click Listener here and by implementing the on Click Method with
the different options where we say what should happen once we select either of those.
Now this by itself is good and all.
But let's also add to submit button to it because the submit button doesn't have an on click listener
and this is actually going to be the most important one, right?
So here let me pass this here as well and get rid of this empty space.
Now, of course, we also need to have the on click event for the button.
So what should happen with the submit button once we click on it?
Well, what I'm going to do is I'm going to set it up here, button submit, but I'm not going to do
anything here to do.
Implement button submit, because this would be way too long VIDEO If I do it now, it's a really long
code that we need to do here, but at least we have prepared it.
So now let's run this and see if we can actually select any given button you can see now we can select
the text views and we are resetting them as well.
Now, of course, the submit button doesn't do anything, but that's because we haven't implemented
that yet.
So you see, there's a lot going on here.
We needed to set up a lot of code, but now you know how to modify your UI items in this particular
case to text used in your code directly interactively.
All right.
So that's it for this video.
See you in the next one.