Tutorial Cara Membuat Radio Button di Android dengan Android Studio

Kali ini kita akan mencoba untuk membuat Radio Button di Android menggunakan Android Studio. Radio Button adalah salah satu elemen layout di Android yang sering dipakai, yang biasanya berfungsi untuk menginputkan data yang berupa pilihan dan hanya satu saja yang bisa dipilih, mirip seperti Spinner. Contohnya seperti inputan “Jenis Kelamin”, dan pilihan Yes/No/Toggle lainnya.  Di Android, kalian bisa menggunakan class android.widget.RadioButton, untuk membuat elemen layout radio button. Radio Button di Android biasanya digrup/dibungkus lagi dengan kelas android.widget.RadioGroup, supaya apabila satu RadioButton di dalam RadioGroup sudah dipilih/dicentang, maka RadioButton yang lainnya akan otomatis state nya berubah menjadi unselected/tidak terpilih.

 Cara Membuat Material Radio Button di Android dengan Android Studio

Oke langsung saja, pertama-tama kita akan membuat project baru di Android Studio terlebih dahulu. Setelah itu pada file activity_main.xml kita ubah seperti berikut.:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:orientation="vertical">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Select Gender : " />

    <RadioGroup
        android:id="@+id/rg_gender"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/rb_male"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:checked="true"
            android:text="Male" />

        <RadioButton
            android:id="@+id/rb_female"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Female" />
    </RadioGroup>

    <Button
        android:id="@+id/bt_submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Submit" />

</LinearLayout>

Jika ingin membuat RadioButton otomatis terpilih secara default, kita bisa menambahkan code

android:checked="true"

di dalam view RadioButton yang ingin dipilih secara otomatis, Pada kasus ini kita menambahkan pada pilihan Male, sehingga RadioButton dengan pilihan “Male” akan otomatis terpilih secara default.

Setelah itu, kita langsung buka file MainActivity.java nya. Di situ kita akan menerapkan logicnya, yaitu kita memilih satu RadioButton, kemudian ketika kita klik tombol “Submit” maka akan muncul Toast yang berisi value dari RadioButton yang kita pilih.

/**
 * Created by Hafizh Herdi on 8/21/2016.
 */
public class MainActivity extends AppCompatActivity {

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

        final RadioGroup rgGender = (RadioGroup) findViewById(R.id.rg_gender);
        Button btSubmit = (Button) findViewById(R.id.bt_submit);
        btSubmit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                int id = rgGender.getCheckedRadioButtonId();
                switch (id){
                    case R.id.rb_male :
                        Toast.makeText(TWOHLayoutRadioButton.this,"Clicked "+((RadioButton)findViewById(id)).getText(), Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.rb_female :
                        Toast.makeText(TWOHLayoutRadioButton.this,"Clicked "+((RadioButton)findViewById(id)).getText(), Toast.LENGTH_SHORT).show();
                        break;
                }
            }
        });
    }
}

Pada kode diatas jika dicermati, ketika kita mengklik tombol submit, maka kita akan mengambil id dari RadioButton yang dipilih dari RadioGroup menggunakan RadioGroup.getCheckedRadioButtonId(). Setelah itu dengan switch case, kita akan menentukan RadioButton mana yang dipilih dengan melihat dari id yang tadi diambil.

Demo

Mudah bukan, sekarang mari kita jalankan projectnya dan kita demokan :

android radio button

android radio button

Oke, jika kita lihat di gambar pertama. Option “Male” sudah terpilih secara otomatis, karena kita setChecked=”true” pada XML nya. Kemudian kitka kita pilih Female dan klik Submit, maka akan muncul Toast dengan value RadioButton yang kita pilih.

That’s all ! Semoga membantu. ? Dan jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya, dengan terlebih dahulu follow dan star project tersebut. ?Silahkan bertanya di bagian komentar jika ada yang kurang jelas.

 

 





Download aplikasi kami di Google Play Store


Leave a Reply