LoadingButton in Android

In this article, LoadingButton is added in android. LoadingButton provides us an amazing UI and an animation whenever the user taps on it. It is very easy to add a LoadingButton in an app. It is very much similar to Button in android, just add the dependency and a few properties. Tags like BL_backgroundColor, BL_circleColor, BL_circleColorSecond, BL_stateShow and many more can be used to customize the Loading Button. Loading Button View is used wherever the developer wants the user to wait for some time. We can also use Progress Bar instead of this but Loading Button provides unique and attractive UI and increases the user experience. It also provides full control to Developer as it can be customized according to the requirements.

Approach:

Step 1: Add the support Library in your root build.gradle file (not your module build.gradle file). This library jitpack is a novel package repository. It is made for JVM so that any library which is present in github and bitbucket can be directly used in the application.

XML

             
allprojects {           
 repositories {           
        maven { url 'https://jitpack.io' }           
     }          
}           

Step 2: Add the support Library in build.gradle file and add dependency in the dependencies section.

XML

            
dependencies {     
      //For Snackbar 
      implementation 'com.google.android.material:material:1.1.0'     
        
      //For LoadingButton
      implementation 'com.github.andreasagap:LoadingButtonLibrary:v1.0'
}          

Step 3: Add the following code in activity_main.xml file. In this file we add our LoadingButton to the layout.

activity_main.xml

 
<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:id="@+id/root"
    android:layout_height="match_parent">

    <andreasagap.loadingbutton.ButtonLoading
        android:id="@+id/loadingbutton"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:padding="6dp"
        app:BL_backgroundColor="#9c9b9999"
        app:BL_circleColor="#219806"
        app:BL_circleColorSecond="#126300"
        app:BL_enable="true"
        app:BL_stateShow="normal"
        app:BL_text="Buy Course"
        app:BL_textColor="#FFF"
        app:BL_textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Step 4: Add the following code in the MainActivity.java file. In this file, attach Loading Button to the root layout then add a Listener to it. So whenever the user taps on it, setOnButtonLoadingListener gets invoked automatically. Inside the listener, three methods are present onClick(), onStart() and onFinish(). Inside the onClick method add the code that should be executed when the button is clicked, in onStart() method add the code that is to be executed immediately when the button is clicked and in onFinish() method add the code that is executed after the other two functions are executed.

MainActivity.java

          
package org.geeksforgeeks.loadingbutton          

import androidx.appcompat.app.AppCompatActivity;
import androidx.constraintlayout.widget.ConstraintLayout;
import android.os.Bundle;
import android.widget.Toast;
import com.google.android.material.snackbar.BaseTransientBottomBar;
import com.google.android.material.snackbar.Snackbar;
import andreasagap.loadingbutton.ButtonLoading;

public class MainActivity extends AppCompatActivity {
    ButtonLoading loading_button;
    ConstraintLayout layout;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        layout = findViewById(R.id.root);
        loading_button =findViewById(R.id.loadingbutton);
        loading_button.setRoot(loading_button,this, layout);

        //set OnClickListener to button
        loading_button.setOnButtonLoadingListener(
                new ButtonLoading.OnButtonLoadingListener() {
            @Override
            public void onClick() {
            }
            @Override
            public void onStart() {
                Toast.makeText(MainActivity.this,
                        "Loading Start", Toast.LENGTH_LONG).show();
            }
            @Override
            public void onFinish() {
                //show snackbar when loading finished
                Snackbar.make(layout, "Thank you for
                        buying our Course!",
                        BaseTransientBottomBar
                       .LENGTH_LONG)
                       .show();
            }
        });
    }

    @Override
    public void onBackPressed() {
        loading_button.cancel();
    }
}

Output:

Reference: https://github.com/andreasagap/LoadingButtonLibrary

My Personal Notes

Last Updated : 24 Nov, 2022

Related Articles

LoadingButton in Android

Approach:

XML

XML

Android App Development with Kotlin - Live

Master Java Programming - Complete Beginner to Advanced

JAVA Backend Development - Live

Related Articles

LoadingButton in Android

Approach:

XML

XML

Please Login to comment...

Android App Development with Kotlin - Live

Master Java Programming - Complete Beginner to Advanced

JAVA Backend Development - Live