Customize the Circular Progressbar in Android beautiful & smooth

Public on July 1, 2015

Customize the Progressbar for better user experience.


Download Source Code Download 

Project Hierarchy
1.0 Firstly we will create a ProgressIndicator.java class which will extends View class. This class is used for showing Progressbar.
package com.tutorialsface.circularprogress;

import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.graphics.Xfermode;
import android.util.AttributeSet;
import android.view.View;

/**
 * Class used to show a determinate progress indicator.
 * Two display modes are supported "wheel" and "pie"
 */
class ProgressIndicator extends View {
    private final RectF mRect = new RectF();
    private final RectF mRectInner = new RectF();
    private final Paint mPaintForeground = new Paint();
    private final Paint mPaintBackground = new Paint();
    private final Paint mPaintErase = new Paint();
    private static final Xfermode PORTER_DUFF_CLEAR = newPorterDuffXfermode(PorterDuff.Mode.CLEAR);
    private int mColorForeground = Color.WHITE;
    private int mColorBackground = Color.BLACK;
    private float mValue;
    private boolean mPieStyle;
    /**
     * Value which makes our custom drawn indicator have roughly the same size
     * as the built-in ProgressBar indicator. Unit: dp
     */
    private static final float PADDING = 4;
    private float mPadding;
    private Bitmap mBitmap;
    /**
     * Value which makes our custom drawn indicator have roughly the same
     * thickness as the built-in ProgressBar indicator. Expressed as the ration
     * between the inner and outer radiuses
     */
    private static final float INNER_RADIUS_RATIO = 0.84f;

    public ProgressIndicator(Context context) {
        this(context, null);
    }

    public ProgressIndicator(Context context, AttributeSet attrs) {
        super(context, attrs);
        Resources r = context.getResources();
        float scale = r.getDisplayMetrics().density;
        mPadding = scale * PADDING ;
        mPaintForeground.setColor(mColorForeground);
        mPaintForeground.setAntiAlias(true);
        mPaintBackground.setColor(mColorBackground);
        mPaintBackground.setAntiAlias(true);
        mPaintErase.setXfermode(PORTER_DUFF_CLEAR);
        mPaintErase.setAntiAlias(true);
    }

    /**
     * Set the style of this indicator.The two supported styles are "wheel" and "pie"
     * @param style One of {@link STYLE_WHEEL} or {@link STYLE_PIE}
     */
    public void setPieStyle(boolean pieStyle) {
        if (mPieStyle == pieStyle) {
            return;
        }
        mPieStyle = pieStyle;
        updateBitmap();
    }

    /**
     * Return the current style of this indicator.
     * @return <tt>True</tt> if the indicator has the "pie" style
     */
    public boolean getIsPieStyle() {
        return mPieStyle;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        canvas.drawBitmap(mBitmap, getWidth() / 2 - mBitmap.getWidth() / 2,
                          getHeight() / 2 - mBitmap.getHeight() / 2, null);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        float bitmapWidth = w - 2 * mPadding;
        float bitmapHeight = h - 2 * mPadding;
        float radius = Math.min(bitmapWidth / 2, bitmapHeight / 2);
        mRect.set(0, 0, bitmapWidth, bitmapHeight);
        radius *= INNER_RADIUS_RATIO;
        mRectInner.set(bitmapWidth / 2f - radius, bitmapHeight / 2f - radius, bitmapWidth / 2f + radius, bitmapHeight / 2f + radius);
        updateBitmap();
    }

    /**
     * Set the foreground color for this indicator. The foreground is the part
     * of the indicator that shows the actual progress
     */
    public void setForegroundColor(int color) {
        this.mColorForeground = color;
        mPaintForeground.setColor(color);
        invalidate();
    }
   
    /**
     * Set the background color for this indicator. The background is a dim and subtle
     * part of the indicator that appears below the actual progress
     */
    public void setBackgroundColor(int color) {
        this.mColorBackground = color;
        mPaintBackground.setColor(color);
        invalidate();
    }

    /**
     * @param value A number between 0 and 1
     */
    public synchronized void setValue(float value) {
        mValue = value;
        updateBitmap();
    }

