Pendahuluan
Tonton kami di youtube:
Sebelumnya kita telah membahas bagaimana memberikan aksi pada sebuah tombol. Di tutorial tersebut kita menambahkan attribut onClik di komponen button. Baca artikel sebelumnya. Nah sekarang kita akan mencoba menanganiinnya dengan function setOnclikListener. Mungkin anda akan bertanya-tanya, apa kelebihan setOnclickListener dengan onClik yang telah kita bahas sebelumnya?
Jika kita memiliki satu action saja pada desain maka materi sebelumnya sangat cocok untuk di terapkan, namun jika kita membuat beberapa action pada desain maka setOnclikListener ini adalah jawabannya. Sebab dengan metode ini akan menjadikan class lebih ringan dan program lebih simpel atau lebih sederhanya.
Oke, kita lanjut. Silahkan buat projek di android studio. Anda gunakan language: kotlin. Masuklah ke halaman activity_main.xml dan tambahkan 2 buah tombol. Perhatikan script berikut:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
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:orientation="vertical"
android:padding="20dp"
tools:context=".MainActivity">
<Button
android:id="@+id/bt_klik1"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Klik Saya Lagi" />
<Button
android:id="@+id/bt_klik2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Klik Saya" />
</LinearLayout>
Desain di atas menggukan layout "LinearLayout" dengan 2 komponen tombol. Masing masing Button memiliki id "@+id/bt_klik1" dan @+id/bt_klik2". Attribut id ini berguna nanti di saat kita membuat code untuk kotlinya.
Ada beberapa model di dalam pemberian action clik pada widget. Berikut tekniknya. Oya, anda dapat memilih salah satu dari teknik berikut:
1. Model setOnclickListener
Selanjutnya anda masuk ke Activity_Main.kt. Panggil ke dua id dari komponen Button tersebut dengan cara menambahkan variable seperti berikut:
class MainActivity : AppCompatActivity(){
lateinit var btKlik1: Button
lateinit var btKlik1: Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}
}
Nah selanjutnya kita akan memberikan action pada ke dua tombol tersebut. Lengkapi script seperti berikut:
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btKlik1 = findViewById(R.id.bt_klik1)
btKlik2 = findViewById(R.id.bt_klik2)
btKlik1.setOnClickListener {
Toast.makeText(this, "Anda memilih button 1", Toast.LENGTH_SHORT).show()
}
btKlik2.setOnClickListener {
Toast.makeText(this, "Anda memilih Button 2", Toast.LENGTH_SHORT).show()
}
}
2 Model Percabangan
Selain penulisan di atas, kita juga dapat menulis dengan menambahkan logika percabangan. Perhatikan script dibawah ini:
class MainActivity : AppCompatActivity() {
lateinit var btKlik1:Button
lateinit var btKlik2:Button
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
btKlik1 = findViewById(R.id.bt_klik1)
btKlik2 = findViewById(R.id.bt_klik2)
btKlik1.setOnClickListener(clickListener)
btKlik2.setOnClickListener(clickListener)
}
private val clickListener: View.OnClickListener = View.OnClickListener { view ->
when (view.id) {
R.id.bt_klik1-> {
Toast.makeText(this, "Clicked 1", Toast.LENGTH_SHORT).show()
}
R.id.bt_klik2-> {
Toast.makeText(this, "Clicked 2", Toast.LENGTH_SHORT).show()
}
}
}
}
3. Model Funtion
Sekarang mari kita ubah kembali code di file MainActivity.kt ke tampilan awalnya. Kita akan menggunakan metode Function untuk membuat even onclik. Tambahkan baris code setOnclick seperti berikut:
val btKlik1:Button = findViewById(R.id.bt_klik1)
val btKlik2:Button = findViewById(R.id.bt_klik2)
btKlik1.setOnClickListener(this)
btKlik2.setOnClickListener(this)
Perintah tersebut di gunakan untuk memanggil function. Namun terjadi error pada code this. Hal ini terjadi karena extension this tidak di kenali. Kita perlu membuat konstruknya terlebih dahulu. Anda tambahkan baris code berikut di dalam fun onCreate
class MainActivity : AppCompatActivity(), View.OnClickListener {
Terjadi Error lagi di class. Anda letakkan cursos di class tersebut sehingga muncul library. Pilih "Implements Members" sehingga di buatkan function baru bernama onClick. perhatikan code berikut:
override fun onClick(v: View?) {
}
Gunakan logika percabangan untuk menentukan tombol mana yang di klik oleh user. Perhatikan code berikut:
override fun onClick(v: View?) {
when(v?.id) {
R.id.bt_klik1 ->{
Toast.makeText(this, "Anda memilih button satu", Toast.LENGTH_SHORT).show()
}else->
Toast.makeText(this, "Anda Memilih tombol 2", Toast.LENGTH_SHORT).show()
}
}
Kode lengkapnya:
package com.example.latihanapp
import android.os.Bundle
import android.view.View
import android.view.View.OnClickListener
import android.widget.Button
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity(), View.OnClickListener {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val btKlik1:Button = findViewById(R.id.bt_klik1)
val btKlik2:Button = findViewById(R.id.bt_klik2)
btKlik1.setOnClickListener(this)
btKlik2.setOnClickListener(this)
}
override fun onClick(v: View?) {
when(v?.id) {
R.id.bt_klik1 ->{
Toast.makeText(this, "Anda memilih button satu", Toast.LENGTH_SHORT).show()
}else->
Toast.makeText(this, "Anda Memilih tombol 2", Toast.LENGTH_SHORT).show()
}
}
}
Sekarang coba Jalankan Program dan pilih salah satu tombol yang muncul di halaman utamanya. dan perhatikan hasilnya, terdapat toast yang muncul di bagian bawah halaman.
Nah itulah beberapa cara menggunan even onClick di Android Studio. Silahkan anda kembangkan ke dalam projek agar lebih memahami. Anda dapat juga menonton vidionya di link berikut:
