How to add indeterminate progressbar

Question

Jetpack compose

You can use the LinearProgressIndicator or CircularProgressIndicator

// Indeterminate
CircularProgressIndicator()
LinearProgressIndicator()

// Determinate (specify the progress value with a fixed value or animateFloatAsState to animate it)
CircularProgressIndicator(progress = ..)
LinearProgressIndicator(progress = ..)

Example:

var progress by remember {  mutableStateOf(0.1f) }

LinearProgressIndicator(
    backgroundColor = Color.White,
    progress = progress,
    color = Blue
)

Material Components Library

You can use the LinearProgressIndicator with the android:indeterminate="true" attribute:

<com.google.android.material.progressindicator.LinearProgressIndicator
    android:indeterminate="true"
    app:indicatorColor="?attr/colorPrimary"/>

enter image description here

You can also use different colors using:

<com.google.android.material.progressindicator.LinearProgressIndicator
        android:indeterminate="true"
        app:indicatorColor="@array/progress_colors"
        app:indeterminateAnimationType="contiguous"/>

with:

  <integer-array name="progress_colors">
    <item>@color/...</item>
    <item>@color/....</item>
    <item>@color/....</item>
  </integer-array>

enter image description here

You can also use the CircularProgressIndicator component to have a circular progress indicator:

<com.google.android.material.progressindicator.CircularProgressIndicator
    android:indeterminate="true"
    app:indicatorColor="?attr/colorPrimary"/>

enter image description here

Note: It requires at least the version 1.3.0-alpha04

AppCompat

You can use a ProgressBar with an AppCompat style.

Just add this in your layout:

<ProgressBar
        style="@style/Base.Widget.AppCompat.ProgressBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:visibility="visible" />

If you would like an Horizontal progress bar use:

  <ProgressBar
        style="@style/Base.Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="8dp"
        android:layout_marginTop="24dp"
        android:indeterminate="true"
        android:visibility="visible" />

They follow the official material guidelines.

Leave a Comment Cancel reply