Jetpack Compose - IconButton

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

IconButton pada Jetpack Compose

IconButton adalah komponen UI di Jetpack Compose yang menampilkan sebuah ikon yang dapat ditekan untuk menanggapi interaksi pengguna. IconButton biasanya digunakan untuk aksi atau operasi yang terkait dengan ikon tertentu.

Kapan Harus Menggunakan IconButton:

  • Aksi atau Operasi dengan Ikon: IconButton cocok digunakan untuk aksi atau operasi yang terkait dengan ikon tertentu, seperti aksi cepat atau akses ke menu.

Perbedaan dengan Button, TextButton, dan OutlinedButton:

  • Button: Memiliki latar belakang berwarna dan biasanya digunakan untuk aksi utama dalam aplikasi.
  • TextButton: Teks yang dapat ditekan dengan latar belakang yang transparan atau tidak ada.
  • OutlinedButton: Memiliki border luar tanpa latar belakang.
  • IconButton: Ikon yang dapat ditekan dengan latar belakang yang transparan atau tidak ada.

Anda dapat menggunakan IconButton untuk menambahkan aksi interaktif dengan ikon dalam aplikasi Anda.

Parameter/Atribut

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: IconButtonColors = IconButtonDefaults.iconButtonColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
) 

Parameter IconButton:

onClick: () -> Unit

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

modifier: Modifier = Modifier

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

enabled: Boolean = true

  • Menentukan apakah IconButton dapat digunakan atau tidak. Jika true, IconButton dapat ditekan (aktif). Jika false, IconButton tidak dapat ditekan (non-aktif).

colors: IconButtonColors = IconButtonDefaults.iconButtonColors()

  • Warna dari IconButton dalam berbagai keadaan, seperti warna ikon dan efek hover. Anda dapat menggunakan nilai bawaan IconButtonDefaults.iconButtonColors() atau menyediakan warna kustom sesuai kebutuhan desain aplikasi Anda.

interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

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

content: @Composable () -> Unit

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

Contoh

@Composable
fun DemoIconButton(modifier: Modifier = Modifier) {
    IconButton(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