Tombol tindakan mengambang

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

Pertimbangkan tiga kasus penggunaan berikut saat Anda mungkin 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.
• Lokasi tengah: Di antarmuka peta, FAB dapat memusatkan peta pada lokasi pengguna saat ini.

Dalam Desain Material, ada empat jenis FAB:

• FAB: Tombol tindakan mengambang (FAB) berukuran biasa.
• FAB kecil: Tombol tindakan mengambang yang lebih kecil.
• FAB besar: Tombol tindakan mengambang yang lebih besar.
• FAB yang diperluas: Tombol tindakan mengambang (FAB) yang berisi lebih dari sekadar ikon.

Gambar 1. Empat jenis tombol tindakan mengambang (FAB).

Platform API

Meskipun ada beberapa composable yang dapat Anda gunakan untuk membuat tombol tindakan mengambang (FAB) yang konsisten dengan Desain Material, parameternya tidak jauh berbeda. Di antara parameter utama yang harus Anda perhatikan adalah:

• onClick: Fungsi yang dipanggil saat pengguna menekan tombol.
• containerColor: Warna tombol.
• contentColor: Warna ikon.

Tombol tindakan mengambang (FAB)

Untuk membuat tombol tindakan mengambang (FAB) 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.")
    }
}
FloatingActionButton.kt

Implementasi ini akan terlihat seperti berikut:

Gambar 2. Tombol tindakan mengambang (FAB).

Tombol kecil

Untuk membuat tombol tindakan 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.")
    }
}
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 akan terlihat seperti berikut:

Gambar 3. Tombol tindakan mengambang (FAB) kecil.

Tombol besar

Untuk membuat tombol tindakan mengambang (FAB) besar, gunakan composable LargeFloatingActionButton. Composable ini tidak berbeda secara signifikan dari contoh lainnya selain fakta bahwa composable ini menghasilkan tombol yang lebih besar.

Berikut adalah penerapan langsung FAB besar.

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

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

Implementasi ini akan terlihat seperti berikut:

Gambar 4. Tombol tindakan mengambang (FAB) besar.

Tombol diperluas

Anda dapat membuat tombol tindakan mengambang yang lebih kompleks dengan composable ExtendedFloatingActionButton. Perbedaan utamanya dengan FloatingActionButton adalah bahwa fungsi ini memiliki parameter icon dan text khusus. Dengan komponen ini, Anda dapat membuat tombol dengan konten yang lebih kompleks yang diskalakan agar sesuai 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 akan terlihat seperti berikut:

Gambar 5. Tombol tindakan mengambang (FAB) dengan teks dan ikon.

Referensi lainnya

• Tombol umum
• Dokumentasi Material UI