Eclipse Radio Button (ERB)


ERB:   SOLD       




In this chapter, we will create a simple application using RadioButton. The scenario has 5 RadioButtons, each given the text Horizontal, Vertical, Right, Middle, and Left. If one of the RadioButtons is selected, the arrangement of the RadioButtons will change according to the selection.


Figure 6.5. (a) Combination of vertical display with right alignment (b) combination of horizontal display with center

Curious? Come on, let's practice..

1. Run Enclipse, create a new Project (figure 6.3)


Figure 6. 6

2. Fill in the parameters as follows

| Project name     | RadioButton              |
|------------------|--------------------------|
| Build Target     | Android 2.2              |
| Application name | Menampilkan Radio Button |
| Package name     | contoh.RadioButton       |
| Create Activity  | RadioButton              |
| Min SDK version  | 8                        |

3. Then type the following code in main.xml (Figure 6.4)

<?xml version="1.0" encoding="utf-8"?>
    <LinearLayout
 xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_height="fill_parent"
      android:layout_width="fill_parent"
      android:orientation="vertical">
         <RadioGroup android:padding="5px"
         android:layout_height="wrap_content"
         android:layout_width="wrap_content"
         android:id="@+id/orientation"
         android:orientation="horizontal">
             <RadioButton android:layout_height="wrap_content"
               android:layout_width="wrap_content"
               android:id="@+id/horizontal"
               android:text="Horizontal">
             </RadioButton>
             <RadioButton android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:id="@+id/vertical"
                android:text="Vertical">
             </RadioButton>
  </RadioGroup>
<RadioGroup android:id="@+id/gravity"
android:orientation="vertical"
android:padding="5px"
android:layout_width="fill parent"
android:layout_height="wrap content">
 <RadioButton
  android:id="@+id/kanan"
  android:text="Kanan">
 </RadioButton>
 <RadioButton
  android:id="@+id/kiri"
  android:text="Kiri">
 </RadioButton>
 <RadioButton
  android:id="@+id/tengah"
  android:text="Tengah">
 </RadioButton>
</RadioGroup>
</LinearLayout>


Figure 6. 1. Location of the main.xml layout in the package

4. Type the RadioButton.java code as follows (Figure 6.5)

package contoh.radioButton;

 import android.app.Activity;
 import android.os.Bundle;
 import android.view.Gravity;
 import android.widget.LinearLayout;
 import android.widget.RadioGroup;

 public class radioButton extends Activity implements
 RadioGroup.OnCheckedChangeListener {
 /** Called when the activity is first created. */

 RadioGroup orientation;
 RadioGroup gravity;

 @Override
 public void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.main);

 orientation = (RadioGroup) findViewById(R.id.orientation);
 orientation.setOnCheckedChangeListener(this);
 gravity = (RadioGroup) findViewById(R.id.gravity);
 gravity.setOnCheckedChangeListener(this);

 }

 public void onCheckedChanged(RadioGroup group,
 int checkId) {
 switch (checkId) {
 case R.id.horizontal:
 orientation.setOrientation(LinearLayout.HORIZONTAL);
 break;
 case R.id.vertical:
 orientation.setOrientation(LinearLayout.VERTICAL);
 break;
 case R.id.kiri:
 gravity.setGravity(Gravity.LEFT);
 break;
 case R.id.tengah:
 gravity.setGravity(Gravity.CENTER);
 break;
 case R.id.kanan:
 gravity.setGravity(Gravity.RIGHT);
 break;
 }
 }
 }


Figure 6. 2. Activity radioButton.java in the package

5. If the code is messy, do Format (source > format).

6. Do RUN and see the result. Yeah! It's that easy.

Program Explanation

We start from the main.xml layout. RadioGroup is different from RadioButton. RadioGroup is a collection of several RadioButtons. In this layout, we have 2 RadioGroups

  1. Line 7-22 : The first RadioGroup with id "orientation". Has 2 radioButtons each with id "Horizontal" and "vertical".
  2. Lines 23-40: Second RadioGroup with id "gravity. Has 3 radioButtons each with id "left", "center", "right".

Now we move to the radioButton activity. This activity implements the RadioGroup.OnCheckedChangeListener class, so that the system can know that a radioButton has been clicked. To make it easier to understand, I divided it into 3 parts

  1. Line 13-14  😃declares the RadioGroup and RadioButton objects.
  2. Line 21-24: Synchronize the declared object with the widget in main.xml, while also activating the radioButton so that it functions when clicked. 
  3. Line 28-47 : function to be executed if one of the radioButtons is clicked

Apart from using XML, there is another way to determine the orientation of a layout, namely through the setOrientation() method as in Lines 32 and 35. Likewise, the gravity of an object can also be set from Java via the setGravity() method.


Post a Comment

Previous Next

نموذج الاتصال