Tutorial Membuat Radio Button dan Radio Group Pada Android

thumbnail

Kali ini, saya akan memberikan tutorial pada teman-teman mengenai penggunaan RadioButton pada Android Studio, RadioButton hampir sama dengan CheckBox, yaitu digunakan untuk mencatak opsi/pilihan bernilai true dan false.

RadioButton adalah widget untuk membuat opsi pilihan yang bersifat mutual exclusive. Berbeda dengan checkbox dimana kita dapat memilih beberapa opsi sekaligus. Jika kamu menggunakan RadioButton dan Radio Group, maka user hanya dapat memilih salah satu saja dari beberapa opsi yang diberikan. Jika RadioButton tidak berada didalam Radio Group, maka saat user mengklik salah satu opsi akan mengembalikan nilai true dan tidak bisa menjadi false kembali.

Dalam best practice lebih baik menggunakan RadioGroup dan RadioButton bersama untuk membuat opsi pilihan memilih salah satu dari beberapa opsi pilihan yang ada, jadi tidak bisa memilih semua opsi sekaligus (mutual exclusive).

Saya akan berikut contoh pertama, mengenai bagaimana cara RadioButton berjalan didalam RadioGroup. Pertama, buat file activity_main.xml seperti dibawah:


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"
android:orientation="vertical"
android:padding="10dp"
tools:context="com.inpows.radiobuttongroup.MainActivity">

<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:text="Berapakah hasil penjumlahan 2 + 2 ?"
android:textSize="15sp"
android:textStyle="bold"
android:textColor="@android:color/black"/>

<RadioGroup
android:id="@+id/opsi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginTop="8dp"
android:orientation="vertical">

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

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

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

<Button
android:id="@+id/jawab"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Jawab" />

<Button
android:id="@+id/reset"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Reset" />

Kedua, menggunakan boolean untuk menset hasil yang benar. Akan dipanggil RadioGroup dan RadioButton didalam Class MainActivity.java.Dapat menggunakan setOnCheckedChangedListener() pada RadioGroup. Jika ada salah satu opsi yang terpilih, maka program akan menjalankan statement atau perintah menurut opsi yang dipilih oleh user.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
private boolean jawaban = false;
RadioButton j1;
RadioButton j2;
RadioButton j3;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final RadioGroup list_opsi = findViewById(R.id.opsi);
j1 = findViewById(R.id.j1);
j2 = findViewById(R.id.j2);
j3 = findViewById(R.id.j3);

list_opsi.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int id) {
switch (id){
case R.id.j1:
jawaban = true;
break;
case R.id.j2:
jawaban = false;
break;
case R.id.j3:
jawaban = false;
break;
}
}
});

Button jawab = findViewById(R.id.jawab);
jawab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Cara1();
}
});

Button reset = findViewById(R.id.reset);
reset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
list_opsi.clearCheck();
}
});
}

private void Cara1() {
if (!jawaban) {
ShowToast("Jawaban Kamu Tidak Tepat.");
} else {
ShowToast("Jawaban Kamu Benar.");
}
}

private void ShowToast(String message) {
Toast.makeText(getApplication(), message, Toast.LENGTH_SHORT).show();
}
}

Cara kedua dapat menggunakan fungsi isChecked pada MainActivity.java

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
private boolean jawaban = false;
RadioButton j1;
RadioButton j2;
RadioButton j3;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final RadioGroup list_opsi = findViewById(R.id.opsi);
j1 = findViewById(R.id.j1);
j2 = findViewById(R.id.j2);
j3 = findViewById(R.id.j3);

Button jawab = findViewById(R.id.jawab);
jawab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Cara2();
}
});

Button reset = findViewById(R.id.reset);
reset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
list_opsi.clearCheck();
}
});
}

private void Cara2() {
if (j1.isChecked()) {
ShowToast("Jawaban Kamu Benar.");
} else if (j2.isChecked()) {
ShowToast("Jawaban Kamu Tidak Tepat.");
} else {
ShowToast("Jawaban Kamu Tidak Tepat.");
}
}

private void ShowToast(String message) {
Toast.makeText(getApplication(), message, Toast.LENGTH_SHORT).show();
}
}

Ketiga, Klik Run ‘app’ (Shift + F10). Berikut adalah Screenshot hasil yang didapat.

Berikut Full Code Pada MainAcitivity.java jadi teman-teman bisa belajar.

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
private boolean jawaban = false;
RadioButton j1;
RadioButton j2;
RadioButton j3;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final RadioGroup list_opsi = findViewById(R.id.opsi);
j1 = findViewById(R.id.j1);
j2 = findViewById(R.id.j2);
j3 = findViewById(R.id.j3);

list_opsi.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup radioGroup, int id) {
switch (id){
case R.id.j1:
jawaban = true;
break;
case R.id.j2:
jawaban = false;
break;
case R.id.j3:
jawaban = false;
break;
}
}
});

Button jawab = findViewById(R.id.jawab);
jawab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Cara1(); //Cara1() Tidak Aktif
Cara2(); //Cara2() aktif
}
});

Button reset = findViewById(R.id.reset);
reset.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
list_opsi.clearCheck();
}
});
}

private void Cara2() {
if (j1.isChecked()) {
ShowToast("Jawaban Kamu Benar.");
} else if (j2.isChecked()) {
ShowToast("Jawaban Kamu Tidak Tepat.");
} else {
ShowToast("Jawaban Kamu Tidak Tepat.");
}
}

private void Cara1() {
if (!jawaban) {
ShowToast("Jawaban Kamu Tidak Tepat.");
} else {
ShowToast("Jawaban Kamu Benar.");
}
}

private void ShowToast(String message) {
Toast.makeText(getApplication(), message, Toast.LENGTH_SHORT).show();
}
}

Back To Top