Welcome back in this video, we're going to adjust our code so that we can actually interact with our
application because so far it doesn't really do anything right at this place.
A lot then is but we cannot press any buttons.
There is nothing to do with it.
Just to look at it isn't interesting enough, I believe.
Well, let's change that by actually adding a button to it.
So what I'm going to do is here in the palette, I'm going to select a button and I'm going to drag
it into my application.
So let's just put it in here, and let's scroll in a little bit.
You can see that now the button is in our application, it says Button, and it has the wall text Hello,
Dennis underneath it.
Now there is a little bit of a problem with this button because it doesn't have any constraints, so
it would look like this here.
But once we run it on our application, on our device, you can see we get this little error here.
So let's look at it and we can see the button jumps over to the top left corner.
And that is because we are inside of a constraint layout.
You can see that and it needs constraints, so it needs to know where items should be displayed.
And because our button doesn't have any constraints, it's just floating somewhere.
It just thinks or assumes that we want to position it at the top left corner, which isn't what we want,
what we actually want this.
We want this button to be exactly where we have it right now.
Now we can go ahead and magically infer constraints by clicking this button here, and then it will
magically just add this constraint so that it just on top of our hello, then this text, which is thirty
three pixels up from it.
So if we rerun the application now, we should see that now our button will in fact be just on top of
it.
Now, cleaner way would be not to let Android Studio do it for us, but actually do it manually.
Therefore, you can hold the mask button on top of the button and then drag this circle to the top,
then drag this right circle to the right and the left circle to the left.
So this will position the button towards the center.
And then let's add another constraint so that it's connected to our Helo dense text.
So now this button will have constraints and it will be centered pretty much between all of its constraints.
That's the default we're going to later on.
See how we can change the UI significantly by making a bunch more changes.
But that's going to suffice for now.
I but even though I would like this distance here to be a little less, what you can do is you can go
to your layout here at the top right corner here and the attribute and then changed constraints that
you want to have.
So you can see currently to says that there is a vertical bias of 50 percent, which just means that
it's in the middle on a vertical level.
And the same goes for this horizontal bias, so it's 50 percent at the horizontal bias.
So here, if you want to change that, you can click on this X button.
It will delete this constraint entirely, but you can also overwrite the distance that you want to have
here.
So if I'm adding to, you can see now it takes the bias into consideration, but at the same time,
it adds another 20 pixels distance.
So if you were to add negative values, you would see it goes down here.
So that would be one way.
The other way would be to just drag this bias towards the bottom.
So it's going to have a bias further towards the bottom.
So this will make our button be closer to the hell of Dennis text.
There are other ways to play around with it and change it, but I would just say for now, it's good
enough to play around with the editor.
Most of the time, however, in the future we're going to work with a coach, but I'm going to give
you a pretty extensive introduction into what accent code looks like and how to use it for your purposes.
So now let's make a couple of changes to this button that will be relevant, not just its appearance,
but also what the text will say.
So you can see once you click on this button and you scroll to the declared attributes, you'll find
that it has a text which currently is just saying, Button, I want to change that.
I want to tell it.
Click me.
OK, so it should just say click me.
Once you enter it, you can see that the name or the text changes that disappearing on the button.
Now there is an ID for any given item that you have in your user interface.
At least you can set up an ID. This ID will allow you to access the UI element in your actual coat.
So if I want to, for example, register I click on that button or a tap on that button in my code.
I need to know which button was pressed because maybe I have five different buttons in there, so I
always need to have an identifier or an ID, which tells us what item was pressed in this case.
If the Click Me button was pressed and the ID would be for, that button would be just button.
I would like for it to have the name my button like.
So and then this rename option comes up and I can refactor it.
So rename the ID source button and its usage to my button.
So I'm just going to do that now.
I can access my button and let's actually do that.
Let's go to our main activity and let's access my button.
Therefore, we need to get access to this button.
Therefore, let's create a variable here by using the vault.
Key word.
We're going to see what this means in particular.
Once you look at cortman fundamentals, but for now, just follow along because I want you to have an
application that actually does something in this video and you're going to then step by step later on,
understand how all of this is working.
So first, we need to give this a name, and I'm going to call this one, click me.
So button clicking and then I'm going to use the find view by ID method, and I need to say that I'm
using a button.
So you see, once I enter button and I press the enter key inside of those brackets here.
You can see that this new widget here at the top pops up.
So this new import, which says Android widget button.
So this now allows us to use the button class, which basically says, OK, now we can use buttons in
our Kotlin code.
Now here in those brackets, here in those rounded the brackets, we need to say which button we want
to actually find by its side, because that's what this method does.
So it just says, OK, find a button by its ID, so find a view.
If you could be a button, it could be a text.
It could be any viewable item in your activity.
Main example?
So the button is of u.
This text is a view.
And while any of those like they also even have the name like image view, recycler view, they even
have to view in their name.
But you can access them directly.
So here, let's say I want to find the button that was called my button.
OK, so I gave it the name, my button.
So now I can access it.
Now this button clicked me.
Let's quickly change.
It's.
Text to ha ha.
OK, and then let's rerun the application real quick, just to see if we can actually access to a button
and you can see now it says ha ha, and it doesn't say click me anymore.
That's because what we did is here we got access to this button.
And here at this line, we overrode the text of the button.
So whatever the button shows us its content.
So but that's not what I'm interested in.
Usually what you want to do with buttons is you want to be able to click on them and then execute some
code.
So in order to do that, let's add an action to our button.
So let's use this variable button.
Click me in order to set an on click listener.
So here if you enter this, you can see that there are multiple options.
I want to use this one.
Click listener with those curly brackets.
So let's double click on it.
And now inside of those brackets, I can now execute what I want to happen once I click on the button.
So let's just use the same example that we just had where we just set the text to ha, for example,
and I would say, you clicked me.
So something like that.
So now I'm changing the text of the button to haha, you click by executing this quote once we clicked
on the button.
So this on click listener is basically just the listening or waiting for us to click on the button.
So what you're saying, OK, once we click on the button, do something with it.
And what should we do?
Well, everything that is inside of those curly brackets, which is in the current situation, just
this one line of code.
You can have multiple lines of code here.
That wouldn't be a problem.
You can see curly brackets here as well.
So for example, this on create method here also has curly brackets and starts here, and it goes all
the way down here.
You can even press this minus button to see where it starts and where it ends.
The same goes for our class.
You see, it has curly brackets.
It starts there and goes all the way up to Line 18.
This is basically just the starting point here of this body of the code block, so to speak, and this
is the ending point.
And here this one is the starting point of this unclip lesson, and this is the ending point of the
contact listener.
So let's run this real quick just to see what's going to happen once we click on the button and you
see it says, How are you clicked me?
So well done.
We changed a button.
Click and it works.
But now what I actually want to do is I want to access my text you because I don't want to change the
text that is on the button.
I actually want to change the text that is in my text too.
So how could I access it?
How could I change it?
Well, it will be a similar approach to what we've done here.
What we find the text by its ID.
But instead of using a button here, we would use the same name that this item has here.
So here at the top, it says text view.
OK, so this is a b.
This is a text you printed has the idea of to, in my case.
So if you go to the code here and not the design, you can see that it is a text view.
This is, by the way, also the internal class name that you would have to use in your main activity
and you will have to import it the same way.
So if you feel super confident and you really want to try it by yourself, I would recommend that you
pass the video now and you try to access the text and change the text of the text view once it's clicked.
It won't be easy, but you basically have to do a similar thing to what we have done with the button.
OK, so I hope you pass the video and try it, this will not have been easy, but if you managed it,
congratulations.
So basically what you need to do is you need to get the ID off your text.
You know, you can get the idea of the text or the similar way as we've done earlier.
You click on the text view here and then you look at its I.D. right here.
Now, if you want, you can change the ID, by the way, you can find the ID here as well, right?
It's at the very top because it's very important, but you can change it from here as well.
So in my case, it's called text with you.
In your case, it might be called text view without the two at the end.
So what's important is that you use the one that you have in your case.
So I'm just going to change that to text you because it's very likely that you have the idea of text
you in your case.
So I'm going to refactor that real quick.
OK, so this is now going to be my text you.
That's the default ID.
Of course, we could give it the proper name saying something like my no text view because I want to
change it to be numbers later on.
But for now, let's just use that.
Let's go back to our main activity code and now let's create a vowel, and I'm going to call this TV
my text view, and I'm going to find it by.
It's I'd find you by ID, and here I'm going to use the text view, keyword.
And then in the brackets, I need to give it all that ID.
And I call the text to you, right?
Text view like so now put complaining because text doesn't exist because it doesn't know what to do
with this text you class, as it didn't know about the button earlier.
But now what you can do is you can just right click into it and then show context, actions and then
import.
Alternatively, you can also hover over it and just press Alt Enter and then click on import.
And it will add this import line here at the top, which now allows me to use to text view.
OK, so now we have this text you.
Cool.
So let's go ahead and use it.
Let's now instead of changing this button, click me text.
Let's actually change the text of the TV.
My text you.
So I'm just going to use the text property again, and I'm going to use the equals sign.
So this equals sign basically just assigns something to this text, and I didn't say that before, but
that's what basically is happening.
So I'm assigning something to this property here.
So what is it that I want to assign to the text property of my text view?
I want to assign.
Maybe this just used as, haha, you clicked me for now.
So now, once we click on the button, both of them will change to how you clicked.
So let's test this real quick.
OK.
Click on it, and you see both of them have been changed to how you clicked me.
Now that's not necessarily what I want.
What I want instead is I want to write a little program that is going to be a people counter.
So each time that I click on the button, the number that is displayed should be increased by one.
So therefore, I'm going to create a new variable this time I'm going to use the VAR keyword because
this is going to be a variable that will be changeable and we're going to see what that means later
on.
But no one variable now just follow along now.
So here I'm going to call this one times clicked and I'm going to assign a value of zero.
So this variable now is going to hold the amount of times that we clicked on the button.
So what I'm going to do each time that we clicked on the button, which means that this code will be
executed, I'm going to increase the value of this times, click by one.
So let's do that real quick.
Let's get rid of this button.
Click me text here.
Let's say times click will be equal the all time clicked value +1.
So that's how you can assign a value here.
This is just a slower way of saying it.
Of course, you could have also just had plus equal and then get rid of this times clicked and this
would have done the same trick.
But that would go too far for now.
It's just what Android Studio doesn't like.
It just says, Hey, this is an efficient.
Just do it quicker with this plus equals sign.
So you can click this replace with and it will do the trick for you.
OK, but I'm just going to keep it like this.
So time's clicked will be the old times.
Click +1 OK, and then we just need to assign the value of times.
Click to our text view here.
So instead of just saying, ha ha, you clicked me will want to display the amount of times we click
on the button.
Now the problem is that times clicked as a number, and if you look at this text here, it actually
expects a text.
So a string and not a number, and we can very quickly change that by using two string here.
So that two string will just convert this text into a string and then this arrow pierce.
So again, you don't have to fully understand what's up here.
No worries.
We're going to go over all of those things.
The idea behind this video is really just to give you a quick result of having an application that you
can then test on your own phone and just have available.
So for now, let's go back to our activity main and let's change to text from Hello Dennis to, let's
say, zero.
OK.
So text said it two zero, it will be this red zero.
And now let's run the application.
And let's click on the button, and you can see now changes magically to one, two, three and each
time that we click on the button.
The number is increasing by one.
Now, if we were to close the application and would go back to opening it up, you could see it starts
at zero again.
Once we click on it, you can see the numbers go up consecutively.
So what is going on here?
Holy smokes, Dennis.
Well, the thing is what we have done is we have our main activity coat.
So this is the class in which everything happens.
So this is the view in which everything happens, right?
And then we said once the application is created, we want this code to be executed.
And what basically happens is it sets the activity made as to lay out that this used, which is this
XML file, which changed as Acxiom L file with our designer by dragging in a button, by changing the
text view and so forth.
And we gave those ideas that we could then access.
Now in our main activity, we access them by using the find view by Edy method.
This just allows us to say, OK, what is it that we are currently looking at?
So we're searching for a button that has a certain ID, and we want to assign this to this variable
called button.
Click me.
So we're doing that with this button, click me.
We're doing that with our text view.
This text you, by the way, is of the type text you and can very easily find that out by, well, either.
Looking here, you see a text view is called text you and the button is called button, and you can
also go to the code.
You can see this is the text view.
And this is the buttons.
So these are class names that you need to import as your widgets.
So import Android widget that button and we saw that this was done automatically for us by Android Studio.
Thank you for that.
And then we have this variable called times clicked and we use VAR here because we wanted to be able
to change.
But as I said, this will be something we will cover later on in more depth.
And then we have this button clicked me this button that we have defined earlier.
The cool thing is this button click meme comes from the tip button.
So it is a type button.
And the cool thing is this that buttons can be clickable.
So there is this method called set on click listener that we can then execute.
And basically, what we add as code inside of those curly brackets will be executed once we click on
the button.
So what we're doing now is we're increasing the value of this.
Times clicked from zero to one, once it's clicked for the first time and then increasing it by one
each time that it's clicked and we're changing the text entry.
So the text property off our TV, my text view to be whatever the times clicked currently is as a string.
So this line here, there's a lot going on here.
So no worries if you don't fully understand each detail, but the general idea is hopefully graspable
for you.
Now, before we go to the next lecture, I want to quickly show you one last thing and that is how a
toast works.
So there is this beautiful thing called toast.
Let's use it.
It's not the thing that you can eat, but it's just something that you can write something on the screen
with.
So you use the keyword toast that make text, then you need to pass in the context.
I'm just going to say this.
Don't worry, just follow along.
And then you say what you want to display.
Hey, I'm a toast.
And then you just say how long this should be displayed.
And here you can just use toast length long.
And then finally, we need to show this toast.
OK, so don't show.
So if you want to display this beautiful thing that I'm going to show you in a second, just add a coat
like this and test it and you see it says, Hey, I'm a toast.
You can also say something like, Hey, Dennis.
Let's run it again.
Click on it and see it says, Hey, Dennis.
OK, so that's what you can do with toasts, and you don't need to understand what's going on here in
depth.
For now, the only thing that you need is this structure in general, and then you can just replace
this text with whatever you want to display there.
And we're going to see what make text means, what this means, what contexts are, what this length
long is and what this show method is and so forth.
You're going to learn about all of these things.
This was just a little bit of an introduction and creating a small application that allows you to,
well, do something.
So now you can install this on your phone and you have your first little people counter where now if
somebody comes into the bus and what you are as a teacher and you need to check how many children did
come into your bus, you can just use this application now.
Congratulations.