Loading Button

Introduction

In this blog, we are going to discuss Loading Buttons in Android. A Loading Button is like a Progress Bar with a staggering user interface(UI) and an animation as soon as a user presses it. A Loading Button is very similar to a generic Button with the added properties of background color, color timing, and circle color. With Loading Buttons, a developer can quickly create an interactive progress bar while still keeping the functionalities of a button.      

Creating a Loading Button

Adding support Library in the root file 

Input the following code in your root build.gradle file. 

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

The jitpack library is a novel package repository and is made for JVM. Therefore, any library available in bigbucket and GitHub can be used in the application directly.

Adding dependency in the dependencies section

Again, in the build.grade file input the following code.

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

Adding LoadingButton to Layout

In the activity_main.xml file, we enter the following code to add our LoadingButton to the Layout.

<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="235dp"
        android:layout_height="45dp"
        android:padding="8dp"
        app:BL_backgroundColor="#1B1A17"
        app:BL_circleColor="#F0A500"
        app:BL_circleColorSecond="#E45826"
        app:BL_enable="true"
        app:BL_stateShow="normal"
        app:BL_text="Test"
        app:BL_textColor="#E6D5B8"
        app:BL_textSize="19sp"
        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>

Adding functionality to our Loading Button

In the MainActivity.java file, we add the following code. After attaching the LoadingButton to the layout, we add an EventListener to it. The listener listens to the user inputs and has certain associated functions. The setOnButtonLoadingListener gets invoked as soon as the user presses the button.In our case, the listener will hold three methods to handle events that are onClick(),onFinish() and onStart().The onClick will hold the logic that must be executed upon a button click, and the onStart method holds the logic for what happens after the button click is registered. Similarly, the onFinish method holds the logic for what happens when both the functions before are done executing.

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);
  
        //Setting OnClickListner to the button
        loading_button.setOnButtonLoadingListener(
                new ButtonLoading.OnButtonLoadingListener() {
            @Override
            public void onClick() {
            }
            @Override
            public void onStart() {
                Toast.makeText(MainActivity.this,
                        "Start Loading", Toast.LENGTH_LONG).show();
            }
            @Override
            public void onFinish() {
               
                Snackbar.make(layout, "Yay! Loading Button Created!",
                        BaseTransientBottomBar
                       .LENGTH_LONG)
                       .show();
            }
        });
    }
  
    @Override
    public void onBackPressed() {
        loading_button.cancel();
    }
}