Tambahkan tombol aksi mengambang

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menambahkan komponen di Compose.
Floating Action Button →

Tombol tindakan mengambang (FAB) adalah tombol lingkaran yang memicu tindakan utama di UI aplikasi Anda. Dokumen ini menunjukkan cara menambahkan FAB ke tata letak, menyesuaikan sebagian tampilannya, dan merespons ketukan tombol.

Untuk mempelajari lebih lanjut cara mendesain FAB untuk aplikasi Anda sesuai dengan Panduan Desain Material, lihat FAB Desain Material .

Gambar yang menampilkan layar aplikasi yang berisi FloatingActionButton merah
Gambar 1. Tombol tindakan mengambang (FAB).

Menambahkan tombol tindakan mengambang ke tata letak Anda

Kode berikut menunjukkan tampilan FloatingActionButton dalam file tata letak Anda:

<com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:src="@drawable/ic_my_icon"
        android:contentDescription="@string/submit"
        android:layout_margin="16dp" />

Secara default, FAB diberi warna dengan atribut colorAccent, yang dapat Anda sesuaikan dengan palet warna tema.

Anda dapat mengonfigurasi properti FAB lainnya menggunakan atribut XML atau metode yang sesuai, seperti berikut:

  • Ukuran FAB, menggunakan atribut app:fabSize atau metode setSize()
  • Warna ripple FAB, menggunakan atribut app:rippleColor atau metode setRippleColor()
  • Ikon FAB, menggunakan atribut android:src atau metode setImageDrawable()

Merespons ketukan tombol

Selanjutnya, Anda dapat menerapkan View.OnClickListener untuk menangani ketukan FAB. Misalnya, kode berikut menampilkan Snackbar saat pengguna mengetuk FAB:

Kotlin

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

Java

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                .setAction("Action", null).show();
    }
});

Untuk informasi selengkapnya tentang kemampuan FAB, lihat referensi API untuk FloatingActionButton.