Custom Progress Bar in Android

ProgressBar is generally used for loading a screen in WebView or indicating a user to wait. We can make that progress bar look fancy and this progress bar is mainly used in some of the popular Google apps. It is very convenient and easy to implement. A sample video is given below to get an idea about what we are going to do in this article.

Step-by-Step Implementation

Step 1: Create a New Project in Android Studio

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2:

Now Add one implementation in gradle.build(module.app) after that sync it to use custom progressBar

dependencies {
   implementation 'com.jpardogo.googleprogressbar:library:1.2.0'
}

Step 3:

Now Create a layout resource file by right-clicking on res > layout make sure the RootElement is RelativeLayout. We are using the layout as progress_bar_1 you can name any.

Step 4:

All The Progress Bar Style That we have used in the above video.

progress_bar_1.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:gbp="http://schemas.android.com/apk/res-auto">

      <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Loading.........."
        android:textColor="@color/blue"
        android:layout_centerHorizontal="true" />

    <com.jpardogo.android.googleprogressbar.library.GoogleProgressBar
        android:id="@+id/pg1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/tv1"
        gbp:type="nexus_rotation_cross"/>

</RelativeLayout>

progress_bar_2.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:gbp="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Loading.........."
        android:textColor="@color/blue"
        android:layout_centerHorizontal="true" />

    <com.jpardogo.android.googleprogressbar.library.GoogleProgressBar
        android:id="@+id/pg1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/tv1"
        gbp:type="chrome_floating_circles"/>

</RelativeLayout>

progress_bar_3.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:gbp="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Loading.........."
        android:textColor="@color/blue"
        android:layout_centerHorizontal="true" />

    <com.jpardogo.android.googleprogressbar.library.GoogleProgressBar
        android:id="@+id/pg1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/tv1"
        gbp:type="google_music_dices"/>

</RelativeLayout>

progress_bar_4.xml

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:gbp="http://schemas.android.com/apk/res-auto">

    <TextView
        android:id="@+id/tv1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:text="Loading.........."
        android:textColor="@color/blue"
        android:layout_centerHorizontal="true" />

    <com.jpardogo.android.googleprogressbar.library.GoogleProgressBar
        android:id="@+id/pg1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="10dp"
        android:layout_centerHorizontal="true"
        android:layout_below="@id/tv1"
        gbp:type="folding_circles"/>

</RelativeLayout>

Make Sure the layout should be RelativeLayout.

Step 5: 

We have created a main activity by just assigning 4 buttons and giving unique ids to them. Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="204dp"
        android:text="PROGRESS BAR 1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="68dp"
        android:text="PROGRESS BAR 2"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="64dp"
        android:text="PROGRESS BAR 3"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.498"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button2" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="96dp"
        android:text="PROGRESS BAR 4"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/button3" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 6:

This Is the last step in which with the help of a dialog we’ll show all the ProgressBar after user clicks the button by using setOnClickListener, if you’re using countdowntimer make sure you implement all the methods by right click > implement methods and add all.

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

package com.android.gfgapplication3;

import androidx.appcompat.app.AppCompatActivity;
import android.app.Dialog;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.view.View;
import android.view.Window;
import android.widget.Button;

public class MainActivity extends AppCompatActivity {

    Button button, button2, button3, button4;
    Dialog dialog;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        button = findViewById(R.id.button);
        button2 = findViewById(R.id.button2);
        button3 = findViewById(R.id.button3);
        button4 = findViewById(R.id.button4);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                dialog = new Dialog(MainActivity.this);
                dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
                dialog.setContentView(R.layout.progress_bar_1);
                dialog.setCanceledOnTouchOutside(false);
                dialog.show();

                // added this countdown timer to show the dialog
                // for 5 seconds and automically it should disappear
                new CountDownTimer(5000, 1000) {

                    @Override
                    public void onTick(long l)
                    {
                    }
                    @Override
                    public void onFinish()
                    {
                        dialog.dismiss();
                    }
                }.start();
            }
        });
        button2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                dialog = new Dialog(MainActivity.this);
                dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
                dialog.setContentView(R.layout.progress_bar_2);
                dialog.setCanceledOnTouchOutside(false);
                dialog.show();

                new CountDownTimer(5000, 1000) {
                    @Override
                    public void onTick(long l)
                    {
                    }

                    @Override
                    public void onFinish()
                    {
                        dialog.dismiss();
                    }
                }.start();
            }
        });
        button3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                dialog = new Dialog(MainActivity.this);
                dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
                dialog.setContentView(R.layout.progress_bar_3);
                dialog.setCanceledOnTouchOutside(false);
                dialog.show();

                new CountDownTimer(5000, 1000) {
                    @Override
                    public void onTick(long l)
                    {
                    }
                    @Override
                    public void onFinish()
                    {
                        dialog.dismiss();
                    }
                }.start();
            }
        });
        button4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view)
            {
                dialog = new Dialog(MainActivity.this);
                dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
                dialog.setContentView(R.layout.progress_bar_4);
                dialog.setCanceledOnTouchOutside(false);
                dialog.show();
                new CountDownTimer(5000, 1000) {

                    @Override
                    public void onTick(long l)
                    {
                    }
                    @Override
                    public void onFinish()
                    {
                        dialog.dismiss();
                    }
                }.start();
            }
        });
    }
}

Output: