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 mengomunikasikan tindakan apa yang terjadi ketika pengguna mengetuknya.

Anda bisa membuat tombol pada tata letak dengan salah satu dari tiga cara, tergantung 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 akan menghasilkan seperti ini:

Merespons peristiwa klik

Saat pengguna mengetuk tombol, Objek Button menerima peristiwa saat diklik.

Untuk mendeklarasikan pengendali peristiwa secara terprogram, buat sebuah View.OnClickListener dan menetapkannya ke tombol dengan memanggil setOnClickListener(View.OnClickListener), seperti dalam 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");
    }
});

Sesuaikan gaya tombol Anda

Tampilan tombol Anda—gambar latar belakang dan font—bervariasi di antara perangkat, karena perangkat dari produsen yang berbeda sering kali memiliki gaya {i>default<i} yang berbeda untuk input kontrol.

Untuk menyesuaikan setiap tombol dengan latar belakang yang berbeda, tentukan atribut Atribut android:background dengan resource warna atau drawable. Atau, Anda dapat menerapkan gaya untuk tombol tersebut, yang bekerja dengan cara yang mirip dengan HTML untuk mendefinisikan beberapa properti gaya seperti latar belakang, {i>font<i}, 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 menyerupai tombol dasar kecuali bahwa mereka tidak memiliki batas atau latar belakang tetapi masih mengubah penampilan selama keadaan yang berbeda, seperti saat diketuk.

Untuk membuat tombol tanpa bingkai, terapkan gaya borderlessButtonStyle ke tombol, seperti dalam 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 khusus. Namun, alih-alih menyediakan bitmap atau warna yang sederhana, latar belakang Anda harus berupa daftar status aset yang mengubah tampilan bergantung pada status tombol saat ini.

Anda bisa mendefinisikan daftar keadaan dalam file XML yang mendefinisikan tiga gambar atau warna yang akan digunakan untuk status tombol yang berbeda.

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

1. Membuat tiga bitmap untuk latar belakang tombol yang mewakili default, yang diketuk, dan difokuskan status tombol. Untuk memastikan gambar Anda sesuai dengan berbagai ukuran tombol, buatlah bitmap sebagai nine-patch.
2. Tempatkan bitmap ke dalam direktori res/drawable/ project Anda. Memberi 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 seperti button_custom.xml. Sisipkan 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>
   

   Ini mendefinisikan satu sumber daya drawable yang mengubah gambarnya berdasarkan status saat ini dari tombolnya.

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

   File XML ini mewakili satu resource drawable. Jika direferensikan oleh Button untuk di latar belakang, 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 informasi selengkapnya tentang sintaksis XML ini, termasuk cara mendefinisikan tombol yang dinonaktifkan, dengan kursor, atau dalam keadaan lain, membaca StateListDrawable.