Tuesday, December 11, 2012

Android beginner tutorial: Part 17 - RadioButton widget

In this tutorial we will learn how to use RadioButtons in Android.

Similarly to Flex, RadioButtons are joined together with a RadioGroup container. When there are radio buttons in a radio group, only one radio button can be toggled on. This means that if a radio button is checked, clicking any other radio button in this radio group unchecks the first button.

RadioGroup is a container that extends ViewGroup class, which means that it can act as the root node of an Activity layout xml.

Go to our activity_main.xml layout file and create a layout consiting of a root RadioGroup container, 3 RadioButtons with ids radio1, radio2, radio3, text values refer to strings.xml objects with names rad_1, rad_2, rad_3, as well as a TextView with id myText.

<RadioGroup 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" >
        
    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/rad_1"
        android:id="@+id/radio1"/>
    
    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/rad_2"
        android:id="@+id/radio2"/>
    
    <RadioButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="@string/rad_3"
        android:id="@+id/radio3"/>
    
    <TextView 
        android:id="@+id/myText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />

</RadioGroup>

The strings.xml file:

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

    <string name="app_name">Code For Food Test</string>
    <string name="rad_1">Radio button 1</string>
    <string name="rad_2">Radio button 2</string>
    <string name="rad_3">Radio button 3</string>
    <string name="menu_settings">Settings</string>

</resources>

Now go to MainActivity.java class file. Some of the code remains as it was left in the end of the previous tutorial. Remove the "implements OnClickListener" from class definition line, remove everything related to buttons and their listeners. Instead, declare references to the three radio buttons and add listeners to them:

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

myField = (TextView)findViewById(R.id.myText);

final Button r1 = (Button)findViewById(R.id.radio1);
r1.setOnClickListener(radioHandler);

final Button r2 = (Button)findViewById(R.id.radio2);
r2.setOnClickListener(radioHandler);

final Button r3 = (Button)findViewById(R.id.radio3);
r3.setOnClickListener(radioHandler);
}

The radioHandler handler is an OnClickListener instance that includes an onClick() function. The onClick() function is executed when a radio button is clicked. Use a switch case and check for ids of the clicked radio buttons to change the text approporiately:

public OnClickListener radioHandler = new OnClickListener(){
public void onClick(View v){
switch (v.getId()){
case R.id.radio1:
myField.setText("The first radio button is selected!");
break;
case R.id.radio2:
myField.setText("The second radio button is selected!");
break;
case R.id.radio3:
myField.setText("The third radio button is selected!");
break;
}
}
};

Full class code:

package com.kircode.codeforfood_test;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;

public class MainActivity extends Activity{

private TextView myField;

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

myField = (TextView)findViewById(R.id.myText);

final Button r1 = (Button)findViewById(R.id.radio1);
r1.setOnClickListener(radioHandler);

final Button r2 = (Button)findViewById(R.id.radio2);
r2.setOnClickListener(radioHandler);

final Button r3 = (Button)findViewById(R.id.radio3);
r3.setOnClickListener(radioHandler);
}

public OnClickListener radioHandler = new OnClickListener(){
public void onClick(View v){
switch (v.getId()){
case R.id.radio1:
myField.setText("The first radio button is selected!");
break;
case R.id.radio2:
myField.setText("The second radio button is selected!");
break;
case R.id.radio3:
myField.setText("The third radio button is selected!");
break;
}
}
};

@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;
}

}

Now you can test your application on a device or an emulator and you'll see 3 selectable radio buttons, that change the text based on the selected value.



Thanks for reading!

No comments:

Post a Comment