Android Custom Horizontal progress bar | Custom Progress bar

Hello Friends,
                  Today,I am going to share my another blog which helps you in customizing
Horizontal Progress Bar.With the help of this Android tutorial we can also implement
the Android PI Chart view with multiple color.

Actually my need to show some PI Chart like view with multiple different color which fills
dynamically base on the percentage,  without using any 3rd party library. So , I first go
with Horizontal progress bar but in horizontal progress bar only show up-to two level 
progress with different color.

Finally, I have written a custom progress bar code using android seek bar. Using this we
can add "N level" of different color with different percentage.And Its very simple and
easily understandable.

Horizontal Progress bar

Here is my code :

1. MainActivity.java

view plainprint?

1. package com.android.customprogressbar;  
2.   
3. import java.util.ArrayList;  
4.   
5. import android.app.Activity;  
6. import android.os.Bundle;  
7. import android.util.Log;  
8. import android.view.Menu;  
9.   
10. public class MainActivity extends Activity {  
11.   
12.  private CustomProgressBar seekbar;  
13.  private ArrayList<progressitem> progressItemList;  
14.  private ProgressItem mProgressItem;  
15.   
16.  @Override  
17.  protected void onCreate(Bundle savedInstanceState) {  
18.   super.onCreate(savedInstanceState);  
19.   setContentView(R.layout.activity_main);  
20.   seekbar = ((CustomProgressBar) findViewById(R.id.seekBar0));  
21.   seekbar.getThumb().mutate().setAlpha(0);  
22.   initDataToSeekbar();  
23.  }  
24.   
25.  private void initDataToSeekbar() {  
26.   progressItemList = new ArrayList<progressitem>();  
27.   // red span  
28.   mProgressItem = new ProgressItem();  
29.   mProgressItem.progressItemPercentage = 20;  
30.   Log.i("Mainactivity", mProgressItem.progressItemPercentage + "");  
31.   mProgressItem.color = R.color.red;  
32.   progressItemList.add(mProgressItem);  
33.   // blue span  
34.   mProgressItem = new ProgressItem();  
35.   mProgressItem.progressItemPercentage = 25;  
36.   mProgressItem.color = R.color.blue;  
37.   progressItemList.add(mProgressItem);  
38.   // green span  
39.   mProgressItem = new ProgressItem();  
40.   mProgressItem.progressItemPercentage = 35;  
41.   mProgressItem.color = R.color.green;  
42.   progressItemList.add(mProgressItem);  
43.     
44.   //white span  
45.   mProgressItem = new ProgressItem();  
46.   mProgressItem.progressItemPercentage = 20;  
47.   mProgressItem.color =  R.color.white;  
48.   progressItemList.add(mProgressItem);  
49.   
50.     
51.   seekbar.initData(progressItemList);  
52.   seekbar.invalidate();  
53.  }  
54.   
55.  @Override  
56.  public boolean onCreateOptionsMenu(Menu menu) {  
57.   getMenuInflater().inflate(R.menu.main, menu);  
58.   return true;  
59.  }  
60. }  
61.   
62. </progressitem></progressitem>  

package com.android.customprogressbar;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.util.Log;
import android.view.Menu;

public class MainActivity extends Activity {

 private CustomProgressBar seekbar;
 private ArrayList progressItemList;
 private ProgressItem mProgressItem;

 @Override
 protected void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  seekbar = ((CustomProgressBar) findViewById(R.id.seekBar0));
  seekbar.getThumb().mutate().setAlpha(0);
  initDataToSeekbar();
 }

 private void initDataToSeekbar() {
  progressItemList = new ArrayList();
  // red span
  mProgressItem = new ProgressItem();
  mProgressItem.progressItemPercentage = 20;
  Log.i("Mainactivity", mProgressItem.progressItemPercentage + "");
  mProgressItem.color = R.color.red;
  progressItemList.add(mProgressItem);
  // blue span
  mProgressItem = new ProgressItem();
  mProgressItem.progressItemPercentage = 25;
  mProgressItem.color = R.color.blue;
  progressItemList.add(mProgressItem);
  // green span
  mProgressItem = new ProgressItem();
  mProgressItem.progressItemPercentage = 35;
  mProgressItem.color = R.color.green;
  progressItemList.add(mProgressItem);
  
  //white span
  mProgressItem = new ProgressItem();
  mProgressItem.progressItemPercentage = 20;
  mProgressItem.color =  R.color.white;
  progressItemList.add(mProgressItem);

  
  seekbar.initData(progressItemList);
  seekbar.invalidate();
 }

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.main, menu);
  return true;
 }
}

2. CustomProgressBar.java

view plainprint?

