Events and setonclicklistener
A free video tutorial from Tim Buchalka
Java Python Android and C# Expert Developer - 900K+ students
4.6 instructor rating • 12 courses • 903,292 students
Learn more from the full courseAndroid App Development Masterclass using Kotlin
Learn Kotlin Android App Development And Become an Android Developer. Incl. Kotlin Tutorial and Android Tutorial Videos
61:50:31 of on-demand video • Updated January 2021
- Learn the core Android app development and Kotlin skills to build real Android apps.
- Learn how to target current and older versions of Android when writing your apps.
- Understand how to create Android apps using Kotlin.
- Be able to apply for Android app development roles.
English Alright, so I digressed a bit in the previous video. We were trying to connect the button up to some code. So now that we've actually got references to the widgets, let's have a go at doing that. Now I said that the Android framework takes care of watching for user input, and notifies us when something interesting happens. Now the way it notifies our code of events that happen, is by calling special methods that we write called callbacks. So when a button is clicked, the Android framework will call an onClick method, if we'd written one and told Android that it's attached to the button. Now we can't just go creating any old method and call it on Click and expect Kotlin to be able to cope, though. Kotlin is a strongly typed language, which means that you have to provide exactly the right kind of object or method that something expects. Now the way that's defined in Kotlin is using interfaces, and Android uses an interface called onclickListener. Now this makes sure that only the correct type of object is attached to the button to respond to clicks. And once again, I'm going to type the code in and then explain what it's doing. So firstly, we need to add a line on line 13 and we're going to type private var space numTimesClicked and put equals zero on the end of that. And when you're typing on with this next bit, pay careful attention to the suggestions that Android Studio is popping up, and you might well find that Android Studio completes more of the code for you than it does for me. And Google I'm improving this autocomplete all the time, and at the moment the autocomplete for Kotlin doesn't do nearly as much as it does for Java. But I fully expect that it will as time goes by, so keep an eye on what's happening, and also it's a good idea to watch the autocomplete carefully anyway. Now just because Android Studio is suggesting something first, that doesn't mean that it's what you want in all situations. At the moment, you probably won't know what to choose, so you really want to compare the options you're getting to what appears on my screen. Don't worry though, as it all starts to make sense you'll know which of the options you want. But firstly, I'm gonna come down here now, below the last line here on line 21, and I'm going to type button question mark dot, and I'm gonna type setOn Click, and eventually I've got this first option so I'm gonna press ENTER to that one. I can try that, and I can do some typing or I can also come back here again and do a .setOnClick, select the first option with the parentheses created automatically, as you can see there. I'm going to type object space colon space, View with a capital V, View.onClick, ClickListener, I'm going to press enter there. Next I'm going to type a left curly brace then press ENTER, and then I'm going to type, on the next line now, override, press ENTER there because that's the word we want, fun, f u n space onClick, and you can see I've got this option that has appeared on the screen there now. If I press ENTER there, you can see that's actually generated some code for us, and it's just saved a bit of typing there. But you're probably wondering now, what does all this mean? Well firstly, I started by this code on line 14, adding a variable called numTimes Clicked, and that's there to keep track of how many times we click the button. Now I've initialized that to zero because to start with, the button obviously hasn't been clicked. Now in the onCreate method, starting on line 24, we call the setOnClickListener function of our button. Now as the name suggests, this function is used to tell Android what to do when the button is clicked, and I then created a new object of type onClickListener as the argument to setOn ClickListener. In fact, its View.On ClickListener because the interface is defined in the View class. Now because all widgets extend View, they'll all know about this interface. Now we can tap things other than buttons, as you will have seen using your Android phone if you've got one, in the past. I then added the onClick method to our onClick Listener, and it's this method that's called when the button is clicked. Now Android Studio doesn't know what we want to do to onClick, and that's why it's added this TODO not implemented, and we have to replace that with our own code. So actually, let's go ahead and do that, so I'm just going to delete that line now, this TODO. Now this is quite a simple method. It's just going to increase the number times clicked variable by one and then add a message to the textView widget. Now remember that we've now got a reference to the widget in the textView field, so we can call it's append method to add another line of text to it. So I'm going to go ahead and write the code for that. So we're going to start by typing numTimesClicked, select that one, then type space plus equals one, enter. Then we're going to type textView? dot append, and in parentheses double quotes \n and I'm going to type The button got tapped, then space then a dollar sign, numTimesClicked space time. So again, we've got a reference to the textView field and that's why we're able to call the append method there on line 27, and the \n that you can see here, sorry the backslash n, I said for /n. The backslash n at the start of a message causes a new line to be started, before the message is displayed. That way each new message starts on a new line, and without that the message would just display one after the other, wrapping when they reach the end of the right edge of the textView. Now you can use the special character backslash n in strings whenever you want to insert a line break, although it's more usual to put it at the end of a message, rather than at the beginning. So looking again at code on line 24, that code's using the button's set OnclickListener method, to tell the button that we want to use our onClick Listener when it's clicked. When the button's clicked it calls the onClick method that we've created. Now it may look complicated but this is the standard pattern for attaching code to an event, so that your method is used when the event happens. Now our code doesn't have to worry about checking the button. The onClick method will be called for us when the button's clicked, and that's known as event-driven programming and it's used by most GUI frameworks, including Microsoft Windows, gnome or KDE or Linux and the Mac OS X GUI aqua. Now in fact, you wouldn't normally write this code in this way. This is like another longhand version of the code that we'd normally use. Once again though, I've done it this way, just so you can get to see what's really happening. In the next section, we'll see the more usual way of writing this code, and we're going to look at an alternative way of setting an onClick Listener and why you'd want to use that alternative. The important thing, though, is that however the code's written, what we've got here is what really happens. When we call setOnClickListener, we're given an object that's guaranteed to have an onClick function that Android can call. And remember from the Kotlin tutorial section, that this means the object must be of a type that has the onClick function, or must implement an interface that defines the function. Alright, so we're passing an object of type View. onClickListener to the setOnClick Listener function, so we have to define its onClick function. Now we do that by overriding the function with the same name, that's defined but not implemented in the interface. So does it work? Well let's end the video here, and in the next video we'll give it a bit of a test run and see what happens. So I'll see you in the next video.