Gradient Circular Progress Bar (Tri Color)

More the beautiful your UI is, more downloads you get. In this tutorial I will show you how you can make a beautiful Tri Color progress bar.

Download Source Code Download 

Project Hierarchy

Main Files
1. Firstly we will write a CustomProgressBar.java class that will be derived from ProgressBar.

CustomProgressBar.java import android.content.Context; import android.graphics.Canvas; import android.util.AttributeSet; import android.widget.ProgressBar; public class CustomProgressBar extends ProgressBar {       public CustomProgressBar(Context paramContext) {             super(paramContext);       }       public CustomProgressBar(Context paramContext,                   AttributeSet paramAttributeSet) {             super(paramContext, paramAttributeSet);       }       public CustomProgressBar(Context paramContext,                   AttributeSet paramAttributeSet, int paramInt) {             super(paramContext, paramAttributeSet, paramInt);       }       public void draw(Canvas paramCanvas) {             int i = getMeasuredWidth();             int j = getMeasuredHeight();             paramCanvas.save();             paramCanvas.rotate(135.0F, i / 2, j / 2);             super.draw(paramCanvas);             paramCanvas.restore();       } }

In draw method paramCanvas.rotate takes three parameter.
1st one is the position if you want to start from
1. right  = 0.0f
2. bottom = 90.0f
3. left = 180.0f
4. top = 270.0f

2. Now make a drawable->progress_circle.xml .

progress_circle.xml <?xml version="1.0" encoding="utf-8"?> <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >     <item>         <shape             android:innerRadiusRatio="2.65"             android:shape="ring"             android:thicknessRatio="40.0" >             <gradient                 android:centerColor="@color/centre"                 android:centerX="0.3"                 android:endColor="@color/end"                 android:startColor="@color/start"                 android:type="sweep" />         </shape>     </item> </layer-list>

3. Define color in values->color.xml file

color.xml <color name="start">#ffff00</color> <color name="end">#455a64</color> <color name="centre">#ff5722</color>

4. Now everything is ready to show.

<com.tutorialsface.gradientprogressbar.CustomProgressBar     android:id="@+id/pb"     style="?android:attr/progressBarStyleHorizontal"     android:layout_width="fill_parent"     android:layout_height="fill_parent"     android:indeterminate="false"     android:max="100"     android:progress="0"     android:progressDrawable="@drawable/progress_circle" />

Demo

activity_main.xml <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical" >     <Button         android:id="@+id/button1"         android:layout_width="fill_parent"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         android:layout_margin="10dp"         android:textColor="@color/white"         android:background="@color/end"         android:text="Restart" />     <com.tutorialsface.gradientprogressbar.CustomProgressBar         android:id="@+id/pb"         style="?android:attr/progressBarStyleHorizontal"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:indeterminate="false"         android:max="100"         android:progress="0"         android:progressDrawable="@drawable/progress_circle" /> </LinearLayout>

MainActivity.java import android.app.Activity; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.view.animation.Animation; import android.view.animation.OvershootInterpolator; import android.view.animation.Transformation; import android.widget.Button; public class MainActivity extends Activity{       CustomProgressBar pb;       Button button1;       @Override       protected void onCreate(Bundle savedInstanceState) {             super.onCreate(savedInstanceState);             setContentView(R.layout.activity_main);             pb = (CustomProgressBar) findViewById(R.id.pb);             button1 = (Button) findViewById(R.id.button1);             button1.setOnClickListener(new OnClickListener() {                   @Override                   public void onClick(View v) {                         startAnimation();                   }             });             startAnimation();       }       private void startAnimation() {             ProgressBarAnimation localProgressBarAnimation = new ProgressBarAnimation(0.0F, 75.0F);             localProgressBarAnimation.setInterpolator(new OvershootInterpolator(0.5F));             localProgressBarAnimation.setDuration(4000L);             pb.startAnimation(localProgressBarAnimation);       }       private class ProgressBarAnimation extends Animation {             private float from;             private float to;             public ProgressBarAnimation(float from, float to) {                   this.from = from;                   this.to = to;             }             protected void applyTransformation(float paramFloat, Transformation paramTransformation) {                   super.applyTransformation(paramFloat, paramTransformation);                   float f = this.from + paramFloat * (this.to - this.from);                   pb.setProgress((int) f);             }       } }

NOTE:-  Make your progressBar more color full look here for best color combinations.

Download Source Code Download