Android On Click Listener

Meet your new best friend, the Android on click listener. Buttons are one of the most important building blocks in any application. Thus, their implementation is a key milestone in learning any new language that deals with GUIs. The following should get you through making any View, Button, or Image respond to touch in Android Studio.

System:
Android Studio 3.3
macOS

Project Setup

I started off with an empty activity.
File > New Project > Empty Activity

Click Next > Finish and accept all defaults on the way.
Android Studio will now create a bunch of files and folders. Luckily we will only need two of the files to get our button to work. Navigate to your activity_main.xml file using the explorer on the Left of Android. XML files define how your Android app looks and Java files contain the application logic.

XML

Double clicking activity_main.xml will open a user interface for editing your app’s look. Let’s go ahead and click Text on the bottom so we can manually edit the xml.

Let’s delete the default TextView and replace it with the following.

<Button
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="Toast"
    android:id="@+id/toast"
/>

layout_width=”match_parent” sets the button width to the screen’s width since it’s directly placed into the root view. Similarly layout_height=”match_parent” sets button height to the screen’s height. text=”Toast” sets the button text to Toast. If layout_width and layout_height are not defined then we will not see our button and will not be able to click it! Finally, we assign a distinct ID to the button using android:id=”@+id/toast” so we can easily find it amongst everything else in the app.

Java

Let’s tack on the following directly after setContentView(R.layout.activity_main) to set up our Android on click listener.

        setContentView(R.layout.activity_main); // This pulls up the xml document
        Button button = findViewById(R.id.toast); // Find the button and assign to variable of type Button
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Yay, our button works!", Toast.LENGTH_SHORT).show();
            }
        });

Button button = …. blah blah blah is where we find our button and assign it to a variable of type button. We could have cut out the middle man and said the following if we had wanted to.

   findViewById(R.id.toast).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "Yay, our button works!", Toast.LENGTH_SHORT).show();
        }
    });

And that’s pretty much it. If you had an image on screen that you wanted to make clickable change Button button = findView…. to Image button = findView…, or for a Text View do TextView button = findView….. Go ahead and run your first button on an emulator (by clicking the green play button shown below) and you’ll see a message appear when you click anywhere on the screen excluding the top bar.

Our app in action!

Feel free to leave questions or comments. Ready for something a little more complicated? Head over to our Google Translate API Android article. Cheers!
Finished Product: https://github.com/cvcaban/firstButton