Lets Tutorial: Android beginner tutorial Part 19 ToggleButton widget

Tuesday, January 27, 2015

Android beginner tutorial Part 19 ToggleButton widget

Today well see how to use the ToggleButton widget.

A ToggleButton widget is similar to a CheckBox. It acts like a switch - it can be turned on or off. The only thing different from a CheckBox is the appearance. Instead with a box that can be checked, its a regular button with a label, plus a little LED indicator under the text that changes color when the button is toggled.

The ToggleButton widget has default text values - ON and OFF. They can be set to custom values using android:textOn and android:textOff properties or setTextOn() and setTextOff() methods.

In the example below, I create a simple Activity layout in activity_main.xml that contains a ToggleButton and a text underneath. Set the ids as shown below:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >
        
    <ToggleButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/togglebutton"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/message"
        />
    
</LinearLayout>

Well need to go to strings.xml and define 2 values toggle_on and toggle_off, which will be displayed in the text field when the toggle button changes its state.

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <string name="app_name">Code For Food Test</string>
    <string name="toggle_on">The switch is On</string>
    <string name="toggle_off">The switch is Off</string>
    <string name="menu_settings">Settings</string>

</resources>

Now go to MainActivity.java class. Were going to update the code from the previous tutorial to match our new needs.

Were going to keep the OnCheckedChangeListener class implementation, the onCheckedChanged() function and most of the other code. Were going to declare a ToggleButton "toggle" instead of a CheckBox "check", though. Were also declaring a new TextView "message", which refers to the "message" object in the layout.

Heres the code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.TextView;
import android.widget.ToggleButton;

public class MainActivity extends Activity implements OnCheckedChangeListener{

public ToggleButton toggle;
public TextView message;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

toggle = (ToggleButton)findViewById(R.id.togglebutton);
toggle.setOnCheckedChangeListener(this);

message = (TextView)findViewById(R.id.message);
}

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked){
if(isChecked){
message.setText(R.string.toggle_on);
}else{
message.setText(R.string.toggle_off);
}
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.activity_main, menu);
return true;
}

}

As you can see, the code is not too different from the previous tutorial, where we handle CheckBox events.

That will be all for today.

Thanks for reading!

Lets Tutorial

Tuesday, January 27, 2015

Android beginner tutorial Part 19 ToggleButton widget

No comments:

Post a Comment