Hướng dẫn và ví dụ Android RadioGroup và RadioButton

RadioButton & RadioGroup
Ví dụ với RadioGroup & RadioButtons
Phụ lục: Thiết kế giao diện

1. RadioButton & RadioGroup

RadioButton là một view trong Android, nó thường được sử dụng với RadioGroup. Trong đó RadioGroup là một bộ chứa (container) nó có thể chứa các RadioButton, khi bạn check chọn một radio button trong một nhóm, tất cả các radio button khác trong nhóm sẽ bị mất lựa chọn (deselect).

Dưới đây là hình ảnh các RadioButton được nhóm lại trong các nhóm khác nhau.

RadioGroup có thể sắp xếp các RadioButton theo chiều dọc hoặc chiều ngang.

2. Ví dụ với RadioGroup & RadioButtons

Xem trước ví dụ:

Tạo một project có tên AndroidRadioDemo.

File > New > New Project > Empty Activity
- Name: AndroidRadioDemo
- Package name: org.o7planning.androidradiodemo
- Language: Java

Giao diện ứng dụng:

Nếu bạn quan tâm tới các bước để thiết kế giao diện của ứng dụng này xin hãy xem phần phụ lục phía cuối bài viết.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="50dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="19dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Game Settings"
        android:textSize="24sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="30dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="19dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Game character"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <RadioGroup
        android:id="@+id/radioGroup_character"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="12dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView2">

        <RadioButton
            android:id="@+id/radioButton_male"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Male" />

        <RadioButton
            android:id="@+id/radioButton_female"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Famale" />
    </RadioGroup>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="0dp"
        android:layout_height="29dp"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:text="Difficulty Level"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup_character" />

    <RadioGroup
        android:id="@+id/radioGroup_diffLevel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginLeft="16dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="16dp"
        android:layout_marginRight="16dp"
        android:orientation="horizontal"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView3">

        <RadioButton
            android:id="@+id/radioButton_easy"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Easy" />

        <RadioButton
            android:id="@+id/radioButton_medium"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Medium" />

        <RadioButton
            android:id="@+id/radioButton_hard"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0"
            android:text="Hard" />
    </RadioGroup>

    <Button
        android:id="@+id/button_save"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="24dp"
        android:text="Save"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/radioGroup_diffLevel" />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

package org.o7planning.androidradiodemo;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.Button;
import android.widget.CompoundButton;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    private RadioGroup radioGroupCharacter;
    private RadioButton radioButtonMale;
    private RadioButton radioButtonFemale;

    private RadioGroup radioGroupDiffLevel;
    private RadioButton radioButtonEasy;
    private RadioButton radioButtonMedium;
    private RadioButton radioButtonHard;

    private Button buttonSave;

    private String LOGTAG = "AndroidRadioDemo";

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

        //
        this.radioGroupCharacter= (RadioGroup) this.findViewById(R.id.radioGroup_character);
        this.radioButtonMale = (RadioButton) this.findViewById(R.id.radioButton_male);
        this.radioButtonFemale  =  (RadioButton)this.findViewById(R.id.radioButton_female);
        this.radioButtonMale.setChecked(true);

        //
        this.radioGroupDiffLevel= (RadioGroup) this.findViewById(R.id.radioGroup_diffLevel);
        this.radioButtonEasy = (RadioButton) this.findViewById(R.id.radioButton_easy);
        this.radioButtonMedium  =  (RadioButton)this.findViewById(R.id.radioButton_medium);
        this.radioButtonHard =  (RadioButton)this.findViewById(R.id.radioButton_hard);
        this.radioButtonMedium.setChecked(true);

        this.buttonSave= (Button) this.findViewById(R.id.button_save);

        // When radio group "Difficulty Level" checked change.
        this.radioGroupDiffLevel.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                doOnDifficultyLevelChanged(group, checkedId);
            }
        });

        // When radio button "Female" checked change.
        this.radioButtonMale.setOnCheckedChangeListener(new RadioButton.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                doOnGameCharacterChanged(buttonView,isChecked);
            }
        });

        // When radio button "Male" checked change.
        this.radioButtonFemale.setOnCheckedChangeListener(new RadioButton.OnCheckedChangeListener() {

            @Override
            public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
                doOnGameCharacterChanged(buttonView,isChecked);
            }
        });

        // When button "Save" clicked.
        this.buttonSave.setOnClickListener(new Button.OnClickListener() {
            @Override
            public void onClick(View v) {
                doSave();
            }
        });
    }


    // When radio group "Difficulty Level" checked change.
    private void doOnDifficultyLevelChanged(RadioGroup group, int checkedId) {
        int checkedRadioId = group.getCheckedRadioButtonId();

        if(checkedRadioId== R.id.radioButton_easy) {
            Toast.makeText(this,"You choose the level of difficulty: Easy",Toast.LENGTH_SHORT).show();
        } else if(checkedRadioId== R.id.radioButton_medium ) {
            Toast.makeText(this,"You choose the level of difficulty: Medium",Toast.LENGTH_SHORT).show();
        } else if(checkedRadioId== R.id.radioButton_hard) {
            Toast.makeText(this,"You choose the level of difficulty: Hard",Toast.LENGTH_SHORT).show();
        }
    }

    // When radio button checked change.
    private void doOnGameCharacterChanged(CompoundButton buttonView, boolean isChecked)  {
        RadioButton radio =(RadioButton) buttonView;

        Log.i(LOGTAG, "RadioButton "+ radio.getText()+" : "+ isChecked);
    }

    // When button "Save" clicked.
    private void doSave()  {
        int difficultyLevel = this.radioGroupDiffLevel.getCheckedRadioButtonId();
        int gameCharacter = this.radioGroupCharacter.getCheckedRadioButtonId();

        RadioButton radioButtonDiffLevel = (RadioButton) this.findViewById(difficultyLevel);
        RadioButton radioButtonGameCharacter = (RadioButton) this.findViewById(gameCharacter);

        String message ="Difficulty Level: "+ radioButtonDiffLevel.getText()
                +", Game Character: " + radioButtonGameCharacter.getText() ;

        Toast.makeText(this,message,Toast.LENGTH_LONG).show();
    }
}

3. Phụ lục: Thiết kế giao diện

Sét đặt kích thước phông chữ cho TextView đầu tiên, và sét đặt hướng (orientation) nằm ngang cho RadioGroup thứ hai.

Thêm các RadioButton vào giao diện:

Sét đặt ID, Text cho các thành phần trên giao diện.

Các hướng dẫn lập trình Android

Các hướng dẫn lập trình Flutter