Jetpack Compose - Badge

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

Badge di Jetpack Compose

Badge adalah komponen dalam Jetpack Compose yang digunakan untuk menampilkan elemen kecil seperti angka atau ikon yang menunjukkan status, jumlah notifikasi, atau informasi lainnya yang berkaitan dengan elemen utama. Badge sering digunakan sebagai penanda tambahan pada ikon atau komponen lain untuk menarik perhatian pengguna terhadap informasi penting.

Kapan Harus Menggunakan Badge?

• Notifikasi: Digunakan untuk menunjukkan jumlah notifikasi yang belum dibaca pada ikon aplikasi atau ikon notifikasi.

• Status: Menampilkan status atau informasi tambahan, seperti status online/offline, indikator aktivitas, atau informasi penting lainnya.

• Jumlah Item: Menunjukkan jumlah item dalam keranjang belanja atau jumlah pesan baru di aplikasi pesan.

Parameter/Atribut

@Composable
fun Badge(
    modifier: Modifier = Modifier,
    containerColor: Color = BadgeDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    content: @Composable (RowScope.() -> Unit)? = null,
) 

Parameter pada Badge di Jetpack Compose

• modifier: Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya visual dari Badge.

• containerColor: Color

  • Warna latar belakang dari Badge. Nilai default-nya adalah BadgeDefaults.containerColor.

• contentColor: Color

  • Warna konten di dalam Badge. Nilai default-nya dihasilkan dari fungsi contentColorFor berdasarkan containerColor.

• content: @Composable (RowScope.() -> Unit)?

  • Komposisi untuk menentukan konten yang akan ditampilkan di dalam Badge. Nilai default-nya adalah null, yang berarti Badge akan kosong jika tidak ada konten yang diberikan.

Contoh

@Composable
fun DemoBadge(modifier: Modifier = Modifier) {
    Row(modifier = Modifier, verticalAlignment = Alignment.CenterVertically) {
        Badge(
            modifier = Modifier.padding(18.dp),
        )
        Badge(
            content = {
                Text("Badge")
            },
        )
    }
}

Video