Search code examples
androidmaterial-designandroid-support-libraryandroid-appcompatandroid-progressbar

How to add indeterminate progressbar


My applications UI is built using the Android Support Library, but there is currently no AppCompat version of the (intederminate) progressbar, which my app really needs.

I would prefer to not use any third party libraries to achieve material design progressbars, so I'm wondering if anyone sits on information about why it's not included in the support library, and if there is any sign of it arriving (and when).


Solution

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