Tombol tindakan mengambang

Tombol Tindakan Mengambang (FAB) adalah tombol dengan penekanan tinggi yang memungkinkan pengguna melakukan tindakan utama dalam aplikasi. Iklan 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 berikut tempat Anda dapat menggunakan FAB:

• Buat 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.
• 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 berukuran 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.

Gambar 1. Keempat jenis tombol tindakan mengambang.

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 composable FloatingActionButton dasar. Contoh berikut menunjukkan penerapan dasar FAB:

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

Implementasi ini muncul sebagai berikut:

Gambar 2. Tombol tindakan mengambang.

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.")
    }
}
FloatingActionButton.kt

Catatan: Karena berbagai composable FAB memiliki banyak parameter yang sama, Anda dapat menggunakan pendekatan dalam contoh ini untuk menyesuaikan warna dengan composable lain.

Implementasi ini muncul sebagai berikut:

Gambar 3. Tombol tindakan mengambang kecil.

Tombol besar

Untuk membuat tombol tindakan mengambang 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.

Catatan: Contoh ini meneruskan CircleShape sebagai nilai untuk parameter shape, menghasilkan tombol bulat, bukan persegi dengan batas membulat. Anda dapat teruskan instance Shape apa pun, atau tetapkan nilai MaterialTheme.shape.large ke menyesuaikannya di seluruh aplikasi Anda.

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

Implementasi ini muncul sebagai berikut:

Gambar 4. Tombol tindakan mengambang yang besar.

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") },
    )
}
FloatingActionButton.kt

Implementasi ini muncul sebagai berikut:

Gambar 5. Tombol tindakan mengambang dengan teks dan ikon.

Referensi lainnya

• Tombol umum
• Dokumen UI Material