1. package com.android.customprogressbar;  
2.   
3. import java.util.ArrayList;  
4.   
5. import android.content.Context;  
6. import android.graphics.Canvas;  
7. import android.graphics.Paint;  
8. import android.graphics.Rect;  
9. import android.util.AttributeSet;  
10. import android.widget.SeekBar;  
11.   
12. public class CustomProgressBar extends SeekBar {  
13.   
14.  private ArrayList<progressitem> mProgressItemsList;  
15.   
16.  public CustomProgressBar(Context context) {  
17.   super(context);  
18.   mProgressItemsList = new ArrayList<progressitem>();  
19.  }  
20.   
21.  public CustomProgressBar(Context context, AttributeSet attrs) {  
22.   super(context, attrs);  
23.  }  
24.   
25.  public CustomProgressBar(Context context, AttributeSet attrs, int defStyle) {  
26.   super(context, attrs, defStyle);  
27.  }  
28.   
29.  public void initData(ArrayList<progressitem> progressItemsList) {  
30.   this.mProgressItemsList = progressItemsList;  
31.  }  
32.   
33.  @Override  
34.  protected synchronized void onMeasure(int widthMeasureSpec,  
35.    int heightMeasureSpec) {  
36.   // TODO Auto-generated method stub  
37.   super.onMeasure(widthMeasureSpec, heightMeasureSpec);  
38.  }  
39.   
40.  protected void onDraw(Canvas canvas) {  
41.   if (mProgressItemsList.size() > 0) {  
42.    int progressBarWidth = getWidth();  
43.    int progressBarHeight = getHeight();  
44.    int thumboffset = getThumbOffset();  
45.    int lastProgressX = 0;  
46.    int progressItemWidth, progressItemRight;  
47.    for (int i = 0; i < mProgressItemsList.size(); i++) {  
48.     ProgressItem progressItem = mProgressItemsList.get(i);  
49.     Paint progressPaint = new Paint();  
50.     progressPaint.setColor(getResources().getColor(  
51.       progressItem.color));  
52.   
53.     progressItemWidth = (int) (progressItem.progressItemPercentage  
54.       * progressBarWidth / 100);  
55.   
56.     progressItemRight = lastProgressX + progressItemWidth;  
57.   
58.     // for last item give right to progress item to the width  
59.     if (i == mProgressItemsList.size() - 1  
60.       && progressItemRight != progressBarWidth) {  
61.      progressItemRight = progressBarWidth;  
62.     }  
63.     Rect progressRect = new Rect();  
64.     progressRect.set(lastProgressX, thumboffset / 2,  
65.       progressItemRight, progressBarHeight - thumboffset / 2);  
66.     canvas.drawRect(progressRect, progressPaint);  
67.     lastProgressX = progressItemRight;  
68.    }  
69.    super.onDraw(canvas);  
70.   }  
71.   
72.  }  
73.   
74. }  
75.   
76. </progressitem></progressitem></progressitem>  

package com.android.customprogressbar;

import java.util.ArrayList;

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

public class CustomProgressBar extends SeekBar {

 private ArrayList mProgressItemsList;

 public CustomProgressBar(Context context) {
  super(context);
  mProgressItemsList = new ArrayList();
 }

 public CustomProgressBar(Context context, AttributeSet attrs) {
  super(context, attrs);
 }

 public CustomProgressBar(Context context, AttributeSet attrs, int defStyle) {
  super(context, attrs, defStyle);
 }

 public void initData(ArrayList progressItemsList) {
  this.mProgressItemsList = progressItemsList;
 }

 @Override
 protected synchronized void onMeasure(int widthMeasureSpec,
   int heightMeasureSpec) {
  // TODO Auto-generated method stub
  super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 }

 protected void onDraw(Canvas canvas) {
  if (mProgressItemsList.size() > 0) {
   int progressBarWidth = getWidth();
   int progressBarHeight = getHeight();
   int thumboffset = getThumbOffset();
   int lastProgressX = 0;
   int progressItemWidth, progressItemRight;
   for (int i = 0; i < mProgressItemsList.size(); i++) {
    ProgressItem progressItem = mProgressItemsList.get(i);
    Paint progressPaint = new Paint();
    progressPaint.setColor(getResources().getColor(
      progressItem.color));

    progressItemWidth = (int) (progressItem.progressItemPercentage
      * progressBarWidth / 100);

    progressItemRight = lastProgressX + progressItemWidth;

    // for last item give right to progress item to the width
    if (i == mProgressItemsList.size() - 1
      && progressItemRight != progressBarWidth) {
     progressItemRight = progressBarWidth;
    }
    Rect progressRect = new Rect();
    progressRect.set(lastProgressX, thumboffset / 2,
      progressItemRight, progressBarHeight - thumboffset / 2);
    canvas.drawRect(progressRect, progressPaint);
    lastProgressX = progressItemRight;
   }
   super.onDraw(canvas);
  }

 }

}

2. ProgressItem.java

view plainprint?

1. package com.android.customprogressbar;  
2.   
3. public class ProgressItem {  
4.  public int color;  
5.  public float progressItemPercentage;  
6. }  

package com.android.customprogressbar;

public class ProgressItem {
 public int color;
 public float progressItemPercentage;
}

Download complete Source code : CustomProgress Bar

Hope , this will helps some one .
Enjoy Coding...   :)