Tombol Tindakan Mengambang (FAB) adalah tombol dengan penekanan tinggi yang memungkinkan pengguna melakukan tindakan utama dalam aplikasi. Mempromosikan satu tindakan yang terfokus itu merupakan jalur paling umum yang mungkin diambil pengguna dan biasanya ditemukan ditambatkan ke kanan bawah layar.
Pertimbangkan tiga kasus penggunaan ini saat Anda mungkin menggunakan FAB:
- Buat item baru: Di aplikasi pencatatan, FAB mungkin digunakan dengan cepat membuat catatan baru.
- Menambahkan kontak baru: Di aplikasi chat, FAB dapat membuka antarmuka yang memungkinkan pengguna menambahkan seseorang ke percakapan.
- Lokasi tengah: Di antarmuka peta, FAB dapat memusatkan peta di lokasi pengguna saat ini.
Dalam Desain Material, ada empat jenis FAB:
- FAB: Tombol tindakan mengambang dengan ukuran biasa.
- FAB kecil: Tombol tindakan mengambang yang lebih kecil.
- FAB besar: Tombol tindakan mengambang yang lebih besar.
- FAB yang diperluas: Tombol tindakan mengambang yang berisi lebih dari sekadar ikon.
Platform API
Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat tindakan mengambang konsisten dengan Desain Material, parameternya tidak jauh berbeda. Parameter utama yang harus Anda ingat adalah sebagai berikut:
onClick
: Fungsi yang dipanggil saat pengguna menekan tombol.containerColor
: Warna tombol.contentColor
: Warna ikon.
Tombol tindakan mengambang
Untuk membuat tombol tindakan mengambang umum, gunakan jenis
Composable FloatingActionButton
. Contoh berikut menunjukkan
implementasi dasar FAB:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Implementasi ini muncul sebagai berikut:
![Tombol tindakan mengambang standar dengan sudut membulat, bayangan, dan 'add' ikon.](https://developer.android.com/static/develop/ui/compose/images/components/fab.png?authuser=19&hl=id)
Tombol kecil
Untuk membuat tombol aksi mengambang berukuran kecil, gunakan
Composable SmallFloatingActionButton
. Contoh berikut menunjukkan
bagaimana melakukannya, dengan
tambahan warna khusus.
@Composable fun SmallExample(onClick: () -> Unit) { SmallFloatingActionButton( onClick = { onClick() }, containerColor = MaterialTheme.colorScheme.secondaryContainer, contentColor = MaterialTheme.colorScheme.secondary ) { Icon(Icons.Filled.Add, "Small floating action button.") } }
Implementasi ini muncul sebagai berikut:
![Implementasi SmallFloatingActionButton yang berisi 'add' ikon.](https://developer.android.com/static/develop/ui/compose/images/components/fab-small.png?authuser=19&hl=id)
Tombol besar
Untuk membuat tombol aksi mengambang yang besar, gunakan
Composable LargeFloatingActionButton
. Composable ini tidak
sangat berbeda dari contoh-contoh lain,
selain fakta bahwa
menghasilkan tombol yang lebih besar.
Berikut adalah implementasi langsung dari FAB besar.
@Composable fun LargeExample(onClick: () -> Unit) { LargeFloatingActionButton( onClick = { onClick() }, shape = CircleShape, ) { Icon(Icons.Filled.Add, "Large floating action button") } }
Implementasi ini muncul sebagai berikut:
![Implementasi LargeFloatingActionButton yang berisi 'add' ikon.](https://developer.android.com/static/develop/ui/compose/images/components/fab-large.png?authuser=19&hl=id)
Tombol diperpanjang
Anda bisa membuat tombol aksi mengambang yang lebih kompleks dengan
Composable ExtendedFloatingActionButton
. Perbedaan utama antara keduanya
dan FloatingActionButton
memiliki icon
dan text
parameter. Memungkinkan Anda membuat tombol dengan konten yang lebih kompleks yang diskalakan
agar pas dengan kontennya.
Cuplikan berikut menunjukkan cara menerapkan
ExtendedFloatingActionButton
, dengan contoh nilai yang diteruskan untuk icon
dan
text
.
@Composable fun ExtendedExample(onClick: () -> Unit) { ExtendedFloatingActionButton( onClick = { onClick() }, icon = { Icon(Icons.Filled.Edit, "Extended floating action button.") }, text = { Text(text = "Extended FAB") }, ) }
Implementasi ini muncul sebagai berikut:
![Implementasi ExtendedFloatingActionButton yang menampilkan teks bertuliskan 'extended button' dan ikon edit.](https://developer.android.com/static/develop/ui/compose/images/components/fab-extended.png?authuser=19&hl=id)