Tombol

Tombol terdiri dari teks atau ikon (atau teks dan ikon) yang menyampaikan tindakan yang terjadi saat pengguna menyentuhnya.

Bergantung pada apakah Anda menginginkan tombol dengan teks, ikon, atau keduanya, Anda dapat membuat tombol di tata letak dengan tiga cara:

• Dengan teks, menggunakan class Button:

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/button_text"
      ... />
  

• Dengan ikon, menggunakan class ImageButton:

  <ImageButton
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:src="@drawable/button_icon"
      android:contentDescription="@string/button_icon_desc"
      ... />
  

• Dengan teks dan ikon, menggunakan class Button dengan atribut android:drawableLeft:

  <Button
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/button_text"
      android:drawableLeft="@drawable/button_icon"
      ... />
  

Class utama adalah sebagai berikut:

• Button
• ImageButton

Merespons Peristiwa Klik

Saat pengguna mengklik tombol, objek Button menerima peristiwa klik.

Untuk menentukan pengendali peristiwa klik untuk tombol, tambahkan atribut android:onClick ke elemen <Button> di tata letak XML Anda. Nilai untuk atribut ini harus merupakan nama metode yang ingin Anda panggil sebagai respons terhadap peristiwa klik. Activity yang meng-hosting tata letak harus mengimplementasikan metode yang sesuai nantinya.

Misalnya, berikut adalah tata letak dengan tombol yang menggunakan android:onClick:

<?xml version="1.0" encoding="utf-8"?>
<Button xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage" />

Dalam Activity yang meng-hosting tata letak ini, metode berikut mengendalikan peristiwa klik:

/** Called when the user touches the button */
fun sendMessage(view: View) {
    // Do something in response to button click
}

/** Called when the user touches the button */
public void sendMessage(View view) {
    // Do something in response to button click
}

Metode yang Anda deklarasikan dalam atribut android:onClick harus memiliki tanda tangan persis seperti yang ditampilkan di atas. Secara khusus, metode harus:

• Publik
• Menampilkan void
• Menentukan View sebagai parameter tunggalnya (ini akan menjadi View yang diklik)

Menggunakan OnClickListener

Anda juga dapat mendeklarasikan pengendali peristiwa klik secara terprogram, dan bukan di tata letak XML. Hal ini mungkin diperlukan jika Anda membuat instance Button pada runtime atau Anda perlu mendeklarasikan perilaku klik dalam subclass Fragment.

Untuk mendeklarasikan pengendali peristiwa secara terprogram, buat objek View.OnClickListener dan tetapkan objek tersebut ke tombol dengan memanggil setOnClickListener(View.OnClickListener). Contoh:

val button: Button = findViewById(R.id.button_send)
button.setOnClickListener {
    // Do something in response to button click
}

Button button = (Button) findViewById(R.id.button_send);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
        // Do something in response to button click
    }
});

Menata Gaya pada Tombol Anda

Tampilan tombol Anda (latar belakang gambar dan font) dapat bervariasi dari satu perangkat ke perangkat lainnya, karena perangkat yang diproduksi oleh berbagai produsen berbeda selalu memiliki gaya default yang berbeda untuk kontrol masukan.

Anda dapat mengontrol penataan gaya pada kontrol Anda sesuai keinginan menggunakan tema yang Anda terapkan ke semua aplikasi. Misalnya, untuk memastikan bahwa semua perangkat yang menjalankan Android 4.0 dan yang lebih tinggi menggunakan tema Holo di aplikasi Anda, deklarasikan android:theme="@android:style/Theme.Holo" di elemen <application> manifes Anda. Baca juga postingan blog, Holo Everywhere untuk mendapatkan informasi tentang cara menggunakan tema Holo saat mendukung perangkat lama.

Untuk menyesuaikan masing-masing tombol dengan latar belakang yang berbeda, tentukan atribut android:background dengan resource drawable atau warna. Atau, Anda dapat menerapkan style untuk tombol, yang bekerja dengan cara yang mirip dengan gaya HTML untuk menentukan beberapa properti gaya seperti latar belakang, font, ukuran, dan lainnya. Untuk informasi selengkapnya tentang menerapkan gaya, lihat Gaya dan Tema.

Tombol tanpa bingkai

Satu desain yang dapat berguna adalah tombol "tanpa bingkai". Tombol tanpa bingkai mirip dengan tombol dasar, perbedaannya tombol dasar tidak memiliki bingkai atau latar belakang, tetapi tetap mengubah tampilan saat statusnya berubah, seperti saat diklik.

Untuk membuat tombol tanpa bingkai, terapkan gaya borderlessButtonStyle ke tombol. Contoh:

<Button
    android:id="@+id/button_send"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/button_send"
    android:onClick="sendMessage"
    style="?android:attr/borderlessButtonStyle" />

Latar belakang kustom

Jika Anda ingin benar-benar menentukan ulang tampilan tombol, Anda dapat menentukan latar belakang kustom. Daripada menyediakan bitmap atau warna yang sederhana, latar belakang Anda harus berupa resource daftar status yang akan mengubah tampilannya bergantung pada status tombol saat ini.

Anda dapat menentukan daftar status tombol dalam file XML yang menentukan tiga gambar atau warna berbeda untuk digunakan pada status tombol yang berbeda.

Untuk membuat daftar status drawable untuk latar belakang tombol Anda:

1. Buat tiga bitmap untuk latar belakang tombol yang merepresentasikan status tombol default, yang ditekan dan difokuskan.

   Untuk memastikan gambar Anda cocok dengan berbagai ukuran tombol, buatlah bitmap tersebut sebagai bitmap 9-patch.

2. Tempatkan bitmap ke dalam direktori res/drawable/ dari project Anda. Pastikan setiap bitmap diberi nama dengan benar untuk mencerminkan setiap status tombol yang mereka wakili, seperti button_default.9.png, button_pressed.9.png, dan button_focused.9.png.
3. Buat file XML baru di direktori res/drawable/ (beri nama seperti button_custom.xml). Masukkan XML berikut:

   <?xml version="1.0" encoding="utf-8"?>
   <selector xmlns:android="http://schemas.android.com/apk/res/android">
       <item android:drawable="@drawable/button_pressed"
             android:state_pressed="true" />
       <item android:drawable="@drawable/button_focused"
             android:state_focused="true" />
       <item android:drawable="@drawable/button_default" />
   </selector>
   

   Tindakan ini menentukan satu resource drawable, yang akan mengubah gambar tersebut berdasarkan pada status tombol saat ini.

   • <item> pertama menentukan bitmap yang akan digunakan saat tombol ditekan (diaktifkan).
   • <item> kedua menetapkan bitmap yang akan digunakan saat tombol difokuskan (saat tombol disorot menggunakan tombol arah atau trackball).
   • <item>ketiga menentukan bitmap yang akan digunakan saat tombol berada dalam status default (tidak ditekan atau difokuskan).

   Catatan: Urutan elemen <item> penting untuk diperhatikan. Jika resource drawable ini dirujuk, maka elemen <item> diteruskan secara berurutan untuk menentukan elemen mana yang sesuai untuk status tombol saat ini. Karena bitmap default adalah yang terakhir, ini hanya diterapkan jika kondisi android:state_pressed dan android:state_focused sama-sama dievaluasi sebagai false.

   File XML ini sekarang merepresentasikan satu resource drawable dan jika dirujuk oleh Button untuk latar belakangnya, gambar yang ditampilkan akan berubah berdasarkan ketiga status ini.

4. Lalu cukup terapkan file XML drawable sebagai latar belakang tombol:

   <Button
       android:id="@+id/button_send"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/button_send"
       android:onClick="sendMessage"
       android:background="@drawable/button_custom"  />
   

Untuk informasi selengkapnya tentang sintaks XML ini, termasuk cara menetapkan status tombol dinonaktifkan, diarahkan, atau lainnya, baca Daftar Status Drawable.