Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Last Updated: Mar 27, 2024
Difficulty: Easy

Loading Button

Leveraging ChatGPT - GenAI as a Microsoft Data Expert
Speaker
Prerita Agarwal
Data Specialist @
23 Jul, 2024 @ 01:30 PM

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();
    }
}
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

FAQs

  1. What are buttons in Android?
    In an Android application, a button acts as a user interface mechanism that is needed to perform specific actions when it is clicked.
  2. How can I use the progress bar in Android?
    To use a progress bar, add it to a layout file using the Progress bar element. The default progress bar is a spinning wheel.
  3. What does setOnClickListener do in Android?
    The setOnClickListener is a beneficial method used to attach a listener with specific attributes to a button. With this listener, we can add functionality to a button.
  4. What is a radio button in Android?
    Radio buttons permit a user to select an option from a set of options. We should use radio buttons for mutually exclusive sets.
  5. What is a View?
    The View contains the UI Code XML. It Also sends the user action to the ViewModel but does not receive the response back directly. 

Key Takeaways

In this article, we have extensively discussed the implementation of LoadingButton in Android. If you are Preparing for interview and don't know where to start, we have got you covered, check out our expert curated courses on our website, You can also check out Coding Ninjas Studio to practice frequently asked interview problems. We hope that this blog has helped you enhance your knowledge regarding Android and if you would like to learn more, check out our articles. Do upvote our blog to help other ninjas grow. Happy Coding!

Topics covered
1.
Introduction
2.
Creating a Loading Button
2.1.
Adding support Library in the root file 
2.2.
Adding dependency in the dependencies section
2.3.
Adding LoadingButton to Layout
2.4.
Adding functionality to our Loading Button
3.
FAQs
4.
Key Takeaways