52

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

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
Joakim
  • 3,224
  • 3
  • 29
  • 53
  • I'm voting to close this question as off-topic because it's about 3rd library possible future feature and its ETA. – Budius Nov 06 '15 at 11:31
  • what do you mean when you say ETA? – Joakim Nov 06 '15 at 16:35
  • ETA: "Estimated time of arrival" – Budius Nov 06 '15 at 16:36
  • I read the comment wrong. I don't see anything in the rules as to why this question would be off topic. – Joakim Nov 06 '15 at 16:51
  • 2
    Your question is not an actual programming question that can be answered in a proper practical way. It's asking why a company released a library without a feature that u wish it had, and if said company it's thinking about adding it. It's purely speculative. The only way for anyone to answer it is if someone from Google decides to come here and tell you why they think it's not important. Maybe you could re-write your question posting exactly what u want to achieve (with screen shots), what you would have coded in the `nonAppCompat` version and which workarounds other devs suggest. – Budius Nov 06 '15 at 17:01
  • 3
    I am not asking for anyone to guess anything. I'm wondering if there are some list of future features for the Support Library and/or when they are planned. – Joakim Nov 06 '15 at 17:32

3 Answers3

99

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.

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • How to use this as intederminate progressbar in action bar with webView? – Mohammad Jan 04 '16 at 13:58
  • Like to add that this will not work for indeterminate circle bars. They lack the animated vector drawable. – Robert Baker Jan 20 '16 at 18:40
  • 1
    @Robert any hint how to do the same thing for indeterminate circles? This is one of the top results I could get to with my google-fu. – Richard Le Mesurier Jan 26 '16 at 07:46
  • 1
    @RichardLeMesurier You could try including this implementation, from Chromium. It doesn't make use of vector drawables: https://chromium.googlesource.com/android_tools/+/master/sdk/extras/android/support/v4/src/java/android/support/v4/widget/MaterialProgressDrawable.java – gnuf Feb 08 '16 at 21:20
  • If you want it centered on the screen, use `wrap_content` for both width and height, and add `android:layout_gravity="center"` (assuming that you are using a `FrameLayout`). – Albert Vila Calvo Sep 19 '16 at 19:06
  • 21
    This answer only describes how to use the platform's native progress bar. On pre-lollipop devices you'll end up with an untinted holo progress bar. This does not answer the question. – BladeCoder Oct 30 '16 at 20:21
  • style="@style/Widget.AppCompat.ProgressBar.Horizontal" – Pnemonic Jul 18 '18 at 08:21
  • so it works on material 1.3 and up, and i was wondering why it gives me unresolved error the whole time – tahaak67 Jan 19 '21 at 07:56
7

This is an answer to an old question, but I figured fellow readers might be interested in this solution:

Newer versions (26.1.+) of the Support Library contain a class called CircularProgressDrawable that implements the exact look of the native Material indeterminate drawable. In order to easily use this in a layout, you can build a MaterialProgressBar like this:

public class MaterialProgressBar extends ProgressBar{
    // Same dimensions as medium-sized native Material progress bar
    private static final int RADIUS_DP = 16;
    private static final int WIDTH_DP = 4;

    public MaterialProgressView(Context context, AttributeSet attrs) {
        super(context, attrs);

        // The version range is more or less arbitrary - you might want to modify it
        if (Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP
                || Build.VERSION.SDK_INT > Build.VERSION_CODES.O_MR1) {

            final DisplayMetrics metrics = getResources().getDisplayMetrics();
            final float screenDensity = metrics.density;

            CircularProgressDrawable drawable = new CircularProgressDrawable(context);
            drawable.setColorSchemeColors(getResources().getColor(R.color.colorPrimary));
            drawable.setCenterRadius(RADIUS_DP * screenDensity);
            drawable.setStrokeWidth(WIDTH_DP * screenDensity);
            setIndeterminateDrawable(drawable);
        }
    }
}
FD_
  • 12,947
  • 4
  • 35
  • 62
0

I am just trying to improve the answer by Mr Gabriele Mariotti using styles.

  1. Write a style like this

    <style name="infinite_progress_horizontal" parent="Widget.AppCompat.ProgressBar.Horizontal">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:indeterminate">true</item>
    </style>
    
  2. Use it with your progressbar like this.

    <ProgressBar style="@style/infinite_progress_horizontal" />
    
rahulrvp
  • 2,006
  • 1
  • 19
  • 26