Circular Progress Bar In Android Using Android Studio

In this article, we are going to see how to create a Circular Progress Bar in Android app using the Android Studio.

Introduction

In this article, we are going to see how to create a Circular Progress Bar in Android app using the Android Studio. It will show the current status of the process; i.e., percentage completed. There are many types of circular progress bars with different colors.

Step 1

Create a new project in Android Studio.

Android

Give a name to the project and click "Next".
 
Android
 
Select the "Phone and Tablet" and click "Next".

 Android

Select an empty activity and click "Next".

 Android

At last, give the activity name and click on "Finish".

 Android

Step 2

Set up the gradle by just locating the Gradle Scripts>>Build.Gradle 1

 Android

And type the following dependency in your app's build.gradle.

 Android

Code copy is here 
  1. maven{  
  2. url "https://jitpack.io"}  
Step 3

Locate the Gradle Scripts>>Build.Gradle 2

 Android

And type the following dependency in your app's build.gradle.

 Android

Code copy is here
  1. compile 'br.com.simplepass:loading-button-android:1.7.2'  
Step 4

Next, go to app >> res >>Styles and

 Android

Just type the code as follows.

 Android

Code copy is here
  1. <resources>  
  2.   
  3.     <!-- Base application theme. -->  
  4.     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
  5.         <!-- Customize your theme here. -->  
  6.         <item name="colorPrimary">@color/colorPrimary</item>  
  7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
  8.         <item name="colorAccent">@color/colorAccent</item>  
  9.     </style>  
  10.   
  11. </resources>  
Step 5

Next, go to app >> res >> layout >> activity_main.xml. Select activity page

 Android

And just type the code as follows.

 Android

Code copy is here,
  1. <RelativeLayout  
  2.     xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     xmlns:tools="http://schemas.android.com/tools"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     tools:context="com.example.hari.circularprocessbar.MainActivity">  
  8.   
  9.     <br.com.simplepass.loading_button_lib.customViews.CircularProgressButton  
  10.         android:id="@+id/btndown"  
  11.         android:text="Downloaad"  
  12.         android:textColor="@android:color/white"  
  13.         android:layout_centerInParent="true"  
  14.         android:layout_width="match_parent"  
  15.         android:layout_height="wrap_content"  
  16.         android:background="@drawable/shape_default"  
  17.         app:spinning_bar_color="#FFF"  
  18.         app:spinning_bar_padding="6dp"  
  19.         app:spinning_bar_width="4dp"/>  
  20.   
  21. </RelativeLayout>  
Step 6

 Next, go to app >> java>>Mainactivity.java. Select Mainactivity page:

 Android

 And just type the code as follows:

 Android

Code copy is here
  1.  package com.example.hari.circularprocessbar;  
  2.   
  3. import android.graphics.BitmapFactory;  
  4. import android.graphics.Color;  
  5. import android.os.AsyncTask;  
  6. import android.support.v7.app.AppCompatActivity;  
  7. import android.os.Bundle;  
  8. import android.view.View;  
  9. import android.widget.Toast;  
  10.   
  11. import br.com.simplepass.loading_button_lib.customViews.CircularProgressButton;  
  12.   
  13.  public class MainActivity extends AppCompatActivity {  
  14.   
  15.     CircularProgressButton circularProgressButton;  
  16.   
  17.     @Override  
  18.     protected void onCreate(Bundle savedInstanceState) {  
  19.         super.onCreate(savedInstanceState);  
  20.         setContentView(R.layout.activity_main);  
  21.   
  22.         circularProgressButton = (CircularProgressButton)findViewById(R.id.btndown);  
  23.         circularProgressButton.setOnClickListener(new View.OnClickListener() {  
  24.             @Override  
  25.             public void onClick(View view) {  
  26.                 final AsyncTask<String,String,String> demoDownload = new AsyncTask<String, String, String>() {  
  27.                     @Override  
  28.                     protected String doInBackground(String... strings) {  
  29.                         try{  
  30.                                 Thread.sleep(3000);  
  31.                                 } catch (InterruptedException e){  
  32.                             e.printStackTrace();  
  33.                         }  
  34.                         return "done";  
  35.                     }  
  36.   
  37.                     @Override  
  38.                     protected void onPostExecute(String s){  
  39.                         if(s.equals("done"))  
  40.                         {  
  41.                             Toast.makeText(MainActivity.this,"Download done",Toast.LENGTH_SHORT).show();  
  42.                             circularProgressButton.doneLoadingAnimation(Color.parseColor("#333639"), BitmapFactory.decodeResource(getResources(),R.drawable.ic_done_white_48dp));  
  43.                             circularProgressButton.startAnimation();  
  44.                             demoDownload.execute();  
  45.                         }  
  46.   
  47.   
  48.                     }  
  49.                 }  
  50.             }  
  51.         });  
  52.     }  
  53. }  
Step 7

After step 4, Sync all the dependency gradles and Mainactivity.java resource files by clicking the Sync button on the top right corner of the gradle page.

 Android

Step 8

Verify the preview.

 Android

->After the code is applied, the preview will appear like this.
 
Step 9

Next, go to Android Studio and deploy the application. Select an Emulator or your Android mobile with USB debugging enabled. Give it a few seconds to make installations and set permissions.

 Android

Run the application in your desired emulator (Shift + F10).

 Android

Explanation of source code

The source code provided in this article is just the dependencies of motions and the code used in activity_main.xml will make the circular progress bar appear and define its attributes.

Summary

In this article, we created the app named circular process Bar, then we have inserted a Gradle and we learned how to use the circular process Bar and Finally, we have deployed that as an output

*Support and Share, Thank You*