Jetpack Compose - LinearProgressIndicator

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

LinearProgressIndicator adalah komponen pada Jetpack Compose yang digunakan untuk menampilkan indikator progres berbentuk garis lurus. Berikut adalah penjelasan singkatnya:

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

• Kapan sebaiknya menggunakan LinearProgressIndicator? LinearProgressIndicator 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.

• Apa bedanya dengan CircularProgressIndicator? Perbedaan utama antara LinearProgressIndicator dan CircularProgressIndicator adalah bentuk visualnya:

  • LinearProgressIndicator: Menampilkan indikator progres dalam bentuk garis lurus, cocok digunakan jika Anda ingin menunjukkan progres dalam bentuk linear, misalnya untuk menunjukkan progres dari awal hingga akhir.
  • CircularProgressIndicator: Menampilkan indikator progres dalam bentuk lingkaran, cocok digunakan jika Anda ingin menampilkan progres dalam bentuk lingkaran atau jika UI Anda mendukung desain berbentuk lingkaran.

  Pemilihan antara keduanya tergantung pada desain UI Anda dan bagaimana Anda ingin mempresentasikan indikator progres kepada pengguna.

Parameter/Atribut

@Composable
fun LinearProgressIndicator(
    progress: Float,
    modifier: Modifier = Modifier,
    color: Color = ProgressIndicatorDefaults.linearColor,
    trackColor: Color = ProgressIndicatorDefaults.linearTrackColor,
    strokeCap: StrokeCap = ProgressIndicatorDefaults.LinearStrokeCap,
)

Parameter LinearProgressIndicator

• 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.linearColor

  • Warna yang digunakan untuk menggambar garis indikator progres.

• trackColor: Color, default ProgressIndicatorDefaults.linearTrackColor

  • Warna lintasan di belakang garis indikator progres.

• strokeCap: StrokeCap, default ProgressIndicatorDefaults.LinearStrokeCap

  • Jenis ujung garis dari indikator progres.

Contoh

@Composable
fun DemoLinearProgressIndicator(modifier: Modifier = Modifier) {
    Column(modifier = Modifier) {
        Spacer(modifier = Modifier.height(16.dp))
        LinearProgressIndicator(
            color = Color.Blue,
            progress = 0.5f,
            strokeCap = StrokeCap.Round,
            trackColor = Color.Gray,
        )
    }
}

Video