How to Customize a Progress Bar In Android

Customizing a ProgressBar requires defining the attribute or properties for the background and progress of your progress bar.

Create an XML file named customprogressbar.xml in your res->drawable folder:

custom_progressbar.xml

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">    <!-- Define the background properties like color etc -->    <item android:id="@android:id/background">    <shape>        <gradient                android:startColor="#000001"                android:centerColor="#0b131e"                android:centerY="1.0"                android:endColor="#0d1522"                android:angle="270"        />    </shape>   </item>  <!-- Define the progress properties like start color, end color etc -->  <item android:id="@android:id/progress">    <clip>        <shape>            <gradient                android:startColor="#007A00"                android:centerColor="#007A00"                android:centerY="1.0"                android:endColor="#06101d"                android:angle="270"            />        </shape>    </clip>    </item></layer-list> 

Now you need to set the progressDrawable property in customprogressbar.xml (drawable)

You can do this in the XML file or in the Activity (at run time).

Do the following in your XML:

<ProgressBar    android:id="@+id/progressBar1"    style="?android:attr/progressBarStyleHorizontal"    android:progressDrawable="@drawable/custom_progressbar"             android:layout_width="wrap_content"    android:layout_height="wrap_content" />

At run time do the following

// Get the Drawable custom_progressbar                         Drawable draw=res.getDrawable(R.drawable.custom_progressbar);// set the drawable as progress drawable    progressBar.setProgressDrawable(draw);

Edit: corrected xml layout

In case of complex ProgressBar like this,

use ClipDrawable.

NOTE : I've not used ProgressBar here in this example. I've achieved this using ClipDrawable by clipping image with Animation.

A Drawable that clips another Drawable based on this Drawable's current level value. You can control how much the child Drawable gets clipped in width and height based on the level, as well as a gravity to control where it is placed in its overall container. Most often used to implement things like progress bars, by increasing the drawable's level with setLevel().

NOTE : The drawable is clipped completely and not visible when the level is 0 and fully revealed when the level is 10,000.

I've used this two images to make this CustomProgressBar.

scall.png

ballon_progress.png

MainActivity.java

public class MainActivity extends ActionBarActivity {private EditText etPercent;private ClipDrawable mImageDrawable;// a field in your classprivate int mLevel = 0;private int fromLevel = 0;private int toLevel = 0;public static final int MAX_LEVEL = 10000;public static final int LEVEL_DIFF = 100;public static final int DELAY = 30;private Handler mUpHandler = new Handler();private Runnable animateUpImage = new Runnable() {    @Override    public void run() {        doTheUpAnimation(fromLevel, toLevel);    }};private Handler mDownHandler = new Handler();private Runnable animateDownImage = new Runnable() {    @Override    public void run() {        doTheDownAnimation(fromLevel, toLevel);    }};@Overrideprotected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    etPercent = (EditText) findViewById(R.id.etPercent);    ImageView img = (ImageView) findViewById(R.id.imageView1);    mImageDrawable = (ClipDrawable) img.getDrawable();    mImageDrawable.setLevel(0);}private void doTheUpAnimation(int fromLevel, int toLevel) {    mLevel += LEVEL_DIFF;    mImageDrawable.setLevel(mLevel);    if (mLevel <= toLevel) {        mUpHandler.postDelayed(animateUpImage, DELAY);    } else {        mUpHandler.removeCallbacks(animateUpImage);        MainActivity.this.fromLevel = toLevel;    }}private void doTheDownAnimation(int fromLevel, int toLevel) {    mLevel -= LEVEL_DIFF;    mImageDrawable.setLevel(mLevel);    if (mLevel >= toLevel) {        mDownHandler.postDelayed(animateDownImage, DELAY);    } else {        mDownHandler.removeCallbacks(animateDownImage);        MainActivity.this.fromLevel = toLevel;    }}public void onClickOk(View v) {    int temp_level = ((Integer.parseInt(etPercent.getText().toString())) * MAX_LEVEL) / 100;    if (toLevel == temp_level || temp_level > MAX_LEVEL) {        return;    }    toLevel = (temp_level <= MAX_LEVEL) ? temp_level : toLevel;    if (toLevel > fromLevel) {        // cancel previous process first        mDownHandler.removeCallbacks(animateDownImage);        MainActivity.this.fromLevel = toLevel;        mUpHandler.post(animateUpImage);    } else {        // cancel previous process first        mUpHandler.removeCallbacks(animateUpImage);        MainActivity.this.fromLevel = toLevel;        mDownHandler.post(animateDownImage);    }}}

activity_main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:paddingLeft="16dp"android:paddingRight="16dp"android:paddingTop="16dp"android:paddingBottom="16dp"android:orientation="vertical"tools:context=".MainActivity"><LinearLayout    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:orientation="horizontal">    <EditText        android:id="@+id/etPercent"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:inputType="number"        android:maxLength="3" />    <Button        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="Ok"        android:onClick="onClickOk" /></LinearLayout><FrameLayout    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_gravity="center">    <ImageView        android:id="@+id/imageView2"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:src="@drawable/scall" />    <ImageView        android:id="@+id/imageView1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/clip_source" /></FrameLayout>

clip_source.xml

<?xml version="1.0" encoding="utf-8"?><clip xmlns:android="http://schemas.android.com/apk/res/android"    android:clipOrientation="vertical"    android:drawable="@drawable/ballon_progress"    android:gravity="bottom" />

In case of complex HorizontalProgressBar just change cliporientation in clip_source.xml like this,

android:clipOrientation="horizontal"

You can download complete demo from here.

in your xml

<ProgressBar        android:id="@+id/progressBar1"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        style="@style/CustomProgressBar"         android:layout_margin="5dip" />

And in res/values/styles.xml:

<resources>         <style name="CustomProgressBar" parent="android:Widget.ProgressBar.Horizontal">          <item name="android:indeterminateOnly">false</item>          <item name="android:progressDrawable">@drawable/custom_progress_bar_horizontal</item>          <item name="android:minHeight">10dip</item>          <item name="android:maxHeight">20dip</item>        </style>           <style name="AppTheme" parent="android:Theme.Light" /></resources>

And custom_progress_bar_horizontal is a xml stored in drawable folder which defines your custom progress bar. For more detail see this blog.

I hope this will help you.