Tambahkan tombol aksi mengambang

Mencoba cara Compose
Jetpack Compose adalah toolkit UI yang direkomendasikan untuk Android. Pelajari cara menambahkan komponen di Compose.
Tombol Tindakan Mengambang →

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

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

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 cara FloatingActionButton muncul di 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 warna tema palette.

Anda dapat mengonfigurasi properti FAB lainnya menggunakan atribut XML atau , seperti berikut ini:

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

Merespons ketukan tombol

Anda kemudian dapat menerapkan View.OnClickListener ke 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