Android How to programmatically change progress drawable color

Question

I have a custom progress drawable for my horizontal progress bar

Below is progress bar:

<ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyleHorizontal"
        android:progress="20"
        android:layout_width="0dp"
        android:layout_height="60dp"
        android:layout_marginTop="32dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"

Below is progress bar drawable:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:id="@android:id/background">
        <shape>
            <stroke
                android:width="3px"
                android:color="#648A5E" />
            <corners android:radius="5dp"
                android:color="#d6f0d6"/>
            <gradient
                android:angle="270"
                android:centerColor="#d6f0d6"
                android:centerY="0.5"
                android:endColor="#d6f0d6"
                android:startColor="#d6f0d6" />
        </shape>
    </item>
    <item android:id="@android:id/secondaryProgress">
        <clip>
            <shape>
                <stroke
                    android:width="3px"
                    android:color="#648A5E" />
                <corners android:radius="5dp"
                    android:color="#d6f0d6"/>
                <gradient
                    android:angle="270"
                    android:centerColor="#d6f0d6"
                    android:centerY="0.5"
                    android:endColor="#d6f0d6"
                    android:startColor="#d6f0d6" />
            </shape>
        </clip>
    </item>
    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <shape>
                <stroke
                    android:width="3px"
                    android:color="#B1707C" />
                <corners android:radius="5dp"
                    android:color="#fce0e6"/>
                <gradient
                    android:angle="0"
                    android:endColor="#fce0e6"
                    android:startColor="#fce0e6" />
            </shape>
        </scale>
    </item>
</layer-list>

Below is the code i attempt for programmatically creation of custom progress drawable

Drawable bckgrndDr = new ColorDrawable(Color.parseColor("#e1203e"));
Drawable secProgressDr = new ColorDrawable(Color.parseColor("#eeeeee"));
Drawable progressDr = new ScaleDrawable(new ColorDrawable(Color.BLUE), Gravity.LEFT, 1, -1);
LayerDrawable resultDr = new LayerDrawable(new Drawable[] { bckgrndDr, secProgressDr, progressDr });
resultDr.setId(0, android.R.id.background);
resultDr.setId(1, android.R.id.secondaryProgress);
resultDr.setId(2, android.R.id.progress);
        
progressBar.setProgressDrawable(resultDr);
progressBar.setProgress(40);

I am unable to set the stroke,corners and gradient for id background ,secondaryProgress and progress. Please suggest what should i do to programtically create and change the color for entire custom progress drawable.

Answer 1

You can use this example as your ProgressBar

    <ProgressBar
    android:id="@+id/progressBar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="250dp"
    android:layout_height="250dp"
    android:layout_centerInParent="true"
    android:indeterminate="false"
    android:max="100"
    android:progress="0"
    android:progressDrawable="@drawable/custom_progressbar_drawable"
    android:secondaryProgress="0" />

Then create a drawable resource file for custom_progressbar_drawable

<rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="-90"
android:pivotX="50%"
android:pivotY="50%"
android:toDegrees="270" >

<shape
    android:shape="ring"
    android:thickness="5.5dp"
    android:useLevel="false" >
    <gradient
        android:centerY="0.5"
        android:endColor="@color/grad"
        android:startColor="@color/light_blue"
        android:type="sweep"
        android:useLevel="false" />
</shape>

</rotate>