Android Loading Spinner with Examples

In android, ProgressBar is a user interface control which is used to indicate the progress of an operation such as downloading a file, uploading a file. The android ProgressBar comes in two shapes Horizontal ProgressBar and Spinner ProgressBar.

Following is the pictorial representation of using a different type of progress bars in android applications.

Generally, the loading spinner or spinning progress bar is used to display the progress of tasks whose total time of completion not known.

Create Android Loading Spinner in XML Layout File

In android, we can create Loading Spinner or Loading ProgressBar in XML layout file using <ProgressBar> element like as shown below.

<ProgressBar
    android:id="@+id/pBar"
    style="?android:attr/progressBarStyleLarge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
</ProgressBar>

If you observe above code snippet, we defined a loading spinner using <ProgressBar> element with different attributes.

By default the ProgressBar will be displayed as a spinning progress bar (style="?android:attr/progressBarStyleLarge"), in case if we want to show it like horizontal bar then we need to change the style property to horizontal like style="?android:attr/progressBarStyleHorizontal".

To know more about progress bars in android, check this Android ProgressBar with Examples.

Once we define Loading Spinner in layout file, we need to create an instance of ProgressBar and use setVisibility() method to show or hide progress bar like as shown below.

ProgressBar pgsBar = (ProgressBar)findViewById(R.id.pBar);
pgsBar.setVisibility(v.GONE);

If you observe above code snippet, we created an instance of ProgressBar, used setVisibility() method to show or hide loading spinner.

Now we will see how to show or hide loading spinner on button click using progress bar in android application with examples.

Android Load Spinner Example

Following is the example of showing or hiding loading spinner on button click using progress bar in android application.

Create a new android application using android studio and give names as LoadingSpinnerExample. In case if you are not aware of creating an app in android studio check this article Android Hello World App.

Now open activity_main.xml file from \res\layout folder path and write the code like as shown below.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <Button
        android:id="@+id/btnShow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="80dp"
        android:layout_marginTop="100dp"
        android:text="Show Spinner" />
    <Button
        android:id="@+id/btnHide"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/btnShow"
        android:layout_toRightOf="@+id/btnShow"
        android:text="Hide Spinner" />
    <ProgressBar
        android:id="@+id/pBar"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/btnShow"
        android:layout_centerHorizontal="true"
        android:visibility="gone"/>
</RelativeLayout>

Now open your main activity file MainActivity.java from \java\com.tutlane.loadingspinnerexample path and write the code like as shown below

MainActivity.java

package com.tutlane.loadingspinnerexample;import android.os.Handler;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.Button;import android.widget.ProgressBar;import android.widget.TextView;
public class MainActivity extends AppCompatActivity {
    private ProgressBar pgsBar;
    private Button showbtn, hidebtn;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pgsBar = (ProgressBar) findViewById(R.id.pBar);
        showbtn = (Button)findViewById(R.id.btnShow);
        hidebtn = (Button)findViewById(R.id.btnHide);
        showbtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pgsBar.setVisibility(v.VISIBLE);
            }
        });
        hidebtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                pgsBar.setVisibility(v.GONE);
            }
        });
    }
}

If you observe above code, we are showing or hiding progress bar on button click based on our requirements.

Output of Android Loading Spinner Example

When we run above program in android studio we will get the result like as shown below.

If you observe above result, when we are click on Show Spinner button the loading spinner will be shown, same way when we click on Hide Spinner button the loading spinner will be hidden.

This is how we can use loading spinner in our android applications to show the progress of task based on our requirements.