Thursday, July 31, 2014

Use Radio Buttons in Android

Having seen how to use the checkbox, let us now see how to render Radio Buttons in Android. In Android, we can use “android.widget.RadioButton” class to render radio buttons, and those radio buttons are generally grouped by android.widget.RadioGroup. When RadioButtons are in group,only one of them can be selected. If a radio button is previously selected, it gets automatically deselected when some other radio button in the group is clicked.

In this tutorial, we shall learn how to create two radio buttons grouped in a radio group and keep one of them checked by default. When the "Display" button is clicked, a toast message shall appear indicating which radio button is selected.

1. Strings.xml

Open the strings.xml file and add some custom strings to display the data on the screen.
File : res/values/strings.xml

<resources>
   <string name="app_name">MyApp</string>
<string name="radio_Indian">Indian</string>
<string name="radio_nonIndian">Non-Indian</string>
<string name="btn_display">Display</string>
</resources>

2. Add the Radio Button field

Open the main.xml file and add a Radio Group consisting of 2 Radio buttons. We shall also add a button to display which Radio Button is clicked.
File : res/layout/main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
   
<TextView android:id="@+id/textView1"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content"
        android:textSize="25sp"
        android:text="What is your nationality?" />
  
<RadioGroup android:id="@+id/radioNationality"
        android:layout_width="wrap_content"
       android:layout_height="wrap_content" >
       
<RadioButton android:id="@+id/radioIndian"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:text="@string/radio_Indian"
            android:checked="true" />
      
<RadioButton android:id="@+id/radioNonIndian"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="25sp"
            android:text="@string/radio_nonIndian" />
   
</RadioGroup>
   
<Button android:id="@+id/btnDisplay"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="25sp"
        android:text="@string/btn_display" />
</LinearLayout>
Note: To select a radio button by default, put android:checked="true" within the RadioButton element. Here, radio option “Indian” is selected by default.

3. Java Code

Inside the activity “onCreate()” method, we shall attach a click listener button.
File: HomeScreen.java

package com.endeavour.android;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
public class HomeScreen extends Activity {
private RadioGroup radioNatGroup;
private RadioButton radioNatButton;
private Button btnDisplay;
@Override
public void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.main);
       addListenerOnButton();
}
public void addListenerOnButton() {
      radioNatGroup = (RadioGroup) findViewById(R.id.radioNationality);
       btnDisplay = (Button) findViewById(R.id.btnDisplay);
       btnDisplay.setOnClickListener(new OnClickListener() {
              @Override
              public void onClick(View v) {
                      // get selected radio button from radioGroup
                     int selectedId = radioNatGroup.getCheckedRadioButtonId();
                     // find the radiobutton by returned id
                      radioNatButton = (RadioButton) findViewById(selectedId);
                     Toast.makeText(HomeScreen.this, radioNatButton.getText(), Toast.LENGTH_SHORT).show();
              }
       });
}
}

4. Output

The following results shall be displayed:

i. When Indian is selected


 ii. When Non-Indian is selected




No comments:

Post a Comment