How to Make SpinKit Progress Bar in Android?

In this article Custom Progress Bar in Android, we have discussed some good And captivating Progress Bar that is used in many Google Apps. In this article, we are going to add some more Custom Progress Bar For Android using the Android-SpinKit library. In simpler terms, Progress Bar is a visual representation that shows the progress or completion of a task or process. It is commonly used to indicate how much of a task has been completed or how much time is left until completion and it provides overall a good user experience. 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: Adding Dependency For Custom Progress Bar

Add this implementation to your build.gradle(:app) file and sync it

dependencies {
   implementation 'com.github.ybq:Android-SpinKit:1.4.0'
}

If your syncing getting failed then make sure you add (maven {url “https://jitpack.io”}) this in your settings.gradle file.
JitPack is a package repository for GitHub that allows developers to easily build and distribute their libraries or applications.

settings.gradle:

pluginManagement {
   repositories {
     google()
      mavenCentral()
       gradlePluginPortal()
        // added here 1st
        maven {url "https://jitpack.io"}
   }
}
dependencyResolutionManagement {
   repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
   repositories {
     google()
     mavenCentral()
      // added here 2nd
      maven {url "https://jitpack.io"}
   }
}
rootProject.name = "My Application"
include ':app'

In this project we will be using ActivityMainBinding to initialize the views directly you can use findViewById() also in place of that to initialize the views from your activity. If you’re using ActivityMainBinding Make Sure You Add this in build.gradle(:app)

buildFeatures {
    viewBinding true
}

Step 3: Working with the activity_main.xml file

We have added all eight progress bars with different IDs that are shown in the video with one banner TextView. Also, You Can Use All the things that are there in the Normal Progress bar for eg:- android:visibility=”visible” etc.

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">

    <TextView
        android:id="@+id/bannerGFG"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Geeks for Geeks"
        android:textColor="#00FF00"
        android:textSize="20sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        android:layout_marginTop="16dp"
        android:gravity="center" />

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/spinKit1"
        android:visibility="visible"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="16dp"
        app:SpinKit_Color="@color/white"
        app:layout_constraintEnd_toStartOf="@+id/spinKit2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/titleTextView" />

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/spinKit2"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="16dp"
        app:SpinKit_Color="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/spinKit1"
        app:layout_constraintTop_toBottomOf="@+id/titleTextView" />

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/spinKit3"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        app:SpinKit_Color="@color/white"
        app:layout_constraintEnd_toStartOf="@+id/spinKit4"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/spinKit1" />

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/spinKit4"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="32dp"
        app:SpinKit_Color="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/spinKit3"
        app:layout_constraintTop_toBottomOf="@+id/spinKit2" />

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/spinKit5"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="36dp"
        app:SpinKit_Color="@color/white"
        app:layout_constraintEnd_toStartOf="@+id/spinKit6"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/spinKit3" />

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/spinKit6"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="36dp"
        app:SpinKit_Color="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/spinKit5"
        app:layout_constraintTop_toBottomOf="@+id/spinKit4" />

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/spinKit7"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="36dp"
        app:SpinKit_Color="@color/white"
        app:layout_constraintEnd_toStartOf="@+id/spinKit8"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/spinKit5" />

    <com.github.ybq.android.spinkit.SpinKitView
        android:id="@+id/spinKit8"
        style="@style/SpinKitView.Large.Circle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="36dp"
        app:SpinKit_Color="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/spinKit7"
        app:layout_constraintTop_toBottomOf="@+id/spinKit6" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Working with the MainActivity.java file

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.ayush.testapp;

import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;

import com.ayush.testapp.databinding.ActivityMainBinding;
import com.github.ybq.android.spinkit.sprite.Sprite;
import com.github.ybq.android.spinkit.style.CubeGrid;
import com.github.ybq.android.spinkit.style.DoubleBounce;
import com.github.ybq.android.spinkit.style.FoldingCube;
import com.github.ybq.android.spinkit.style.RotatingCircle;
import com.github.ybq.android.spinkit.style.RotatingPlane;
import com.github.ybq.android.spinkit.style.ThreeBounce;
import com.github.ybq.android.spinkit.style.WanderingCubes;
import com.github.ybq.android.spinkit.style.Wave;

public class MainActivity extends AppCompatActivity {

    // Binding object to access views from the layout file
    private ActivityMainBinding binding;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

          // Inflate the layout using the binding object
        binding = ActivityMainBinding.inflate(getLayoutInflater());

          // Seting the root view of the inflated layout
          // as the content view of the activity
        setContentView(binding.getRoot());

        // Creating an instance of DoubleBounce spinner and
          // set it as the indeterminate drawable for spinKit1
        Sprite doubleBounce = new DoubleBounce();
        binding.spinKit1.setIndeterminateDrawable(doubleBounce);

        Sprite rotatingPlane = new RotatingPlane();
        binding.spinKit2.setIndeterminateDrawable(rotatingPlane);

        Sprite wave = new Wave();
        binding.spinKit3.setIndeterminateDrawable(wave);

        Sprite wanderingCubes = new WanderingCubes();
        binding.spinKit4.setIndeterminateDrawable(wanderingCubes);

        Sprite foldingCube = new FoldingCube();
        binding.spinKit5.setIndeterminateDrawable(foldingCube);

        Sprite cubeGrid = new CubeGrid();
        binding.spinKit6.setIndeterminateDrawable(cubeGrid);

        Sprite threeBounce = new ThreeBounce();
        binding.spinKit7.setIndeterminateDrawable(threeBounce);

        Sprite rotatingCircle = new RotatingCircle();
        binding.spinKit8.setIndeterminateDrawable(rotatingCircle);
    }
}

Output: