Menambahkan tombol ke aplikasi

Mencoba cara Compose

Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menambahkan komponen di Compose.

Tombol →

Tombol terdiri dari teks atau ikon, atau keduanya, yang menyampaikan tindakan yang terjadi saat pengguna mengetuknya.

Anda dapat membuat tombol di tata letak dengan salah satu dari tiga cara, bergantung pada apakah Anda menginginkan tombol dengan teks, ikon, atau keduanya:

  
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:paddingLeft="16dp"
      android:paddingRight="16dp"
      android:orientation="vertical" >
  
      <Button
          android:id="@+id/supabutton"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="I'm a button" />
  
      <ImageButton
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:contentDescription="A tiny Android icon"
          android:src="@drawable/baseline_android_24"
          app:tint="#ff0000" />
  
      <Button
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:drawableStart="@drawable/baseline_android_24"
          android:drawablePadding="4dp"
          android:drawableTint="#ff0000"
          android:text="I'm a button with an icon" />
  </LinearLayout>

Kode sebelumnya menghasilkan sesuatu seperti ini:

Merespons peristiwa klik

Saat pengguna mengetuk tombol, objek Button akan menerima peristiwa klik.

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

findViewById<Button>(R.id.supabutton)
  .setOnClickListener {
      Log.d("BUTTONS", "User tapped the Supabutton")
  }

Button button = (Button) findViewById(R.id.supabutton);
button.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
      Log.d("BUTTONS", "User tapped the Supabutton");
    }
});

Menata gaya tombol

Tampilan tombol Anda—gambar latar dan font—berbeda di antara perangkat, karena perangkat yang diproduksi oleh berbagai produsen berbeda selalu memiliki gaya default yang berbeda untuk kontrol input.

Untuk menyesuaikan masing-masing tombol dengan latar belakang yang berbeda, tentukan atribut android:background dengan resource drawable atau warna. Atau, Anda dapat menerapkan gaya untuk tombol, yang bekerja dengan cara yang mirip dengan gaya HTML untuk menentukan beberapa properti gaya seperti latar belakang, font, dan ukuran. Untuk informasi selengkapnya tentang cara 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 diketuk.

Untuk membuat tombol tanpa bingkai, terapkan gaya borderlessButtonStyle ke tombol, seperti pada contoh berikut:

<Button
  android:id="@+id/supabutton"
  style="?android:attr/borderlessButtonStyle"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content"
  android:text="I'm a button" />

Latar belakang kustom

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

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

Untuk membuat daftar status drawable untuk latar belakang tombol Anda, lakukan hal berikut:

1. Buat tiga bitmap untuk latar belakang tombol yang merepresentasikan status tombol default, yang diketuk, 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/ project Anda. Beri nama setiap bitmap untuk mencerminkan status tombol yang diwakilinya, 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, misalnya button_custom.xml. Masukkan XML seperti 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 mengubah gambarnya berdasarkan status tombol saat ini.

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

   File XML ini merepresentasikan satu resource drawable. Jika dirujuk oleh Button untuk latar belakangnya, gambar yang ditampilkan akan berubah berdasarkan status tombol.

4. 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 mengetahui informasi selengkapnya tentang sintaks XML ini, termasuk cara menentukan tombol yang dinonaktifkan, diarahkan, atau dalam status lain, baca StateListDrawable.