    private void updateBitmap() {
        if (mRect == null || mRect.width() == 0) {
            return;
        }
        mBitmap = Bitmap.createBitmap((intmRect.width(), (intmRect.height(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(mBitmap);
        canvas.drawArc(mRect, -90, 360, truemPaintBackground);
        if (mValue < 0.01f) {
            canvas.drawLine(mRect.width() / 2, mRect.height() / 2, mRect.width() / 2, 0,mPaintForeground);
        }
        float angle = mValue * 360;
        canvas.drawArc(mRect, -90, angle, truemPaintForeground);
        if (!mPieStyle) {
            canvas.drawArc(mRectInner, -90, 360, truemPaintErase);
        }
        postInvalidate();
    }
}

1.1 Call this in your xml file as-
<com.tutorialsface.circularprogress.ProgressIndicator
    android:id="@+id/determinate_progress_indicator1"
    android:layout_width="100dp"
    android:layout_height="100dp" />

1.2 For setting the background and foreground color of progressbar use-
mProgressIndicator1.setForegroundColor(Color.parseColor("#b0120a"));

mProgressIndicator1.setBackgroundColor(Color.parseColor("#f69988"));

1.3 If you want Pie style progressbar use-
mProgressIndicator1.setPieStyle(true);

1.4 To show Progress use (Value between 0-1)-
mProgressIndicator1.setValue(0.5);

2.0 Now for demo open activity_main.xml and write down following code.
<?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" >

    <Button
        android:id="@+id/btnreset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="Restart" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator1"
                android:layout_width="100dp"
                android:layout_height="100dp" />

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator2"
                android:layout_width="100dp"
                android:layout_height="100dp" />

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator3"
                android:layout_width="100dp"
                android:layout_height="100dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator4"
                android:layout_width="100dp"
                android:layout_height="100dp" />

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator5"
                android:layout_width="100dp"
                android:layout_height="100dp" />

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator6"
                android:layout_width="100dp"
                android:layout_height="100dp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator7"
                android:layout_width="100dp"
                android:layout_height="100dp" />

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator8"
                android:layout_width="100dp"
                android:layout_height="100dp" />

            <com.tutorialsface.circularprogress.ProgressIndicator
                android:id="@+id/determinate_progress_indicator9"
                android:layout_width="100dp"
                android:layout_height="100dp" />
        </LinearLayout>
    </LinearLayout>

</LinearLayout>

2.1 Open MainActivity.java cpoy below code in it-
package com.tutorialsface.circularprogress;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;

public class MainActivity extends Activity{

      ProgressIndicator mProgressIndicator1,mProgressIndicator2mProgressIndicator3,
                                mProgressIndicator4,mProgressIndicator5,mProgressIndicator6,
                                mProgressIndicator7,mProgressIndicator8,mProgressIndicator9;
      Button btnreset;
      float max = 1;
      float update = 0;
      boolean threadRunning = false;;
     
      @Override
      protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_main);
            mProgressIndicator1 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator1);
            mProgressIndicator2 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator2);
            mProgressIndicator3 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator3);
            mProgressIndicator4 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator4);
            mProgressIndicator5 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator5);
            mProgressIndicator6 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator6);
            mProgressIndicator7 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator7);
            mProgressIndicator8 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator8);
            mProgressIndicator9 = (ProgressIndicator) findViewById(R.id.determinate_progress_indicator9);
            btnreset = (Button) findViewById(R.id.btnreset);
           
            mProgressIndicator1.setForegroundColor(Color.parseColor("#b0120a"));
            mProgressIndicator1.setBackgroundColor(Color.parseColor("#f69988"));
       
        mProgressIndicator2.setForegroundColor(Color.parseColor("#880e4f"));
        mProgressIndicator2.setBackgroundColor(Color.parseColor("#f48fb1"));
       
        mProgressIndicator3.setForegroundColor(Color.parseColor("#4a148c"));
        mProgressIndicator3.setBackgroundColor(Color.parseColor("#ce93d8"));
       
        mProgressIndicator4.setForegroundColor(Color.parseColor("#2a36b1"));
        mProgressIndicator4.setBackgroundColor(Color.parseColor("#afbfff"));
        mProgressIndicator4.setPieStyle(true);
       
        mProgressIndicator5.setForegroundColor(Color.parseColor("#004d40"));
        mProgressIndicator5.setBackgroundColor(Color.parseColor("#80cbc4"));
        mProgressIndicator5.setPieStyle(true);
       
        mProgressIndicator6.setForegroundColor(Color.parseColor("#0d5302"));
        mProgressIndicator6.setBackgroundColor(Color.parseColor("#72d572"));
        mProgressIndicator6.setPieStyle(true);
       
        mProgressIndicator7.setForegroundColor(Color.parseColor("#f9a825"));
        mProgressIndicator7.setBackgroundColor(Color.parseColor("#fff59d"));
       
        mProgressIndicator8.setForegroundColor(Color.parseColor("#d84315"));
        mProgressIndicator8.setBackgroundColor(Color.parseColor("#ffab91"));
       
        mProgressIndicator9.setForegroundColor(Color.parseColor("#4e342e"));
        mProgressIndicator9.setBackgroundColor(Color.parseColor("#bcaaa4"));
        startThread();
            btnreset.setOnClickListener(new OnClickListener() {
                  @Override
                  public void onClick(View v) {
                        if(threadRunning)
                              return;
                        startThread();
                  }
            });
      }
     
      private void startThread() {
            new Thread(new Runnable() {
                  @Override
                  public void run() {
                        threadRunning = true;
                        update = 0;
                        while(update <= max){
                              update += 0.005;
                          updateProgressIndicatorValue();
                          try{
                              Thread.sleep(100);
                          }catch(Exception e){
                             
                          }
                        }
                        threadRunning = false;
                  }
            }).start();
      }
     
   private void updateProgressIndicatorValue() {
         this.runOnUiThread(new Runnable() {
            @Override
            public void run() {
              mProgressIndicator1.setValue(update);
              mProgressIndicator2.setValue(update);
              mProgressIndicator3.setValue(update);
              mProgressIndicator4.setValue(update);
              mProgressIndicator5.setValue(update);
              mProgressIndicator6.setValue(update);
              mProgressIndicator7.setValue(update);
              mProgressIndicator8.setValue(update);
              mProgressIndicator9.setValue(update);
            }
         });
    }
}

Download Source Code Download 





[Advertising]Faster Thinking - Speed up your brain


Faster Thinking Game



sentiment_satisfied Emoticon