How to create a gradient color Progress Bar in Android

In this android programming source code example, we are going to create a gradient color progress bar in android.

You can copy and adopt this source code example to your android project without reinventing the wheel.

Below is a step by step source code to create a gradient color progress bar in android.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".progressbar.ProgressBar7"
    android:padding="40dp">

    <ProgressBar
        xmlns:tools="http://schemas.android.com/tools"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:progressDrawable="@drawable/gradient_progress_bar"
        android:progress="50"
        />

</LinearLayout>

drawable/gradient_progress_bar.xml

<?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="5dp"/>
            <solid android:color="#fff"/>
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="5dp"/>
                <gradient
                    android:endColor="@android:color/holo_red_dark"
                    android:startColor="@android:color/holo_orange_light"
                    />
            </shape>
        </clip>
    </item>

</layer-list>

MainActivity.java

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;


public class ProgressBar7 extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_progress_bar7);
    }
}

If you have any question or suggestions kindly use the comment box or you can contact us directly through our contact page below.

 

Add a Comment