Tutorial Membuat Tombol dan Menambah Icon Pada Button serta Memberikan Even onClik Di Android Studio

Pendahuluan

    Materi kali ini kali ini kita akan membahas komponen button atau di sebut sebagai tombol. Button memberikan sebuah kejadian (action) atau even seperti klik. Biasanya button berguna untuk berpindah pada activity lain atau halaman lain, namun terkadang button bisa juga berguna untuk menampilkan informasi yang lebih detail lagi.

    Android Studio menyediakan 2 jenis komponen yang memiliki aksi seperti yang di jelaskan diatas. yaitunya:

1. Button

    Penulisan komponen button dapat dilihat seperti berikut:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>

    Perhatikan attribut yang di kandung oleh komponen button berupa "android:layout_width="..." yang menentukan lebar dari button tersebut dan attribut android:layout_height="..." yang menentukan tinggi dari komponen tersebut. Serdangkan nilai yang di kandung oleh ke dua attribut tersebut adalah "wrap_content" yang berarti lebar dan tinggi dari komponen relative. Anda dapat juga menggantinya dengan nilai 'match_parent" yang berarti lebar atau tinggi sebuah komponen mengikuti layout.

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"/>

    Nah, pada halaman Design masih terlihat kosong bukan. Ini karena kita belum memberikan text pada komponen tersebut. Coba tambahkan attribut sehingga terlihat seperti berikut:

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Klik Saya"/>

    Nah bagaimana memberikan modifikasi pada text di komponen button tersebut?. Anda dapat menentukan modifikasi untuk size, warna, dan lain sebagainya. Perhatikan code berikut ini:

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Klik Saya"
android:textColor="@color/black" => Mengganti warna text
android:textSize="18dp" => menentukan ukuran font pada text
android:backgroundTint="@android:color/holo_orange_light" => warna tombol
android:textAllCaps="true" =>text dalam format kapital
android:layout_margin="10dp" => jarak pada button/>

    Sekarang coba jalankan projek anda dan perhatikan perubahan yang terjadi pada tombol yang telah anda buat. Coba anda rubah nilai dari attribut dan amati perubahannya.

Menambahkan Icon Pada Button

    Selain menampikan text pada button, ternyata ada attribut yang menawarkan agar kita bisa menampilkan icon pada button tersebut. Atribut untuk menambahkan icon tersebut bernama "android:drawableLeft/Right/Top/Button="nama Icon".  Nah berikut 4 jenis attribut yang menentukan posisi letak sebuah icon

drawableLeft       => Posisi icon dibagian kiri

drawableRight     => Posisi icon dibagian kanan

drawalbeTop        => Posisi icon dibagian Atas

drawableButton   => Posisi icon dibagian Bawah

    Bagaimana mengimplementasikannya ke dalam komponen button? pertama-tama kita harus menentukan icon yang akan kita masukkan. Android Studio sendiri telah menyediakan berbagai jensi icon. Cara menambahkan icon pada library dapat dilihat pada artike berikut:

https://barintek.blogspot.com/2023/02/imageview-berupa-vector-dan-menambah.html

    Nah disini kami asumsikan anda telah memiliki icon yang tersimpan di root folder drawable. Di sini terdapat satu icon bernama user_cirle_24.  Perhatikan penambahan attribut pada button  di code berikut ini: 

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Klik Saya"
    android:drawableLeft="@drawable/user_circle_24"/>

    Code di atas memposisikan icon terletak pada bagian kiri. Anda dapat mengganti posisinya dengan mengganti attribut dengan salah satu jenis attribut yang telah di jelaskan di atas.

Berikut bentuk Code program xml untuk menerapkan Ke empat posisi icon:

<?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">

<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/home_24"
android:backgroundTint="@color/design_default_color_error"
android:text="Home"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableTop="@drawable/user_circle_24"
android:backgroundTint="@android:color/holo_orange_light"
android:text="Profil"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableRight="@drawable/airplanemode_active_24"
android:backgroundTint="@color/black"
android:text="Travelling"/>
<Button
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:drawableBottom="@drawable/shopping_cart_24"
android:backgroundTint="?attr/editTextColor"
android:text="Buy"/>
</LinearLayout>

Hasil dari program di atas dapat dilihat seperti berikut:

