Jetpack Compose, Android • 17 Mei 2024

Jetpack Compose - IconToggleButton

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

IconToggleButton pada Jetpack Compose

IconToggleButton adalah sebuah komponen UI di Jetpack Compose yang digunakan untuk membuat tombol dengan ikon yang dapat diaktifkan atau dinonaktifkan. Tombol ini menggantikan fungsi toggle dan berubah tampilannya berdasarkan statusnya.

Kapan Harus Menggunakan IconToggleButton:

Toggle Status: IconToggleButton cocok digunakan ketika Anda membutuhkan tombol dengan ikon yang dapat diaktifkan atau dinonaktifkan.
Pengaturan yang Berubah: Ideal digunakan untuk pengaturan atau preferensi yang dapat diubah oleh pengguna.
Kontrol Non-Eksklusif: Berbeda dengan RadioButton, IconToggleButton tidak berada dalam grup eksklusif, sehingga beberapa tombol dapat diaktifkan secara bersamaan.

Perbedaan dengan Button Lainnya:

Icon dan Fungsi Toggle: IconToggleButton khususnya digunakan untuk menunjukkan status atau pengaturan yang berubah, sementara Button, TextButton, OutlinedButton, dll., biasanya digunakan untuk tindakan atau navigasi.
Visualisasi: IconToggleButton secara visual menunjukkan statusnya dengan perubahan warna atau ikon yang berbeda, sedangkan Button umumnya menampilkan tindakan yang akan dilakukan.

Dengan menggunakan IconToggleButton, Anda dapat memberikan kontrol yang intuitif bagi pengguna untuk mengatur status atau preferensi dalam aplikasi Anda.

Parameter/Atribut

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconToggleButtonColors = IconButtonDefaults.iconToggleButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
)

IconToggleButton Parameter

checked: Boolean
- Menunjukkan apakah IconToggleButton sedang dalam keadaan aktif atau tidak.
onCheckedChange: (Boolean) -> Unit
- Lambda yang dipanggil ketika status IconToggleButton berubah.
modifier: Modifier = Modifier
- Modifier yang dapat digunakan untuk menyesuaikan tata letak atau gaya IconToggleButton.
enabled: Boolean = true
- Menentukan apakah IconToggleButton dapat diinteraksi oleh pengguna atau tidak.
colors: IconToggleButtonColors = IconButtonDefaults.iconToggleButtonColors()
- Pengaturan warna untuk IconToggleButton.
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
- Sumber interaksi untuk IconToggleButton, yang memungkinkan untuk menangani interaksi pengguna seperti klik atau sentuhan.
content: @Composable () -> Unit
- Konten yang akan ditampilkan di dalam IconToggleButton.

Contoh

@Composable
fun DemoIconToggleButton(modifier: Modifier = Modifier) {
    Row {
        IconToggleButton(checked = true, onCheckedChange = {}) {
            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = "Favorite"
            )
        }
        IconToggleButton(checked = false, onCheckedChange = {}) {
            Icon(
                imageVector = Icons.Default.Favorite,
                contentDescription = "Favorite"
            )
        }
    }
}