4

What I would like:

I'd like to implement a LinearProgressIndicator on native Android (Kotlin) with a gradient indicator color, where the end of the gradient is the same color as the track color. This is the desired result:

enter image description here

If you look closely you see that the start of the indicator is gray, moving slightly towards white in the center before moving back to gray again. This white gradient moves from left to right as any indeterminate progress indicator would.

What I have:

enter image description here

As you can see above there is a 'hard' cutoff between gray and white, and I would like this to become gradient. This is the default behavior of LinearProgressIndicator (developer reference). (Material.io reference)

                <com.google.android.material.progressindicator.LinearProgressIndicator
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginStart="@dimen/margin_default"
                    android:layout_marginTop="@dimen/margin_small"
                    android:layout_marginEnd="@dimen/margin_default" />

With the colors from the styling definition:

        <item name="indicatorColor">#FFFFFF</item>
        <item name="trackColor">#F5F7FB</item>

What does not work:

I have tried creating a gradient drawable as described below but as far as I can tell the LinearProgressIndicator does not support drawables, only colors.

    <shape xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <gradient
            android:angle="90"
            android:centerColor="#F5F7FB"
            android:endColor="#FFFFFF"
            android:startColor="#FFFFFF"
            android:type="linear" />
    </shape>

TL;DR

How can I implement a linear indeterminate progress indicator with a gradient indicator color?

Tim van de Wal
  • 63
  • 7
  • I've never known that you can use a gradient, have you seen this somewhere? – Henry Twist May 04 '21 at 12:29
  • https://uxdesign.cc/what-you-should-know-about-skeleton-screens-a820c45a571a If you scroll down to the header called ''The Tests'' you can see a skeleton screen with some sort of animation. I'm trying to recreate something like this. – Tim van de Wal May 04 '21 at 18:29
  • Yes, I'm asking where you've seen that `LinearProgressIndicator` supports gradients? – Henry Twist May 04 '21 at 19:26
  • 2
    I haven't, thats why I'm asking this question – Tim van de Wal May 05 '21 at 06:50
  • Oh I see, I don't think it does, if it's not mentioned in the documentation then I find it unlikely that it's a hidden feature. – Henry Twist May 05 '21 at 10:56
  • Got the solution? I am facing the same problem too, the drawable approach works on normal progress bar, but for material one, it doesn't work... – BobTheCat Sep 22 '21 at 13:27

0 Answers0