Monday 19 January 2015

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

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


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
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...   :)

 

Copyright @ 2013 Android Developers Blog.