How to add gradient color and rounded indicator to LinearProgressBar in Android?

Viewed 240

This is the Progress indicator I need.

Progress Indicator I want

I took help from this answer. Gradient color Progress Indicator

This is what I achieved so far. enter image description here

My Progressbar background drawable is:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:id="@android:id/background">
        <shape>
            <corners android:radius="@dimen/_11sdp" />
            <solid android:color="@color/cultured" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip android:clipOrientation="horizontal">
            <shape android:shape="rectangle">
                <corners android:radius="@dimen/_11sdp" />
                <gradient
                    android:endColor="@color/colorPrimary"
                    android:startColor="@color/deep_peach" />
            </shape>
        </clip>
    </item>

</layer-list>

My Progressbar code is:

 <ProgressBar
                android:id="@+id/viewLinearProgress"
                style="?android:attr/progressBarStyleHorizontal"
                android:layout_width="0dp"
                android:layout_height="4dp"
                android:layout_marginStart="@dimen/_6sdp"
                android:layout_marginTop="@dimen/_19sdp"
                android:layout_marginEnd="@dimen/_14sdp"
                android:progress="60"
                android:progressDrawable="@drawable/gradient_progressbar"
                app:layout_constraintEnd_toStartOf="@id/tvProgress"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/tvMessage" />

The only problem is that - only the Progressbar indicator right side rounded corner is not resolved. The track is ok.

1 Answers

This is working

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background" android:top="@dimen/size_6" android:bottom="@dimen/size_6">
        <shape>

            <solid android:color="#B5B6B5"/>

            <corners android:radius="100dp" />
        </shape>
    </item>

    <item android:id="@android:id/progress"
        android:top="@dimen/size_4" android:bottom="@dimen/size_4">
        <clip>
            <scale android:scaleWidth="100%" android:scaleHeight="20">
                <shape>
                    <gradient android:endColor="#FF7400" android:startColor="#FFA119"  android:angle="180"/>
                    <corners android:radius="100dp" />
                </shape>
            </scale>
        </clip>
    </item>
</layer-list>

Use

<ProgressBar
    android:id="@+id/progressbar_insurance"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="@dimen/_14sdp"
    android:layout_marginTop="@dimen/_4sdp"
    android:indeterminate="false" />

Hope this work for you, let me know if doesn't work... :)

Related