Android App Development-Controls Part Two: Android Button Controls

In last week’s Android App Development tutorial I covered Android UI and Text Controls. This week I am going to cover Android Button Controls.

Android offers three types of button controls:

1. The Basic Button.
2. Image Button.
3. Toggle Button.

The basic Button:

The standard Android button is a subclass of the TextView class so it inherits all of its properties.

<linearlayout
android:layout_height="fill_parent"
android:layout_width="fill_parent"
android:orientation="vertical" xmlns:android="https://schemas.android.com/apk/res/android"
>
<Button
android:id="@+id/btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Click Me"
/>
</linearlayout>

If you want to implement the OnClick event handler for a button there are three ways to do it:
The first way is to implement the OnClickListner Interface for each single button in the activity like this:

Button btn=(Button)findViewById(R.id.btn);

        btn.setOnClickListener(new OnClickListener()
        {
   public void onClick(View v) {
    Button btn=(Button)v;
    btn.setText("You clicked on the button");
   }
        }
        );

The downside to doing it ths way is that it will lead to large code blocks with a lot of redundancy because you will have to repeat this for each button in your activity.

The second method is to make your activity implement the OnClickListner Interface and use the onClick method by switching between the buttons IDs:

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

    }
 public void onClick(View v) {
  // TODO Auto-generated method stub
  switch(v.getId())
  {
  case R.id.btn1:
   //Do something
   break;
  case R.id.btn2:
   // Do something
   break;
  }
 }
}

Finally, the third method is to define the OnClick for the buttons using the XML layout definition.  This is a nice new feature introduced in Andrpod 1.6. Which is similar to that in ASP.NET.

<button
android:id="@+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onclick="ClickHandler"
android:text="Click Me"
/>
<button
android:id="@+id/btn2"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:onclick="ClickHandler"
android:text="Click Me too"
/>
Then you define the event handler method in your class file in the same normal way

  switch(v.getId())
  {
  case R.id.btn1:
   //Do something
   break;
  case R.id.btn2:
   // Do something
   break;
  }
 }

Image Button:

The ImageButton control is similar to the Button except it represents a button with an image instead of the text.

We can place an image in the res/drawable directory and reference it to be the source image of the ImageButton.

<linearlayout android:layout_height="fill_parent" android:layout_width="fill_parent" android:orientation="vertical" xmlns:android="https://schemas.android.com/apk/res/android"
/>
<imagebutton
android:id="@+id/btn1"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:src="@drawable/globe"
/>
</linearlayout>

You can set the image source property from the code like this:

ImageButton btn=(ImageButton)findViewById(R.id.btn1);
btn.setImageResource(R.drawable.globe);

Toggle Button:

The ToggleButton is like a check box or radio button, it has two states: On or Off. The default behavior of ToggleButton is Off state, it displays a gray bar and the text Off.

When in On state it displays a green bar and has the text On.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ToggleButton
android:id="@+id/tb"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Switch On"
/>
</LinearLayout>

See that despite we specified the android:text property of the toggle button, it displays the default text “Off”.
This is because ToggleButton inherits from TextView. But practically the android:text property is useless.
Instead we define the android:textOn and android:textOff properties.
In code to check the state of the Toggle button programmatically you can define the click handler in the regular way:

<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Switch On"
android:textOn="Switch Off"
android:id="@+id/btn"
android:onClick="ClickHandler"
/>

Then check the state of it like this:

public void ClickHandler(View v)
    {
     ToggleButton tg=(ToggleButton)v;
     if(tg.isChecked())
      //Do something
     else
      //Do something else
    }

here’s what it’s gonna look like:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Switch On"
android:textOn="Switch Off"
/>
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textOff="Switch On"
android:textOn="Switch Off"
/>
</LinearLayout>

That is all for the intro to Android button controls. Stay tuned for the next Android development tutorial where we will explore more controls.