Loading Button in Android


A typical UI component in Android applications that tells the user that an operation is being processed is the loading button. The button text transforms into a loading animation or progress bar when a user presses it, indicating that the programme is processing the user's request. This is especially helpful when an operation, like completing a form or downloading data, can take a few seconds to complete. By removing confusion and offering updates on the status of an action, a loading button can improve the user experience. It is a straightforward but efficient method for raising an Android app's perceived responsiveness and performance.

Googles' creation - the Android OS - is highly flexible with remarkable multi platform applicability. This easily accessible operating system works efficiently across different devices like smartphones, tablets and smartwatches making it a frequent choice among users globally. With its strong foundation in Linux Kernel coupled with its open source nature enables developers unlimited freedom in creating their applications which cater towards meeting their specific requirements for customization without any limitations whatsoever.

Types of Android Buttons

The usage of buttons by Android is one of its distinguishing characteristics since it offers consumers an easy and natural way to interact with programmes. The following are some typical Android button features −

  • Navigation buttons − The Back, Home, and Recent programmes buttons are examples of navigation buttons that let users move around the Android display and switch between programmes.

  • Action buttons − These are buttons that carry out a particular task, such playing a movie or submitting a form.

  • Toggle buttons − To modify specific settings like Bluetooth or Wi-Fi usage, users can simply make use of toggle buttons.

  • Floating action buttons − Basic functions such as creating new items or messages are typically accomplished through circular floating action buttons in various applications.

For users of Android devices and applications the utilization of buttons offers a straightforward and effortless means of interaction.

Algorithm

  • Start off by creating a button in your layout XML file with an appropriate ID.

  • Following this step, obtain access to it within your Java code utilizing findViewById().

  • Upon clicking on said button - change its text indicating that some background operation is underway.

  • Lastly, prepare and execute some form of load operation using a Runnable instance - execute network calls if necessary or interact with databases as needed.

  • Use a Handler to post the Runnable to the main thread's message queue.

  • Inside the Runnable, perform the loading action and update the UI accordingly.

  • After the loading procedure has concluded, kindly update the text on the button to reflect its completion.

Approaches

  • Using ProgressBar

  • Using AsyncTask

Using ProgressBar

Example

ProgressBar progressBar = findViewById(R.id.progressBar);
Button myButton = findViewById(R.id.my_button);

myButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
      myButton.setEnabled(false);
      progressBar.setVisibility(View.VISIBLE);
        
      new Handler().post(new Runnable() {
         @Override
         public void run() {
            // Perform loading action, such as making a network call
            // or performing a database query.
            // Update UI as necessary.
                
            progressBar.setVisibility(View.GONE);
            myButton.setEnabled(true);
         }
      });
   }
});
  • In your layout XML file, replace your regular button with a ProgressBar.

  • Without fail, ensure that users cannot view the ProgressBar by first employing a setting of "gone" for its assigned visibility.

  • Within your Java code, utilize findViewById() in order to receive references for both UI elements − said ProgressBar and accompanying button.

  • After completing such steps and following a click on said button, exhibit that particular progress via modified visibility ("visible"), while incapacitating user actions stemming from said selection.

  • Create a Runnable that will perform the loading action.

  • Use a Handler to post the Runnable to the main thread's message queue.

  • Inside the Runnable, perform the loading action and update the UI accordingly.

  • When the loading is complete, set the visibility of the ProgressBar back to "gone" and enable the button.

Output

The activation of the button triggers a swift appearance of the ProgressBar feature onscreen. The button, in turn, immediately disables itself. The ProgressBar will then vanish and the button will become enabled after the loading process is finished. When the loading is finished, the user will receive a message on the button that says, "Done!"

Using AsyncTask

Example

public class MyAsyncTask extends AsyncTask {
   ProgressBar progressBar;
   Button myButton;

   public MyAsyncTask(ProgressBar progressBar, Button myButton) {
      this.progressBar = progressBar;
      this.myButton = myButton;
   }

   @Override
   protected void onPreExecute() {
      myButton.setEnabled(false);
      progressBar.setVisibility(View.VISIBLE);
   }

   @Override
   protected Void doInBackground(Void... voids) {
      // Perform loading action, such as making a network call
      // or performing a database query.
      // Update UI as necessary.
      return null;
   }

   @Override
   protected void onPostExecute(Void aVoid) {
      progressBar.setVisibility(View.GONE);
      myButton.setEnabled(true);
   }
}

ProgressBar progressBar = findViewById(R.id.progressBar);
Button myButton = findViewById(R.id.my_button);

myButton.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View v) {
      new MyAsyncTask(progressBar, myButton).execute();
   }
});
  • It is essential we improve our Java code by creating a new class that extends AsyncTask for smooth operation flow.

  • By overriding onPreExecute(), we can readily create an efficient loading animation while simultaneously disabling the button after using findViewById() as a reference point.

  • Consider utilizing doInBackground() method for background actions when performing loading actions before finally overriding onPostExecute() and hiding this displaying animation along with enabling/disabling the associated button functionality.

Output

The activation of AsyncTask commences upon pressing of a user-associated button which then produces a distinct visual cue; specifically, exhibiting a ProgressBar while simultaneously making that particular control element unresponsive. Upon finishing of asynchronous computing work and when loading subsides behind-the-scenes, users notice such progress by seeing regeneration of their clicking-capable control element while as yet without explicit worded communication.

Conclusion

To integrate effective functionality for a Loading Button within an Android application calls for thoughtful decision-making that takes into account aspects beyond just interactivity level; load intricacy and broader design features play key roles too. Although these examples provide straightforward illustrations for certain strategies that may be utilized, determining the ideal path forward hinges upon particular code details like what type(s) operations must be loaded or UI refresh mode(s). A customized approach is often the most effective in achieving a Loading Button that performs optimally for a specific use case. The aforementioned code samples are merely illustrations of how two distinct approaches to creating an Android loading button might be implemented.

The Android Loading Button, which lets users know when a loading action is happening, is a helpful feature that can assist create a better user experience. In Android development, many methods exist for crafting a loading button; one popular technique being implementing a progress bar or an async task. With any of these tactics, pushing the relevant button leads to its immediate disabling and display of an animated load icon. Meanwhile, the software loads content quietly in the background. The button is eventually reactivated after this process has concluded.

Updated on: 28-Jul-2023

533 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements