Tombol Tindakan Mengambang (FAB) adalah tombol dengan penekanan tinggi yang memungkinkan pengguna melakukan tindakan utama dalam aplikasi. Ini mempromosikan satu tindakan terfokus yang merupakan jalur paling umum yang mungkin diambil pengguna dan biasanya ditemukan ditambatkan ke kanan bawah layar.
Pertimbangkan tiga kasus penggunaan ini di mana Anda dapat menggunakan FAB:
- Membuat item baru: Di aplikasi pencatatan, FAB dapat digunakan untuk membuat catatan baru dengan cepat.
- Menambahkan kontak baru: Di aplikasi chat, FAB dapat membuka antarmuka yang memungkinkan pengguna menambahkan seseorang ke percakapan.
- Pusatkan lokasi: Di antarmuka peta, FAB dapat memusatkan peta pada lokasi pengguna saat ini.
Di 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 ikon.
Platform API
Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat tombol tindakan mengambang yang konsisten dengan Desain Material, parameternya tidak jauh berbeda. Di antara parameter utama yang harus Anda perhatikan adalah sebagai berikut:
onClick
: Fungsi yang dipanggil saat pengguna menekan tombol.containerColor
: Warna tombol.contentColor
: Warna ikon.
Tombol tindakan mengambang
Untuk membuat tombol aksi mengambang umum, gunakan composable
FloatingActionButton
dasar. Contoh berikut menunjukkan
implementasi dasar FAB:
@Composable fun Example(onClick: () -> Unit) { FloatingActionButton( onClick = { onClick() }, ) { Icon(Icons.Filled.Add, "Floating action button.") } }
Implementasi ini akan muncul sebagai berikut:
Tombol kecil
Untuk membuat tombol aksi mengambang kecil, gunakan composable SmallFloatingActionButton
. Contoh berikut menunjukkan
cara melakukannya, dengan penambahan warna kustom.
@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 akan muncul sebagai berikut:
Tombol besar
Untuk membuat tombol tindakan mengambang yang besar, gunakan
composable LargeFloatingActionButton
. Fungsi yang dapat dikomposisi ini
tidak jauh berbeda dari contoh lain selain faktanya bahwa
composable ini akan 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 akan muncul sebagai berikut:
Tombol diperpanjang
Anda dapat membuat tombol tindakan mengambang yang lebih kompleks dengan
composable ExtendedFloatingActionButton
. Perbedaan utama antara tag tersebut
dan FloatingActionButton
adalah bahwa metode ini memiliki parameter icon
dan text
khusus. Fungsi ini memungkinkan Anda membuat tombol dengan konten lebih kompleks yang diskalakan
agar sesuai dengan kontennya dengan tepat.
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 akan muncul sebagai berikut: