Tombol tindakan mengambang

Tombol Tindakan Mengambang (FAB) adalah tombol dengan penekanan tinggi yang memungkinkan pengguna melakukan tindakan utama dalam aplikasi. Tombol ini mempromosikan satu tindakan terfokus yang merupakan jalur paling umum yang mungkin diambil pengguna dan biasanya ditemukan tertambat di kanan bawah layar.

Pertimbangkan tiga kasus penggunaan berikut saat Anda mungkin menggunakan FAB:

• Membuat item baru: Di aplikasi pencatat, 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.
• Memusatkan lokasi: Di antarmuka peta, FAB dapat memusatkan peta di lokasi pengguna saat ini.

Dalam Desain Material, ada empat jenis FAB:

• FAB: Tombol tindakan mengambang berukuran biasa.
• FAB Kecil: Tombol tindakan mengambang yang lebih kecil.
• FAB Besar: Tombol tindakan mengambang yang lebih besar.
• FAB Diperluas: Tombol tindakan mengambang yang berisi lebih dari sekadar ikon.

Permukaan API

Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat tombol tindakan mengambang yang konsisten dengan Desain Material, parameternya tidak terlalu berbeda. Di antara 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 basic FloatingActionButton composable. Contoh berikut menunjukkan penerapan dasar FAB:

@Composable
fun Example(onClick: () -> Unit) {
    FloatingActionButton(
        onClick = { onClick() },
    ) {
        Icon(Icons.Filled.Add, "Floating action button.")
    }
}
FloatingActionButton.kt

Penerapan ini akan terlihat sebagai berikut:

Tombol kecil

Untuk membuat tombol tindakan mengambang kecil, gunakan the SmallFloatingActionButton composable. 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.")
    }
}
FloatingActionButton.kt

Penerapan ini akan terlihat sebagai berikut:

Tombol besar

Untuk membuat tombol tindakan mengambang besar, gunakan the LargeFloatingActionButton composable. Composable ini tidak jauh berbeda dari contoh lainnya, kecuali fakta bahwa composable ini menghasilkan tombol yang lebih besar.

Berikut adalah penerapan langsung FAB besar.

@Composable
fun LargeExample(onClick: () -> Unit) {
    LargeFloatingActionButton(
        onClick = { onClick() },
        shape = CircleShape,
    ) {
        Icon(Icons.Filled.Add, "Large floating action button")
    }
}
FloatingActionButton.kt

Penerapan ini akan terlihat sebagai berikut:

Tombol diperluas

Anda dapat membuat tombol tindakan mengambang yang lebih kompleks dengan the ExtendedFloatingActionButton composable. Perbedaan utama antara composable ini dan FloatingActionButton adalah bahwa composable ini memiliki parameter icon dan text khusus. Parameter ini memungkinkan Anda membuat tombol dengan konten yang lebih kompleks yang dapat diskalakan agar sesuai dengan kontennya.

Cuplikan berikut menunjukkan cara mengimplementasikan ExtendedFloatingActionButton, dengan nilai contoh 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") },
    )
}
FloatingActionButton.kt

Penerapan ini akan terlihat sebagai berikut:

Referensi lainnya

• Tombol umum
• Dokumen UI Material