cara membuat Radio Button, CheckBox, EditText pada Android Studio

Radio Button, CheckBox, EditText
Hai kembali lagi di blog saya malasnugas.com . kali ini saya akan membahas tentang penggunaan widget Radio Button, CheckBox, EditText pada Android studio.
Paket widget pada dasarnya merupakan visualisasi dari elemen user integace (UI) yang digunakan pada layar aplikasi Android di mana kita dapat merancang sendiri sesuai kebutuhan.
Widget di dalam Android ditampilkan dengan konsep View. Di mana aplikasi Android pada umumnya menggunakan widget sebagai Layout XML. Untuk mengimplementasikan widget, selain file java kita juga membutuhkan tambahan dua file. Berikut ini adalah file-file yang umumnya kita butuhkan apabila kita membuat widget:
1. File Java. Berupa file java di mana merupakan file yang mengimplementasikan aksi dari widget. Jika kita mendefinisikan suatu widget beserta posisinya di layar yang didefinisikan dari file XML, kita harus melakukan coding di file java di mana kita dapat mengambil semua nilai atribut dari tata letak file XML yang didefinisikan.
2. File XML. Sebuah file yang mendefinisikan komponen elemen-elemen XML yang digunakan untuk inisialisasi widget serta atribut yang mendukungnya.
3. Layout XML. File XML menggambarkan atau penambahan keterangan pada layout widget kita.
Beberapa komponen widget akan kita bahas saat ini. Widget TextView, menampilkan teks ke layar dan memiliki optional bisa dilakukan edit, tetapi secara default TextView tidak dapat diedit. Untuk dapat melakukan edit harus menggunakan subclass yang berfungsi untuk menampilkan TextView. EditText adalah kostumisasi TextView dimana menjadi TextView yang dapat mengkonfigurasi dirinya sendiri sehingga dapat diedit.
Sedangkan widget RadioButton/RadioGroup biasanya digunakan bersama-sama. Di dalam satu RadioGroup terdapat beberapa RadioButton. Dan di dalam satu RadioGroup user hanya dapat melakukan satu check/pemilihan RadioButton.
Untuk memperjelas lagi tentang penggunaan widget-widget Radio Button, CheckBox, EditText anda dapat mencoba mempraktikkanya menggunakan scribt sederhana yang telah saya sediakan berikut ini sehingga nantinya anda akan lebih mudah untuk memahami fungsi serta penggunaanya. Berikut adalah langgkah-langkahnya:
1. Buat project baru. Pada content.xml tuliskan koding berikut (perhatikan lokasi paket milih anda)

<? xml version="1.0" encoding="utf-8" ?> < RelativeLayout 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" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" app:layout_behavior="@string/appbar_scrolling_view_behavior" tools:context="com.example.lucianugraheni.pertemuan3.MainActivity" tools:showIn="@layout/activity_main" > < TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tuliskan nama anda" android:id="@+id/textNama" /> < EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/editNama" android:layout_below="@+id/textNama" /> < TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Tuliskan NIM anda" android:id="@+id/textNim" android:layout_below="@id/editNama" /> < EditText android:layout_width="fill_parent" android:layout_height="wrap_content" android:id="@+id/editNim" android:layout_below="@+id/textNim" /> < Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Proses" android:id="@+id/buttonProses" android:onClick="onClick" android:layout_below="@+id/editNim" /> < TextView android:layout_width="fill_parent" android:layout_height="200dp" android:id="@+id/textTampil" android:layout_below="@id/buttonProses" android:gravity="center_horizontal" android:textSize="@dimen/activity_horizontal_margin" android:fontFamily="casual" android:textColor="#00ffff" /> </RelativeLayout>

2. Tuliskan pada file MainActivity.java koding berikut

public class MainActivity extends AppCompatActivity { EditText editNama ,editNim ; TextView editHasil; Button button; CheckBox cb; @Override protected void onCreate(Bundle savedInstanceState) { ................................. //koding lain yang sudah ada editNama = (EditText) findViewById(R.id.editNama);editNim = (EditText) findViewById(R.id.editNim);editHasil = (TextView) findViewById(R.id.textTampil);button = (Button) findViewById(R.id.buttonProses);cb = (CheckBox) findViewById(R.id. checkBox); } protected void onClick(View view){ String nama, nim; nama =editNama.getText().toString(); nim =editNim.getText().toString(); editHasil.setText("" +nama+nim); } ................................. //koding lain yang sudah ada }

3. Jalankan dan amati hasilnya.
4. Kemudian tambahkah komponen checkbox dan textview pada file xmlnya. Kodingnya adalah sebagai berikut.

<CheckBox android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="@string/checkBox" android:id="@+id/checkBox" android:layout_below="@+id/textView" android:layout_alignParentStart="true" android:onClick="onCheckboxClicked"/>

5. Dan tambahkan pada file ActivityUtama.java sehingga menjadi sebagai berikut

public class ActivityUtama extends ActionBarActivity { .................... //koding yang sudah ada CheckBox cb; protected void onCreate(Bundle savedInstanceState) { .........................//koding yang sudah ada cb = (CheckBox)findViewById(R.id.checkBox); } .....................//koding yang sudah ada public void onCheckboxClicked(View view) { boolean checked = ((CheckBox) view).isChecked(); if (checked) cb.setText("checkBox ini: Dicenthang"); else cb.setText("checkBox ini: Tidak Dicenthang"); } .....................//koding yang sudah ada }

6. Jalankan dan amati hasilnya dengan mengubah kondisi CheckBox terpilih atau tidak.
7. Kemudian, tambahkan RadioButton pada file xml nya.

<LinearLayout .......................//koding yang sudah ada android:id="@+id/relativeLayout" > <RadioGroup android:layout_width="match_parent" android:layout_height="wrap_content" android:paddingTop="@dimen/activity_vertical_margin"> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Blue" android:id="@+id/blue" android:onClick="onRadioButtonClicked" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Red" android:id="@+id/red" android:onClick="onRadioButtonClicked" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Green" android:id="@+id/green" android:onClick="onRadioButtonClicked" /> <RadioButton android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Yellow" android:id="@+id/yellow" android:onClick="onRadioButtonClicked" /> </RadioGroup>

8. Kemudian pada file java, tuliskan koding sehingga menjadi seperti berikut

public class MainActivity extends ActionBarActivity { ..........................//koding yang sudah ada ReltiveLayout relativeLayout; @Override protected void onCreate(Bundle savedInstanceState) { ..........................//koding yang sudah ada relativeLayout =(RelativeLayout) findViewById(R.id. relativeLayout); } public void onRadioButtonClicked(View view) { boolean checked = ((RadioButton) view).isChecked();switch(view.getId()) {case R.id.blue:if (checked) {relativeLayout.setBackgroundColor(Color.BLUE); }break;case R.id.red:if (checked){relativeLayout.setBackgroundColor(Color.RED); }break;case R.id.green:if (checked){relativeLayout.setBackgroundColor(Color.GREEN); }break; case R.id.yellow : if (checked){relativeLayout.setBackgroundColor(Color. YELLOW); }break; } }

Share this post