Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - FloatingActionButton

Penting

Pembahasan ini merupakan rentetan dari topik pembahasan tentang Dasar Dasar Jetpack Compose, terdapat hampir 100 pembahasan, untuk melihat daftarnya silahkan klik DAFTAR PEMBAHASAN COMPOSE

Pengertian

FloatingActionButton pada Jetpack Compose

FloatingActionButton (FAB) adalah komponen UI di Jetpack Compose yang digunakan untuk menampilkan sebuah tombol tindakan (action button) yang mengapung di atas konten aplikasi. FAB biasanya digunakan untuk aksi utama atau tindakan yang penting dalam aplikasi.

Kapan Harus Menggunakan FloatingActionButton:

Aksi atau Operasi Utama: FloatingActionButton cocok digunakan untuk aksi atau operasi utama yang ingin ditonjolkan dalam aplikasi.
Navigasi: FloatingActionButton sering digunakan untuk akses cepat ke navigasi, seperti menu utama atau navigasi ke layar baru.

Perbedaan dengan Button dan IconButton:

Button: Memiliki latar belakang berwarna dan biasanya digunakan untuk aksi utama dalam aplikasi.
IconButton: Ikon yang dapat ditekan dengan latar belakang yang transparan atau tidak ada.
FloatingActionButton: Tombol tindakan yang mengapung dengan latar belakang berbentuk bulat atau ikon.

Anda dapat menggunakan FloatingActionButton untuk menambahkan aksi interaktif yang mudah dijangkau dalam aplikasi Anda.

Parameter/Atribut

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = FloatingActionButtonDefaults.shape,
    containerColor: Color = FloatingActionButtonDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit,
)

Parameter FloatingActionButton:

onClick: () -> Unit

Sebuah lambda yang akan dipanggil ketika pengguna mengklik FloatingActionButton. Anda harus menentukan aksi atau fungsi yang akan dijalankan ketika FloatingActionButton ditekan.

modifier: Modifier = Modifier

Modifier untuk menyesuaikan tampilan dan perilaku dari FloatingActionButton. Dengan menggunakan modifier, Anda dapat mengatur hal-hal seperti padding, margin, ukuran, warna latar belakang, dan tata letak dari FloatingActionButton.

shape: Shape = FloatingActionButtonDefaults.shape

Bentuk atau shape dari FloatingActionButton. Anda bisa menggunakan shape bawaan dari tema atau shape kustom sesuai kebutuhan desain aplikasi Anda.

containerColor: Color = FloatingActionButtonDefaults.containerColor

Warna latar belakang dari FloatingActionButton. Anda bisa menggunakan warna bawaan dari tema Material atau warna kustom sesuai kebutuhan desain aplikasi Anda.

contentColor: Color = contentColorFor(containerColor)

Warna konten di dalam FloatingActionButton, seperti ikon. Ini akan disesuaikan berdasarkan warna latar belakang untuk memastikan kontras yang baik.

elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()

Elevasi dari FloatingActionButton ketika ditekan. Elevasi menentukan seberapa jauh FloatingActionButton akan "melayang" di atas permukaan. Anda bisa menggunakan nilai bawaan atau menyediakan elevasi kustom.

interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

Objek untuk menangani interaksi pengguna seperti sentuhan, klik, dan hover. Anda bisa menggunakan nilai bawaan MutableInteractionSource() atau menyediakan objek interaksi kustom.

content: @Composable () -> Unit

Lambda untuk mendefinisikan konten dari FloatingActionButton. Ini memungkinkan Anda untuk menambahkan komponen-komponen ke dalam FloatingActionButton, seperti ikon atau elemen UI lainnya, dan mengatur tata letak serta perilaku mereka dalam FloatingActionButton.

Contoh

@Composable
fun DemoFloatingActionButton(modifier: Modifier = Modifier) {
    FloatingActionButton(onClick = {
        Log.d("Tag", "DemoButton: The Ngoding")
    }) {
        Icon(
            imageVector = Icons.Default.Favorite,
            contentDescription = "Favorite"
        )
    }
}