Jetpack Compose - CircularProgressIndicator

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

CircularProgressIndicator adalah komponen pada Jetpack Compose yang digunakan untuk menampilkan indikator progres berbentuk lingkaran. Berikut adalah penjelasan singkatnya:

• Apa itu CircularProgressIndicator pada Jetpack Compose? CircularProgressIndicator adalah sebuah komponen UI yang menampilkan indikator progres berbentuk lingkaran. Biasanya digunakan untuk menunjukkan bahwa suatu tindakan sedang berlangsung atau progres sedang dilakukan.

• Kapan sebaiknya menggunakan CircularProgressIndicator? CircularProgressIndicator sebaiknya digunakan ketika Anda perlu memberikan umpan balik visual kepada pengguna bahwa suatu tindakan sedang berlangsung, seperti memuat data atau proses lain yang memerlukan indikasi progres.

• Bagaimana cara menggunakan CircularProgressIndicator? Anda dapat menambahkan CircularProgressIndicator ke dalam komponen Anda dengan menggunakan CircularProgressIndicator dari Jetpack Compose. Anda dapat menyesuaikan properti seperti warna, ukuran, dan progresnya.

Parameter/Atribut

@Composable
fun CircularProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.circularColor,
    strokeWidth: Dp = ProgressIndicatorDefaults.CircularStrokeWidth,
    trackColor: Color = ProgressIndicatorDefaults.circularTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.CircularDeterminateStrokeCap,
) 

Parameter CircularProgressIndicator

• progress: Float

  • Nilai progres yang akan ditampilkan oleh indikator progres. Rentang nilainya dari 0.0 hingga 1.0, di mana 0.0 menunjukkan progres tidak dimulai dan 1.0 menunjukkan progres selesai.

• modifier: Modifier, default Modifier

  • Modifier yang digunakan untuk menyesuaikan tata letak atau gaya indikator progres.

• color: Color, default ProgressIndicatorDefaults.circularColor

  • Warna yang digunakan untuk menggambar lingkaran indikator progres.

• strokeWidth: Dp, default ProgressIndicatorDefaults.CircularStrokeWidth

  • Lebar garis indikator progres dalam satuan Density-independent pixels (Dp).

• trackColor: Color, default ProgressIndicatorDefaults.circularTrackColor

  • Warna lintasan di belakang lingkaran indikator progres.

• strokeCap: StrokeCap, default ProgressIndicatorDefaults.CircularDeterminateStrokeCap

  • Jenis ujung garis dari indikator progres saat dalam mode determinate. Biasanya StrokeCap.Butt atau StrokeCap.Round.

Contoh

@Composable
fun DemoCircularProgressIndicator(modifier: Modifier = Modifier) {
    CircularProgressIndicator(
        progress = 0.7f,
        trackColor = Color.Gray,
        strokeCap = StrokeCap.Square,
        color = Color.Blue,
        strokeWidth = 8.dp,
    )
}

Video