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:
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:
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?