Membuat tombol tindakan mengambang (FAB)

Tombol tindakan mengambang (FAB) adalah tombol dengan penekanan tinggi yang memungkinkan pengguna melakukan tindakan utama dalam aplikasi. Tombol ini mempromosikan satu tindakan yang terfokus yang merupakan jalur paling umum yang mungkin diambil pengguna dan biasanya ditemukan diikat 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.
  • Tambahkan 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.

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 hanya ikon.

Kompatibilitas versi

Implementasi ini mengharuskan minSDK project Anda ditetapkan ke API level 21 atau yang lebih tinggi.

Dependensi

Kotlin

  implementation(platform("androidx.compose:compose-bom:2025.01.01"))

Groovy

  implementation platform('androidx.compose:compose-bom:2025.01.01')

Membuat tombol tindakan mengambang (FAB) dasar

Untuk membuat tombol tindakan mengambang umum, gunakan composable FloatingActionButton dasar:

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

Hasil

Tombol tindakan mengambang standar dengan sudut membulat, bayangan, dan ikon 'tambahkan'.
Gambar 1. Tombol tindakan mengambang.

Membuat tombol tindakan mengambang 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

Hasil

Implementasi SmallFloatingActionButton yang berisi ikon 'tambahkan'.
Gambar 2. Tombol tindakan mengambang kecil.

Membuat tombol tindakan mengambang besar

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

Berikut adalah penerapan FAB besar yang mudah.

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

Hasil

Implementasi LargeFloatingActionButton yang berisi ikon 'tambahkan'.
Gambar 3. Tombol tindakan mengambang yang besar.

Membuat tombol tindakan mengambang yang diperluas

Anda dapat membuat tombol tindakan mengambang yang lebih kompleks dengan composable ExtendedFloatingActionButton. Perbedaan utamanya antara FloatingActionButton dan FloatingActionButton adalah FloatingActionButton memiliki parameter icon dan text khusus. Dengannya, Anda dapat membuat tombol dengan konten yang lebih kompleks yang diskalakan agar sesuai dengan kontennya.

Cuplikan berikut menunjukkan cara mengimplementasikan 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

Hasil

Implementasi ExtendedFloatingActionButton yang menampilkan teks yang bertuliskan 'tombol yang diperluas' dan ikon edit.
Gambar 4. Tombol tindakan mengambang dengan teks dan ikon.

Poin utama

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.

z## Koleksi yang berisi panduan ini

Panduan ini adalah bagian dari koleksi Panduan Cepat pilihan yang membahas sasaran pengembangan Android yang lebih luas:

Pelajari cara fungsi composable dapat memudahkan Anda membuat komponen UI yang menarik berdasarkan sistem desain Desain Material.
Koleksi panduan cepat

Ada pertanyaan atau masukan

Buka halaman pertanyaan umum (FAQ) dan pelajari panduan singkat atau hubungi kami dan beri tahu kami pendapat Anda.
Buka FAQ Berikan masukan