Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll see how to make a button trigger some code by adding an OnClickListener. Listeners like this sit patiently in the background and "listen" for something to happen. And when that something happens, they run their code.
Documentation
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We started with our layout
where we created our button.
0:00
Then we made a variable for
it in our activity class, and
0:03
we set that variable in
the last code challenge.
0:06
But there's still one more
step to make our button work.
0:09
I'll start by adding the code
from the code challenge.
0:12
I'll type showF and then hit enter or
tab to auto complete.
0:17
Then I'll set it =
findViewById(R.id.showFactButton)
0:22
hit ALT+Enter to add the cast and it
looks like I need to move that around and
0:28
there we go, ALT+Enter to add the cast and
finish with a semicolon.
0:34
Now, it's time to make
our button do something.
0:40
On a new line, type showFactButton and
0:43
remember that we can use enter or
tab to auto complete.
0:46
Now, if we type a dot, we get a new
menu for auto complete suggestions.
0:50
These are all methods
available to a button object.
0:55
As we start typing, methods that
don't match will be filtered out.
1:00
Let's type setOn.
1:04
We see the setOn click listener
method near the top of our list.
1:07
That's also the method we're looking for,
so let's select it.
1:11
An OnClickListener is
exactly what it sounds like.
1:17
It's something that listens for
the button to be clicked, or tapped.
1:20
Clicked and tapped mean the same thing
when we're talking about a touch screen.
1:24
When the listener detects a click,
1:28
it then runs some code that
we've given it ahead of time.
1:30
A setOnClickListener method
is expecting a parameter
1:33
that is another new data
type on ClickListener.
1:37
That's what this call out is telling us.
1:41
if you lose this call out somehow,
simply hover over that error and
1:43
we can see the inside of these parenthesis
is supposed to be an on ClickListener.
1:49
The listener parameter we provide here
will be connected to our showFact button.
1:53
It doesn't exist yet, so
let's add a line above this one and
1:58
start typing OnClickListener
with a capital O.
2:02
Notice that there's more than
one type of OnClickListener.
2:07
This first one is for a view and the
second one is for a dialogue interface.
2:10
But how do we know which one
of these we should choose?
2:16
There's actually a couple different
ways we can get more information about
2:19
objects and methods like this one.
2:22
One way is to Google the class name,
button, and
2:24
then the method we're looking for,
setOnClickListener.
2:28
This first link is to the official
Android Documentation.
2:36
Let's open it, and then use Cmd or
2:40
Ctrl + F to find where it
mentions setOnClickListener.
2:43
Right at the top,
there's some sample code for a button, and
2:48
it looks like it's using
the OnClickListener from the View class.
2:51
Back in Android Studio,
2:55
we can use a shortcut to get
at the documentation as well.
2:56
Let's click on setOnClickListener,
and then use F1 for
3:00
Mac, or Ctrl+Q for Windows.
3:05
This brings up the quick
documentation dialogue, and
3:08
again, we can see that we're looking for
the OnClickListener from the view class.
3:10
Now that we know which OnClickListener
to use, let's go back up here and
3:16
keep typing to bring back auto-complete.
3:20
Then let's select
the View.OnClickListener and
3:23
notice the Android studio makes it very
clear which OnClickListener we chose.
3:27
This way we can avoid any
confusion between the different
3:31
On Click Listener classes.
3:35
Next, we need to name our listener and
then set it equal to something.
3:37
Let's name it something descriptive,
like listener.
3:41
Then type space equals space,
new, another space and
3:44
then type on click listener with a capital
o and hit enter to auto complete.
3:49
Whoa, it just dropped in a lot of code for
us.
3:55
This is all the code that's required
to create an on click listener.
4:00
But we still need to end our
statement with a semicolon, so
4:04
before we forget let's add
a semicolon after this last bracket.
4:07
This may seem like a lot, but
that's why we have auto complete.
4:11
It's a lot easier to use auto complete
than it is to remember all of that.
4:15
Before we move on, let's quickly
copy our listener variable and
4:20
paste it down here as the parameter for
setOnClickListener.
4:25
And now that there's no error let's take a
short break before we finish our listener.
4:31
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up