Jetpack Compose - FloatingActionButton

The Ngoding

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"
        )
    }
}

Row


✨”Jika Kamu tidak sanggup menahan lelahnya belajar maka kamu harus sanggup menahan perihnya kebodohan” ✨Imam Syafi'i

Video

The Ngoding

13 Alasan Jetpack Compose Lebih Baik untuk Pengembangan Aplikasi Android

Cong Fandi

Jetpack Compose - Surface

Cong Fandi

Jetpack Compose - CutCornerShape

Cong Fandi

Jetpack Compose - RoundedCornerShape

Cong Fandi

Jetpack Compose - CircleShape

Cong Fandi

Jetpack Compose - ConstraintSet

Cong Fandi

Jetpack Compose - BadgeBox

Cong Fandi

Video

The Ngoding

Tags