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

By | May 12, 2012

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.

custom_progress_1

custom_progress_2

Please share your comments and likes on this post.

Download the complete source code from here.

Website Pin Facebook Twitter Myspace Friendfeed Technorati del.icio.us Digg Google StumbleUpon Premium Responsive

Leave a Reply

Your email address will not be published. Required fields are marked *