How to build a custom progressBar in android- Part 2?

Hello all…….

Today I am going to show you how to create a custom progressbar in android.
Previously in another posts I have already shown how to build a custom indeterminate progressbar in android.
And in this post I will show you how to customize the horizontal progressbar.

OK Now we will start.

First create a fresh project and name in “CustomProgressBarDemo_01” and name the Activity “CustomProgressBarDemo”.

Now copy this code to the the “CustomProgressBarDemo.java” file.

package com.coderzheaven.pack;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.widget.ProgressBar;

public class CustomProgressBarDemo extends Activity {
	
	int myProgress = 0;
	ProgressBar pb;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        pb = (ProgressBar)findViewById(R.id.player_exp_bar);
        pb.setProgressDrawable(getResources().getDrawable(R.drawable.green_progress));  
        new Thread(myThread).start();
    }
    
    private Runnable myThread = new Runnable(){
	  @Override
	  public void run() {	  
		   while (myProgress<100){
			    try{
			    	pb.setProgress(myProgress);
			     myHandle.sendMessage(myHandle.obtainMessage());
			     Thread.sleep(500);
			    }
			    catch(Throwable t){
			    }
		   }
	  }

	  Handler myHandle = new Handler(){
		   @Override
		   public void handleMessage(Message msg) {
		    myProgress++;
		    pb.setProgress(myProgress);
		   }
	  };
	};
}

After pasting it you may get some errors but don’t worry in the coming lines we will remove all that.

Now the layout file “main.xml” which contains the progressbar.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<TextView  
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:text="Custom ProgressBar Demo from CoderzHeaven"
    android:textStyle="bold"
    android:layout_margin="10dp"
    />
    

	<ProgressBar  
		android:id="@+id/player_exp_bar"  
		android:layout_width="fill_parent"  
		android:layout_height="wrap_content"  
		android:max="100"  
		android:progress="0"  
		style="?android:attr/progressBarStyleHorizontal"  
		android:maxHeight="5dip"  
		android:minHeight="5dip"  
	/>  
	
</LinearLayout>

There may be more errors. Leave it and continue.

Now go to your drawable folder inside the “res” folder and create an xml named “green_progress.xml”.
Copy this code into it.

<?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="5dip" />
        <gradient
                android:startColor="#ff9d9e9d"
                android:centerColor="#ff5a5d5a"
                android:centerY="0.75"
                android:endColor="#ff747674"
                android:angle="270"
        />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                    android:startColor="#80ffd300"
                    android:centerColor="#80ffb600"
                    android:centerY="0.75"
                    android:endColor="#a0ffcb00"
                    android:angle="270"
            />
        </shape>
    </clip>
</item>
<item
    android:id="@android:id/progress">
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                	android:startColor="@color/greenStart"
                    android:centerColor="@color/greenMid"
                    android:centerY="0.75"
                    android:endColor="@color/greenEnd"
                    android:angle="270"
            />
        </shape>
    </clip>
</item>

</layer-list>

OK Now open the strings.xml inside the values folder and copy these code into it.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, CustomProgressBarDemo!</string>
    <string name="app_name">CustomProgressBarDemo</string>
    
    <color name="greenStart">#ff33dd44</color>
	<color name="greenMid">#ff0A8815</color>
	<color name="greenEnd">#ff1da130</color>

</resources>

Ok now I think your errors are cleaned.

It’s time to run the project.

You will see this screen.

I have simulated this progressbar to run to end.

Please share your comments and likes on this post.

Download the complete source code from here.