Mobility

Take advantage of Android's time-saving toggle button

Are you aware that Android has a built-in toggle button? If not, developer William Francis can relate. Now that he knows about this gem, he's offering a three-step tutorial on how to use it.

The speed at which the world of mobile app development moves is downright dizzying at times. Mango, Ice-cream Sandwich, and the ever important if not as appetizingly named iOS 5.0 are knocking on the doors of smartphone developers everywhere. As an Android developer who jumped in with both feet via the original HTC G1, I've waded through five SDKs in less than two years. So it shouldn't surprise me that in the process of assimilating all that knowledge I've missed a few things along the way. Ergo the point of this tip.

While trying to create a custom checkbox for one of my Android applications a couple of days ago, I came across documentation for a component called a toggle button. My first thought was this bit of UI framework must be new. A quick trip to http://developer.android.com/reference/android/widget/ToggleButton.html informed me otherwise: available since api 1.0.

There is nothing terribly fancy or complex about the toggle button — it's a simple user on/off switch; however, it fits nicely into a couple of design scenarios, and apparently the nice folks at Google went to all the trouble of creating it to make our lives easier ages ago. If the existence of the <ToggleButton/> tag is news to you, this straightforward tutorial shows how to take advantage of this time-saving gem.

Step one: Start with a new Android project in Eclipse. I usually target my apps at Android 1.6 in order to support the widest array of devices possible. Step two: Add a new LinearLayout. Be sure to notice the "textOn" and "textOff" attributes of the ToggleButton. These are unique to the component.
main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_margin="20dip"
android:gravity="center"
android:text="Did you know Android had a toggle button?"/>
<ToggleButton
android:id="@+id/toggle_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="40dip"
android:textOn="On"
android:textOff="Off"
android:layout_gravity="center"/>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Until today I didn\'t!"/>
</LinearLayout>
Step three: Add a standard on create override to your Main.java file. Hook the on click. Insert an appropriate action.
package com.authorwjf;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Toast;
import android.widget.ToggleButton;
public class Main extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
final ToggleButton togglebutton = (ToggleButton) findViewById(R.id.toggle_button);
togglebutton.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
if (togglebutton.isChecked()) {
Toast.makeText(getBaseContext(), "Toggled switch to on!",
Toast.LENGTH_SHORT).show();
} else {
Toast.makeText(getBaseContext(), "Toggled switch to off.", Toast.LENGTH_SHORT).show();
}
}
});
}
}

If you prefer to download the entire project, you can do so here.

About

William J Francis began programming computers at age eleven. Specializing in embedded and mobile platforms, he has more than 20 years of professional software engineering under his belt, including a four year stint in the US Army's Military Intellige...

Editor's Picks