Pendahuluan
Terkadang dalam sebuah desain from input sistem memberikan pilihan kepada user inputan apa yang harus di pilih oleh user. Metode ini di lakukan agar user bisa di arahkan kepada pilihan yang benar ketika terjadi proses interaksi antara user dengan sistem. Ada banyak jenis metode pilihan yang di sediakan oleh android studio. Disini kita hanya membebahas dua buah komponen saja yaitu checkBok dan radioButton.
ChekBok
Komponen CheckBok adalah komponen yang memberikan interaksi sistem dengan user dengan cara user memilih satu atau lebih pilihan. Artinya user dapat memilih pilihan lebih dari satu. Seperti user memberikan pilihan hobi kepada usert. Tentu hobi seseorang tidak hanya satu saja, bisa dua bahkan lebih.
Penulisan komponen chekBok dapat dilihat seperti berikut:
<CheckBox
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Silat"/>
Attribut android:text=" " merupakan attribut untuk menberikan keterangan pada checkbok.
Oke, Mari kita praktekkan. Buatlah projek baru di android studio. Setelah itu masuk ke halaman activity_main.xml. Rubah layout ke linear dan masukkan komponen TextView seperti code di bawah ini:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Pilih Hobi Anda"
android:textSize="20dp"/>
</LinearLayout>
Agar tampilan desain kita lebih menarik, kita bisa tambahkan ViewGroup berupa tabel. Sekarang anda tambahkan tabel seperti code berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Pilih Hobi Anda"
android:textSize="20dp"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:stretchColumns="1">
</TableLayout>
</LinearLayout>
Tabel memiliki attribut khusus yaitunya android:stretchColumns dan karena TableLayout adalah GroupView maka di butuhkan View di dalamnya. View tersebut adalah <TableRow>. Perhatikan pembuatan code seperti berikut:
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:stretchColumns="1">
<TableRow>
</TableRow>
</TableLayout>
Sedangkan Checkbok kita akan kita letakkan antara view TableRow tersebut. Kita akan menambah satu Row dan menambahkan 4 buah checkBok. Perhatikan code berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Pilih Hobi Anda"
android:textSize="20dp"/>
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:stretchColumns="1">
<TableRow>
<CheckBox
android:id="@+id/cb_silat"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Silat"/>
<CheckBox
android:id="@+id/cb_musik"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Musik"/>
</TableRow>
<TableRow>
<CheckBox
android:id="@+id/cb_travel"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/cb_musik"
android:text="Travelling" />
<CheckBox
android:id="@+id/cb_sepak_bola"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/cb_musik"
android:text="Sepak bola" />
</TableRow>
</TableLayout>
<Button
android:id="@+id/bt_pilih"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:text="PILIH"/>
<TextView
android:id="@+id/tv_hobi"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="15dp"
android:text="Hobi Anda :"
android:textSize="20dp"/>
</LinearLayout>
Masing-masing dari komponen checkBok kita beri attribut id yang berguna untuk mendefenisikan dan memanggil komponen tersebut di program nantinya. Jangan lupa untuk menambahkan komponen button yang di gunakan untuk memberikan action pada checkbok kita. Serta komponen TextView untuk menampilkan hasil pilihan.
Sekarang coba anda perhatikan pada tampilan halaman Design. Semoga anda bisa memahami konsepnya.
Membuat Program Menampilkan CheckBok yang Terpilih
Nah, sekarang kita bermain-main di program. Silahkan masuk ke Main_Activity.kt. Kita akan membut varabel untuk menampung nilai input dari user. Perhatikan code berikut:
class MainActivity : AppCompatActivity() {
lateinit var cbSilat:CheckBox
lateinit var cbMusik:CheckBox
lateinit var cbTravel:CheckBox
lateinit var cbSepakBola:CheckBox
.....}
Sekarang kita set nilai awal dari masing-masing input menjadi null. Tambahkan variabel berikut:
class MainActivity : AppCompatActivity() {
lateinit var cbSilat:CheckBox
lateinit var cbMusik:CheckBox
lateinit var cbTravel:CheckBox
lateinit var cbSepakBola:CheckBox
var silat=""
var musik=""
var travel=""
var sepakBola=""
Mari kita perkenalkan id dari masing-masing komponen yang telah kita buat tadi. Dalam function onCreate anda tambahkan variable berikut:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
cbSilat = findViewById(R.id.cb_silat)
cbMusik = findViewById(R.id.cb_musik)
cbTravel = findViewById(R.id.cb_travel)
cbSepakBola = findViewById(R.id.cb_sepak_bola)
val btPilih:Button =findViewById(R.id.bt_pilih)
val tvHobi:TextView=findViewById(R.id.tv_hobi)
}
Selanjutnya kita berikan action kepada tombol dengan menggunakan function onclikListener. Tambahkan source code berikut di dalam function onCreate:
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
............
btPilih.setOnClickListener(object : View.OnClickListener{
})
}
Terjadi error bukan pada code object? Klik atau arahkan cursor ke code tersebut kemudian muncul kotak dialog, pilih "Implement Members" sehingga muncul kotak dialog lain yang menampilkan class onClick. Pilih class tersebut dan klik OK. Sekarang kode program kita seperti berikut:
btPilih.setOnClickListener(object : View.OnClickListener{
override fun onClick(v: View?) {
TODO("Not yet implemented")
}
})
Oke, sekarang kita akan menambah action terhadap masing-masing komponen checkBok. Tambahkan source code berikut ke dalam function onClick:
if (cbSilat.isChecked()){
silat="\n"+ cbSilat.text.toString()
}
if(cbMusik.isChecked()){
musik ="\n"+ cbMusik.text.toString()
}
if(cbTravel.isChecked()){
travel ="\n"+ cbTravel.text.toString()
}
if(cbSepakBola.isChecked()){
sepakBola = "\n"+ cbSepakBola.text.toString()
}
}
Perhatikan pada salah satu code dalam logika percabangan tersebut. Terdapat nilai seperti "silat="\n"+ cbSilat.text.toString()". Nilai ini akan mengambil nilai text yang ada di masing-masing komponen. Anda dapat mengganti menjadi "silat="\n SILAT"". Begitu juga dengan yang lainnya. Sedangkan perintah "\n" digunakan agar nilai di tampilkan di line baru. Anda dapat menghilangkan jika tidak membutuhkan.
Selanjutnya kita akan menampilkan nilai selection yang terpilih ke dalam TextView. Tambahkan code berikut di bawah logika if.:
//Logica IF
tvHobi.text= "Hobi Anda \n"+ silat + musik + travel + sepakBola
}
Sehingga ke seluruhan program kita seperti berikut:
package com.example.latihanapp
import android.os.Bundle
import android.view.View
import android.widget.Button
import android.widget.CheckBox
import android.widget.TextView
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
lateinit var cbSilat:CheckBox
lateinit var cbMusik:CheckBox
lateinit var cbTravel:CheckBox
lateinit var cbSepakBola:CheckBox
var silat=""
var musik=""
var travel=""
var sepakBola=""
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
cbSilat = findViewById(R.id.cb_silat)
cbMusik = findViewById(R.id.cb_musik)
cbTravel = findViewById(R.id.cb_travel)
cbSepakBola = findViewById(R.id.cb_sepak_bola)
val btPilih:Button =findViewById(R.id.bt_pilih)
val tvHobi:TextView=findViewById(R.id.tv_hobi)
btPilih.setOnClickListener(object : View.OnClickListener{
override fun onClick(v: View?) {
if (cbSilat.isChecked()){
silat="\n"+ cbSilat.text.toString()
}
if(cbMusik.isChecked()){
musik ="\n"+ cbMusik.text.toString()
}
if(cbTravel.isChecked()){
travel ="\n"+ cbTravel.text.toString()
}
if(cbSepakBola.isChecked()){
sepakBola = "\n"+ cbSepakBola.text.toString()
}
tvHobi.text= "Hobi Anda \n"+ silat + musik + travel + sepakBola
}
})
}
}
Nah sekarang jalankan program anda. Berikut hasil yang di tampilkan dari projek di atas
Anda dapat mengembangkan projek tersebut lebih menarik lagi. pleace.
