Swipe Refresh Layout – Android Pull down to refresh widget

Hi Guys, welcome to Proto Coders Point  In this Android Tutorial we will implement an Swipe Down Refresh Layout with helps app user to simple pull down to refresh for new Contents

You might have be using many android application those have added the pull to refresh android UI that helps to reload or refresh the feed contents. Loading new content get refreshed when user swipe the view downwords to load the data. Here when user pull down a small loader icon will be shown at the top of the screen and get disappears when contents get loaded completly.

Swipe Refresh Layout – Android Pull Down to Refresh Library

Finally, Google released an official version of the pull-to-refresh library! It is called SwipeRefreshLayout.

This Library is very useful and easy to use where user can easily swipe down or pull down to refresh for new data or contents in the Views.

the official documentation is here:

let’s directly start implementing this library in our android project.

Final Result

Step 1 will be offcourse Creating new project or working with existing android project

Step 2 : Add Dependencies

To user Swipe Refresh Layout you need to add one required depencencies under gradle Script

Open build.gradle( App level ) and add the below depencencie.

dependencies {
    -----------------
     -----------------
     implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.0.0' // add this line
}

As android support libraries have deprecated and is been replaced by AndroidX, you can find the latest library  here.

Step 3 : open activity_main.xml file to add SwipeRefreshLayout

Now open activity_main.xml file where you need to add the xml code for Swipe Refresh  widget

Snippet code of the Refresh Layout

 <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="546dp">


        // any View 

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Add the below code in xml file

activity_main.xml

Copy paste below code in activity_main.xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity"
    android:orientation="vertical">


    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id="@+id/swipeRefreshLayout"
        android:layout_width="match_parent"
        android:layout_height="546dp">


        <ListView
            android:id="@+id/listView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
           />

    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

    <TextView
        android:id="@+id/textshow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:textStyle="bold"
        android:textSize="25sp"
        android:text="Pull Down to Refresh"
        android:gravity="center"/>



</LinearLayout>

In the above lines of xml code we have SwipeRefreshLayout as a parent which is a pull to refresh the layout, in this i have a ListView where all the data will be displayed in list form, you can use any Views in it.

Step 4 : Create a new XML Layout

Then you need an XML file with TextView in it, so that we can display text in listview.

Create a new XML file under res>layout and name it as listview_text.xml

listview_text.xml

<?xml version="1.0" encoding="utf-8"?>
<!--  Single List Item Design -->

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/label"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="10dip"
    android:textSize="16dip"
    android:textStyle="bold" >
</TextView>

Step 5 : Add a listener to Swipe Refresh layout – a pull down to refresh class.

Here is a snippet code to add a listener.

Swipe RefreshLayout pullToRefresh = (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);

       pullToRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
           @Override
           public void onRefresh() {
               Data_Function(); // your function call code

           }
       });

This setOnRefreshListener will get called whenever a user swipe down

Copy paste the below lines of code in main class or where you are using this widget.

main_activity.java

package com.ui.swiperefreshlayout;

import androidx.appcompat.app.AppCompatActivity;
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;
import android.os.Bundle;
import android.os.Handler;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    SwipeRefreshLayout pullToRefresh;
  
    ListView listView;

    String[] mobileArray = {"Android","IPhone","WindowsMobile","Blackberry",
            "WebOS","Ubuntu","Windows7","Max OS X"}; //list of data to show in list view

    ArrayAdapter adapter;

    Handler handler; // handler to show data after some seconds

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        adapter = new ArrayAdapter<String>(this,R.layout.listview_text,mobileArray);
       
        listView = (ListView) findViewById(R.id.listView);
        handler = new Handler();

        pullToRefresh = (SwipeRefreshLayout) findViewById(R.id.swipeRefreshLayout);

        pullToRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                Data_Function(); // your code

            }
        });
    }

    public  void Data_Function()
    {
      
        handler.postDelayed(new Runnable() {
            @Override
            public void run() {
                
                listView.setAdapter(adapter);

                pullToRefresh.setRefreshing(false); // swipe Refresh layout is disabled after first refreshed
            }
        },3000);
    }
}

In the above java code i have

List of array : That holds String values ( Operating System Names )

ArrayAdopter : that holds list of array and an textview layout using which we can set the adoptor to listView.

Handler : To show the data in ListView after some seconds