Progress Bar

Progress Bar is a element used to visualize the progression of an extended running operation, such as a download, file transfer, or installation. Sometimes, the graphic is accompanied by a textual representation of the progress in a percent format..

Download Demo

Steps to use progress bar in your project.

1. Crate a project in android studio.
2. Open your main_activity.xml and update it-
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:tools="http://schemas.android.com/tools"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:orientation="vertical"
       tools:context="com.pankaj.progressbar.MainActivity">
   
       <Button
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:onClick="defaultProgressDialog"
           android:text="Default Progress Bar Dialog" />
   
       <Button
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:onClick="customProgressDialog"
           android:text="Custom Progress Bar Dialog" />
   </LinearLayout>
   

    
3. Create a custom dialog view
   
   

   <?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:background="@color/colorPrimary"
       android:orientation="vertical"
       android:padding="1dp">
   
       <!--content of dialog box-->
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:background="@android:color/white"
           android:padding="5dp">
   
           <!--title-->
   
           <TextView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_weight="1"
               android:text="loading...." />
   
           <!--progress update textview -->
   
           <TextView
               android:id="@+id/tvUpdateProgress"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="0" />
   
           <!--progress out of-->
   
           <TextView
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:text="/100" />
       </LinearLayout>
   
       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="wrap_content"
           android:layout_marginTop="1dp"
           android:background="@android:color/white"
           android:padding="5dp">
   
           <!--progress bar-->
   
           <ProgressBar
               android:id="@+id/prDownload"
               style="?android:attr/progressBarStyleHorizontal"
               android:layout_width="match_parent"
               android:layout_height="wrap_content" />
   
       </LinearLayout>
   
   </LinearLayout>
   

    
4. open your resource directory and creat a drawable for custom progress bar  new drawable resource file(selector)(drawable/custom_progress_drawable.xml)-
   
   

   <?xml version="1.0" encoding="utf-8"?>
   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
      
       <!-- Define the background properties like color etc -->
   
       <item android:id="@android:id/background">
           <shape>
               <gradient
                   android:centerColor="#20FFFF00"
                   android:endColor="#20007A00"
                   android:startColor="#20FF0000" />
           </shape>
       </item>
   
       <!-- Define the progress properties like start color, end color etc -->
   
       <item android:id="@android:id/progress">
           <clip>
               <shape>
                   <gradient
                       android:centerColor="#FFFF00"
                       android:endColor="#007A00"
                       android:startColor="#FF0000" />
               </shape>
           </clip>
       </item>
   
   </layer-list>
   

    
5. Open your MainActivity.JAVA class and update it -
   

   package com.pankaj.progressbar;
   import android.app.AlertDialog;
   import android.os.Bundle;
   import android.support.v7.app.AppCompatActivity;
   import android.view.LayoutInflater;
   import android.view.View;
   import android.widget.ProgressBar;
   import android.widget.TextView;
   
   public class MainActivity extends AppCompatActivity {
   
       @Override
       protected void onCreate(Bundle savedInstanceState) {
           super.onCreate(savedInstanceState);
           setContentView(R.layout.activity_main);
       }
   
       //__methode will be call when we click on "Default Progress Bar Dialog" and will be show the default preogress bar in the dialog.
   
       public void defaultProgressDialog(View view) {
           updateProgress(false);
       }
   
       //__methode will be call when we click on "Custom Progress Bar Dialog" and will be show the custom preogress bar in the dialog.
   
       public void customProgressDialog(View view) {
           updateProgress(true);
       }
   
       private void updateProgress(boolean isCustom) {
   
           //________create the custom view of dialog
   
           LayoutInflater inflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
           View view1 = inflater.inflate(R.layout.custom_dialog_view, null);
   
           //__________create the dialog builder
   
           AlertDialog.Builder builder = new AlertDialog.Builder(this);
   
           //__________set custom view to dialog builder
   
           builder.setView(view1);
   
           //__________create alert dialog
   
           AlertDialog dialog = builder.create();
   
           //__________show alert dialog
   
           dialog.show();
   
           //__________create progress bar and update progress bar textview object
   
           final ProgressBar prDownload = (ProgressBar) view1.findViewById(R.id.prDownload);
           final TextView tvUpdateProgress = (TextView) view1.findViewById(R.id.tvUpdateProgress);
   
           //__________check ckicked on custom progress bar dialog or default progress bar dialog
           if (isCustom) prDownload.setProgressDrawable(getResources().getDrawable(R.drawable.custom_progress_drawable));
   
           //__________create a thread
   
           new Thread() {
               public void run() {
   
                   int progress = 0;   //_________progress will be start from here
                   int percent = 100;   //__________progress will be complete on this
   
                   while (progress++ < percent) {
                       try {
                           final int finalProgress = progress;
   
                           runOnUiThread(new Runnable() {
                               @Override
                               public void run() {
   
                                   //__________update progress
   
                                   tvUpdateProgress.setText(finalProgress + "");
                                   prDownload.setProgress(finalProgress);
                               }
                           });
   
                           //__________sleep for 200 ms to create difference between updates
   
                           Thread.sleep(200);
                       } catch (InterruptedException e) {
                           e.printStackTrace();
                       }
                   }
               }
           }.start();
       }
   }
   
   

   
   
6. Now all the development steps for Progress Bar has completed, Please run the application and see the screen of device.
   
   
   
   
7. Now click on "Default Progress Bar Dialog" and see the screen - 
   
   
   
   
   
   
8. Now click on "Custom Progress Bar Dialog" and see the screen - 
   
   
   
   
   
   
   
   
   
   
9. Good bye, Thanks to read this blog.

Download Demo