Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - ExtendedFloatingActionButton

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

ExtendedFloatingActionButton pada Jetpack Compose

ExtendedFloatingActionButton adalah komponen UI di Jetpack Compose yang serupa dengan FloatingActionButton, namun dengan fitur tambahan untuk menampilkan teks dan aksesibilitas yang lebih baik. ExtendedFloatingActionButton biasanya digunakan untuk aksi utama dalam aplikasi yang memerlukan teks untuk menjelaskan aksi yang dilakukan.

Kapan Harus Menggunakan ExtendedFloatingActionButton:

Aksi Utama dengan Label: ExtendedFloatingActionButton cocok digunakan untuk aksi utama yang memerlukan teks atau label yang jelas untuk menjelaskan aksi tersebut kepada pengguna.
Navigasi: Jika ExtendedFloatingActionButton digunakan untuk navigasi, teks yang jelas dan deskriptif dapat membantu pengguna memahami tujuan dari aksi tersebut.

Perbedaan dengan FloatingActionButton:

FloatingActionButton: Biasanya hanya berisi ikon dengan latar belakang berbentuk bulat atau ikon.
ExtendedFloatingActionButton: Selain ikon, ExtendedFloatingActionButton dapat menampilkan teks atau label yang menjelaskan aksi yang dilakukan.

Anda dapat menggunakan ExtendedFloatingActionButton untuk menambahkan aksi interaktif yang mudah dijangkau dalam aplikasi Anda, terutama jika aksi tersebut memerlukan penjelasan atau deskripsi lebih lanjut.

Parameter/Atribut

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

Parameter ExtendedFloatingActionButton:

onClick: () -> Unit

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

modifier: Modifier = Modifier

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

shape: Shape = FloatingActionButtonDefaults.extendedFabShape

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

containerColor: Color = FloatingActionButtonDefaults.containerColor

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

contentColor: Color = contentColorFor(containerColor)

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

elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()

Elevasi dari ExtendedFloatingActionButton ketika ditekan. Elevasi menentukan seberapa jauh ExtendedFloatingActionButton akan "melayang" di atas permukaan.

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 RowScope.() -> Unit

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

Contoh

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