How to make a multi-color indeterminate linear progress indicator using material design in android?

Viewed 1653

I want to implement a progress bar similar to this:

enter image description here

In material design documentation it says I need to set indeterminateAnimationType to contiguous to achieve this and provide three colors. But how to provide three colors when the indicatorColor attribute accepts only 1 color ?

When I run this code it throws an exception says Contiguous indeterminate animation must be used with 3 or more indicator colors:

<com.google.android.material.progressindicator.LinearProgressIndicator
android:id="@+id/progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:indeterminate="true"
app:indeterminateAnimationType="contiguous"
app:hideAnimationBehavior="outward"
app:showAnimationBehavior="inward"
app:trackThickness="5dp" />
1 Answers

There is a minimum requirement of 3 indicator colors to use the contiguous animation.

Just use the indicatorColor attribute with an array:

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

with array/progress_colors:

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

enter image description here

Related