2. Image Button

    Selain Button, imageButton juga dapat dijadikan sebuah tombol. IamgeButton merupakan sebuah komponen button yang memiliki sebuah image yang dijadikan link untuk membuka activity baru. Artinya gambar kita jadikan sebagai button.  Berikut penulisannya.

<ImageView
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:src="@drawable/ic_launcher_background"
    android:background="@color/cardview_dark_background"
    android:scaleType="centerInside"/>

    Atribut android:src="@drawable/ic_user" merupakan atribut yang digunakan untuk memanggil sebuah gambar vector. Sedangkan atribut android:scaleType="centerInside"/> berfungsi sebagai posisi gambar didalam button. Nilai yang dikandung oleh scaleType adalah seperti berikut:

1. fitStart        => posisi gambar di bagian kiri
2. fitEnd         => Posisi gambar di bagian kanan
3. fitCenter     => Posisi gambar dibagian tengah.
4. fitXY          =>Menjadikan gambar full 
5. CenterCrop =>Memotong gambar dan menyesuaikan dengan bingkai

    Perhatikan penulisan code xml berikut:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
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:padding="20dp"
tools:context=".MainActivity">
<ImageView
android:id="@+id/img_header"
android:layout_width="match_parent"
android:layout_height="200dp"
android:src="@drawable/sate"
android:scaleType="centerCrop"/>

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="fitStart"
android:src="@drawable/bakso"
android:layout_below="@+id/img_header"/>
<ImageView
android:id="@+id/img_slide2"
android:layout_width="100dp"
android:layout_height="100dp"
android:scaleType="fitCenter"
android:src="@drawable/rendang"
android:layout_below="@+id/img_header"
android:layout_centerHorizontal="true"/>

<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/img_header"
android:layout_marginLeft="38dp"
android:layout_toRightOf="@+id/img_slide2"
android:scaleType="fitXY"
android:src="@drawable/soto" />
</RelativeLayout>

    Berikut Hasil Projke kita:

Memberi Event onClik pada Tombol

    Agar sebuah tombol memiliki kejadian (Event) atau aksi (action) maka perlu ditambahkan sebuah attribut android:onClick="nama_button" pada button maupun ImageButton. Berikut bentuk penulisannya:

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Klik Saya" => Ini akan menjadi Function di Program
android:onClick="funAction"/>

    Jika program di jalankan dan tombol di klik maka belum terjadi aksi apapun. Kita perlu melakukan code pada MainActiviy.kt / MainActiviy.java. Code tersebut di buat dalam bentuk function. Perhatikan pada scritp button di atas, nilai yang dikandung oleh android:onClick adalah "funAction". Berarti kita akan membuat function di MainActiviy.kt dengan nama "funAction". Perhatikan penulisan codenya:

public void namaMethod(View view) {
    // script program
}

    Nah code tersebut di letakkan pada MainActivity.kt. Silahkan buka file tersebut dan tambahkan code seperti berikut:

class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
}

fun funAction(view: View) { => Nama Function Sesuai dengan att OnClick

}
}

    Apa sudah siap? tentu belum, kita baru membuat nama funtionnya, tapi belum ada perintah yang akan di eksekusi. Jadi kita perlu menambahkan baris program lagi. Di sini kita akan memberikan class "toash" yaitu sebuah library yang akan menampilkan pada user. Pesan akan muncul pada bagian bawah halaman android.

    Cara menambahkan Toash, anda cukup mengetikkan toash di dalam function funAction() sehingga muncul kotak dialog. Pilih toash kemudian tekan enter pada keyboard. Otomatis pemanggilan library akan di tambah dan baris code juga akan ditambah. Perhatikan script berikut:

fun funAction(view: View) {
Toast.makeText(this, "Tulis Pesan Yang akan ditampilkann", Toast.LENGTH_SHORT).show()
}

    NB: Jangan lupa mengetikkan perintah "this" dan tulis pesan yang ingin anda sampaikan dengan mengganti text nya.

Penulisan di bahasa Java:

public void Tombol1(View view) {
    Toast.makeText(MainActivity.this, "Tulis Pesan Disini", Toast.LENGTH_LONG).show();
}

    

    Toast memberikan masukan singkat tentang operasi dalam bentuk pop-up kecil. Pop-up ini hanya memenuhi ruang yang diperlukan agar pesan dan aktivitas saat ini tetap terlihat dan interaktif. Toast otomatis menghilang setelah waktu tunggu.