Tutorial details

Lesson 9. Event listeners with Button example | App Code for Sale | Preview

Lesson 9. Event listeners with Button example | Android Tutorial

How to process button clicks and find out what a listener is

Overview PAGE TOP

In this lesson we will:

- learn how to process button clicks and find out what a listener is.

**Let's create a project:** PAGE TOP

Project name: P0091_OnClickButtons

Build Target: Android 2.3.3

Application name: OnClickButtons

Package name: ru.startandroid.develop.onclickbuttons

Create Activity: MainActivity

In layout file main.xml write the following and save:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal">
<LinearLayout
 android:id="@+id/linearLayout1"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:layout_margin="30dp"
 android:orientation="vertical">
<TextView
 android:id="@+id/tvOut"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:layout_marginBottom="50dp"
 android:text="TextView">
</TextView>
<Button
 android:id="@+id/btnOk"
 android:layout_width="100dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:text="OK">
</Button>
<Button
 android:id="@+id/btnCancel"
 android:layout_width="100dp"
 android:layout_height="wrap_content"
 android:layout_gravity="center_horizontal"
 android:text="Cancel">
</Button>
</LinearLayout>
</LinearLayout>

We have a TextView with text and two buttons: OK and Cancel. Now we will make the TextView content change when a button is clicked. When OK is clicked - we will display text "Button OK clicked", when Cancel - "Cancel button clicked".

Open MainActivity.java. We will declare instance variables for our objects outside onCreate method. It’s done like this to enable us referencing these variables from any method. We will initialize these object using findViewById method, which we are already familiar with. In the end the resulted code should be like this:

public class MainActivity extends Activity {

   TextView tvOut;
   Button btnOk;
   Button btnCancel;

   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);

     // find View-elements
     tvOut = (TextView) findViewById(R.id.tvOut);
     btnOk = (Button) findViewById(R.id.btnOk);
     btnCancel = (Button) findViewById(R.id.btnCancel);

   }
 }

Update the import section (CTRL+SHIFT+O). Objects tvOut, btnOk and btnCancel correspond to View-elements on screen and we can work with them. Now we have to teach buttons to react when it is clicked. To do so setOnClickListener (View.OnClickListener l) method is available. The parameter is an object that implements View.OnClickListener interface. That’s why, the button will delegate click processing to this method. Let’s create such an object. Continue writing code inside onCreate method:

OnClickListener oclBtnOk = new OnClickListener() {
       @Override
       public void onClick(View v) {
         // TODO Auto-generated method stub

       }
     };

Eclipse underlines OnClickListener with a red line:

tal1.jpg

as it is not familiar with it yet. We must update the import section. Press CTRL+SHIFT+O. Eclipse shows us that it knows two interfaces with OnClickListener names and offers us to choose. We need View.OnClickListener, as button method setOnClickListener requires it as a parameter.

tal_2.jpg

We have created oclBtnOk object which implements View.OnClickListener interface. This object has onClick method - this is exactly what we need. This is the method, that will be invoked when the button is clicked. We have decided that we will display "Button OK clicked" text in the TextView (tvOut) when the button is clicked. Let’s implement this.

In onClick method write:

tvOut.setText("Button OK clicked");

The click listener is ready. The only thing left is to set it to the button using setOnClickListener method.

btnOk.setOnClickListener(oclBtnOk);

The resulting code:

public class MainActivity extends Activity {

   TextView tvOut;
   Button btnOk;
   Button btnCancel;

   /** Called when the activity is first created. */
   @Override
   public void onCreate(Bundle savedInstanceState) {
     super.onCreate(savedInstanceState);
     setContentView(R.layout.main);

     // find View-elements
     tvOut = (TextView) findViewById(R.id.tvOut);
     btnOk = (Button) findViewById(R.id.btnOk);
     btnCancel = (Button) findViewById(R.id.btnCancel);

     // create click listener
     OnClickListener oclBtnOk = new OnClickListener() {
       @Override
       public void onClick(View v) {
         // change text of the TextView (tvOut)
         tvOut.setText("Button OK clicked");
       }
     };

     // assign click listener to the OK button (btnOK)
     btnOk.setOnClickListener(oclBtnOk);
   }
 }

Save and run the application. Click OK button and see that the text has changed.

tal_3.jpg

Clicking Cancel button does nothing for now, because we haven’t created and assigned a click listener for it. Let’s do it similarly as with OK button. To begin with, create a listener:

OnClickListener oclBtnCancel = new OnClickListener() {
       @Override
       public void onClick(View v) {
         // Change text of TextView (tvOut)
         tvOut.setText("Button Cancel clicked");
       }
     };

Then set it to the button:

btnCancel.setOnClickListener(oclBtnCancel);

Save, run and check the result. Both buttons now can process clicks.

Let’s talk once again about event processing mechanism by button click example. A button cannot process clicks on its own, it needs a listener for this, which is assigned using setOnClickListener method. When a button is clicked, listener reacts and runs the code from onClick method. It can be displayed like this:

tal_4.jpg

It means that to implement this you have to follow these steps:

  • create a listener
  • implement onClick method
  • assign listener to a button

And now the event processing system is ready.

In the next lesson we will:

  • learn how to use one listener for several View-elements
  • teach Activity to act as a listener

Reference PAGE TOP

http://startandroid.ru/en/lessons/complete-list/210-lesson-9-event-listeners-with-button-example.html

0 Comments Leave a comment

Please login in order to leave a comment.

Newest first
!

Sign-in to your Chupamobile Account.

The Easiest way to Launch your next App or Game.

Join Chupamobile and get instant access to thousands of ready made App and Game Templates.

Creating an account means you’re okay with Chupamobile’s Terms of Service and Privacy Policy.