CoderzHeaven

Hello all…

In my previous posts I have shown two methods to create custom progressbar in android.

Check out these tutorials to find out how?

1. How to build a custom progressBar in android- Part 2?
2. Custom progressbar in android with text – part 3

Today in this post I will show you a third method.

Here is the main.xml that contains the progressBar.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" 
    android:gravity="center">
 
 
        <ProgressBar
            android:id="@+id/progressBar1"
             android:indeterminateDrawable="@drawable/progressbackground1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:layout_margin="20dp" />
 
        <ProgressBar
            android:id="@+id/progressBar2"
             android:indeterminateDrawable="@drawable/progressbackground2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_margin="20dp"  />
         
         <ProgressBar
            android:id="@+id/progressBar3"
             android:indeterminateDrawable="@drawable/progressbackground3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_margin="20dp"  />
            
         <ProgressBar
            android:id="@+id/progressBar4"
             android:indeterminateDrawable="@drawable/progressbackground4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_margin="20dp"  />
 
</LinearLayout>

Now we will create the “android:indeterminateDrawable” xml that is mentioned in the above xml.

Create 4 xml files inside the res/drawable directory whose names and contents are given below.

Here is the first one. “progressbackground1.xml”

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/progressbar1"
android:pivotX="50%"
android:pivotY="50%" />

progressbackground2.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/progressbar2"
android:pivotX="50%"
android:pivotY="50%" />

progressbackground3.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/progressbar3"
android:pivotX="50%"
android:pivotY="50%" />

progressbackground4.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-rotate xmlns:android="http://schemas.android.com/apk/res/android"
android:drawable="@drawable/progressbar4"
android:pivotX="50%"
android:pivotY="50%" />

I have four drawable images inside my res/drawable folder.

Running it will produce the below result.

Please leave your valuable comments on this post.

Download the complete java source code from here.

Hello all……

I have posted two posts on how to customize a progressbar in android.

1. Custom Indeterminate progressBar for android?
2. How to build a custom progressBar in android- Part 2?

Here is another one with update text on top of the progressbar.

Here is how we start.

After creating a fresh project create a new java file and name it “TextProgressBar.java”.

Now copy this code to the above file.
This file extends the progressbar to add additional functionality.

package com.coderzheaven.pack;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.widget.ProgressBar;

public class TextProgressBar extends ProgressBar {
	private String text;
	private Paint textPaint;

	public TextProgressBar(Context context) {
		super(context);
		text = "0/100";
		textPaint = new Paint();
		textPaint.setColor(Color.BLACK);
	}

	public TextProgressBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		text = "0/100";
		textPaint = new Paint();
		textPaint.setColor(Color.BLACK);
	}

	public TextProgressBar(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		text = "0/100";
		textPaint = new Paint();
		textPaint.setColor(Color.BLACK);
	}

	@Override
	protected synchronized void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		Rect bounds = new Rect();
		textPaint.getTextBounds(text, 0, text.length(), bounds);
		int x = getWidth() / 2 - bounds.centerX();
		int y = getHeight() / 2 - bounds.centerY();
		canvas.drawText(text, x, y, textPaint);
	}

	public synchronized void setText(String text) {
		this.text = text;
		drawableStateChanged();
	}

	public void setTextColor(int color) {
		textPaint.setColor(color);
		drawableStateChanged();
	}
}

OK the progressbar class is now complete.

Now the xml in which the progressbar contains.

main.xml

<?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"
    />
    
	<com.coderzheaven.pack.TextProgressBar   
		android:id="@+id/pb"  
		android:layout_width="fill_parent"  
		android:layout_height="wrap_content"  
		android:max="100"  
		android:progress="0"  
		style="?android:attr/progressBarStyleHorizontal"  
		android:maxHeight="20dip"  
		android:minHeight="20dip"  
	/>  
	
</LinearLayout>

Take a look at this line in the xml

This adds the custom progressbar in the xml.

OK Done now we have to just implement in the custom progressbar.

Now the main java file that is calling the progressbar.

package com.coderzheaven.pack;

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

public class CustomProgressBarDemo extends Activity {
	
	int myProgress = 0;
	TextProgressBar pb;
	
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        
        pb = new TextProgressBar(this);
        pb = (TextProgressBar) findViewById(R.id.pb);  
        new Thread(myThread).start();
    }
    
    private Runnable myThread = new Runnable(){
	  @Override
	  public void run() {	  
		   while (myProgress<100){
			    try{
			    	System.out.println("SSS");
			    	pb.setProgress(myProgress);
			    	pb.setText(myProgress+"/100");
			    	myHandle.sendMessage(myHandle.obtainMessage());
			    	Thread.sleep(500);
			    }
			    catch(Throwable t){
			    }
		   }
	  }

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

OK Go on and run the project you will get these results.

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.