Android OnClickListener – Handling Button in Android Studio

Hello readers, welcome to the fourth post of my Android Application Development Tutorial from Scratch. Today we will see Android OnClickListener. In the last post of Android Application Development Tutorial we created a Button and EditText. In …

android onclicklistener

Hello readers, welcome to the fourth post of my Android Application Development Tutorial from Scratch. Today we will see Android OnClickListener. In the last post of Android Application Development Tutorial we created a Button and EditText. In this post we will add functionality to the button using Android OnClickListener. So lets begin.

A Quick Recap of the Last Post

  • In the last tutorial we created an Android Studio project named HandlingButton.
  • We created the following layout

android app development tutorial

  • So if you haven’t gone through the last post, first go through the last post. Now lets move ahead to some coding part.

Moving on to Java Coding

  • Open MainActivity.java 
MainActivity.java
MainActivity.java
  • After opening MainActivity.java you will see the following code

  • Now don’t worry if it is bouncing over your head :P. We will understand every line. Everytime you will create a project the above given snippet would generate automatically.
  • So in the above code we have a class MainActivity. Inside the class we have three overriden methods. Leave the first method and delete the remaining two methods (onCreateOptionMenu and onOptionsItemSelected). After deleting the methods you will have the following code.

Understanding the Above Code

  • MainActivity: It is the name of the class we are having. It is also named as your activity name. If you remember the project creation we have given this name.
  • AppCompatActivity: Our class MainActivity is extending this class.  You can see the complete reference of AppCompatActivity from the official website.
  • onCreate(Bundle savedInstanceState): This is an overridden method.  It is inside the AppCompatActivity class. This method will be executed when the app is opened (the activity is created). So basically you can think that it is the main method. We will learn the details about this in further posts when we will learn the Activity Life Cycle.
  • Bundle: It is another predefined class. It is basically used for passing data between android activities.
  • setContentView(R.layout.activity_main): This method takes a layout and it set the view as the layout to the activity.  We created a layout named activity_main.xml. As I told you before that all the ids for all the components are generated automatically and stored inside R.java file. And that is what we are doing here. We are selecting the id of our layout from R.java file (R.layout.activity_main).

The above mentions things are generated automatically. Now we need to code our things. So the layout we created is having a Button and an EditText. We have predefined classes in android for all the compnents. So now come inside the MainActivity class.

  • We will declare two instances one for Button and one for EditText.

  • Now if you are getting error as shown in the below image

cannot resolve symbol

  • This error is caused because you haven’t imported the packages. So just put the cursor in the word causing error. In my case it is EditText.
  • Press alt+enter

import class

  • Click on import class. And you’ll see your error has gone away. Bingo!
  • Now we have the instances for our Button and EditText
  • Now we will initialize our instances inside the onCreate method.

Initializing a View

  • All these components Button and EditText are called View. We have also a predefined class named View in android. For initializing a View from XML layout file, we have a method findViewById(). 

findViewById(int id)

  • It takes a parameter id. As I told you that every components has an specific id that is stored in R.java file. So we will provide the id from the R file. We don’t need to go to the R file actually it is the id we have given while creating the component. And with the name of the id a variable is created inside the R file with a unique hex value. So lets initialize our components.
  • Come inside onCreate() method and write the following code

initializing view

  • If you are also getting the error then don’t worry. We are getting the error because the method findViewById() returns a View. But in left side we are having a Button. So the error is because of the type mismatch. Put the cursor in the line and press alt+enter

casting view

  • Click on Cast to android.widget.Button
  • So now the error has gone. So everytime we need to cast to the respective view if we are using findViewById() method.
  • So now our onCreate() method would be

  • So we have initialized our button and editText. So what I will be doing from here is I will get an given name from the editText and will show a greeting message in the same editText.
  • So for this I will create a separate method. So create a method named showMessage(). 

  • Now for manipulating our editText we will use the method getText() and setText()

Handling EditText

  • getText(): This method returns an Editable instance. And it contains the text from the EditText. So for storing the Text into a String object, we can use the toString() method to convert it into String.
  • setText(String s):This method takes a string and set the string to EditText.
  • So using the above methods we can code our method showMessage().

  • Now this method should execute when the user will tap on the button.

Using Android OnClickListener Interface

  • We have an Interface OnClickListener inside the View class. This interface can be used for handling the button. So first implement this interface into your MainActivity class.

onclicklistener

  • We are getting an error this is because we have implemented the interface OnClickListener but we did not override the methods inside the interface OnClickListener.
  • Now put the cursor on the line and press alt+enter

implement method

  • Click on Implement methods

implementing method

  • Now select onClick() and click OK.
  • Now you will see the following method in your MainActivity class.

  • This method will be executed on button tap but before we have to specify the listener for our button. We can do this using setOnClickListener() method

setOnClickListener(View.OnClickListener l)

  • This method takes the reference to the Listener and registers a callback to be invoked when the View is clicked.
  • So we have the listener in the same class MainActivity. So we can pass the reference using this. So write the following code inside onCreate().

setonclicklistener

  • Now after doing this our overriden method onClick() will execute when the button is tapped. So now we can call our method showMessage() inside onClick()

  • So the final code we are having is

  • Now run your application
android onclicklistener output
Android Onclicklistener Output
  • Enter your name in the EditText and Tap on the Button. You will see the greeting message in EditText. So I wrapping up this Android OnClickListener tutorial here. In the next tutorial we will see some more methods to Handle our button.

Next Post: Android OnClickListener Contd…

Prev Post: Button and EditText

Hi, my name is Belal Khan and I am a Google Developers Expert (GDE) for Android. The passion of teaching made me create this blog. If you are an Android Developer, or you are learning about Android Development, then I can help you a lot with Simplified Coding.

Expand Your Knowledge: Next Tutorial Picks

0 0 votes
Article Rating
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x