Implement Swipe Down to Refresh using SwipeRefreshLayout in Android App

We have seen the swipe down to refresh feature in many apps such as Facebook, Instagram, YouTube, Wechat, Telegram, Gmail, etc. It is mainly used trigger load more or refresh action to load new content or to refresh the existing data.

For example, when we open the YouTube app, some videos are shown to us according to our recommendations but if we don't like the videos then we simply swipe down from the top to load new videos or refresh the list. You will see the swipe down to refresh feature in almost every app which is dealing with user generated content or dynamic content which changes over time.

What is Swiperefreshlayout and why we need this?

In order to implement the Swipe down to refresh feature in our app we will use the android SwipeRefreshLayout. The SwipeRefreshLayout is a widget that detects vertical swipe, shows a simple progress bar and then triggers a callback so that developers can fetch the data or do some other task in our android app.

Step 1: Create a new Project

1. Open Your Android Studio Click on "Start a new Android Studio project"(Learn how to setup Android Studio and create your first Android project)

2. Choose "Empty Activity" from the project template window and click Next

3. Enter the App Name, Package name, save location, language(Java/Kotlin, we use Java for this tutorial ) and minimum SDK(we are using API 19: Android 4.4 (KitKat) )

4. Next click on Finish button after filling the above details

5. Now wait for the project to finish building.

Step 2: Adding the swiperefreshlayout dependency

To use swipe down to refresh feature in our app we have to implement the swiperefreshlayout in our app, to do so follow the below step.

Go to Gradle Scripts -> build.gradle (Module: app) section and import below dependencies and click the "Sync Now" button at the top.

Currently the version is 1.1.0 and you can check for new version by clicking here:

dependencies {
    //Adding Swipe Refresh Layout Dependency
    implementation 'androidx.swiperefreshlayout:swiperefreshlayout:1.1.0'
}

Step 3: Modify activity_main.xml file

Go to app -> res -> layout -> activity_main.xml and add the SwipeRefreshLayout as shown below:

 <!-- Simple Swipe Refresh Layout -->
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id = "@+id/swiperefreshlayout"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent">

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

Now inside the SwipeRefreshLayout we will add a Android TextView (which changes it's value when we refresh *implemented in step 4*) as shown below

 <!-- Simple Swipe Refresh Layout -->
<androidx.swiperefreshlayout.widget.SwipeRefreshLayout
    android:id = "@+id/swiperefreshlayout"
    android:layout_width = "match_parent"
    android:layout_height = "match_parent">

    <!-- Simple Text View inside Swipe  Refresh Layout -->
    <TextView
        android:layout_marginTop = "16dp"
        android:textColor = "#1C0A1A"
        android:textSize = "40sp"
        android:id = "@+id/textview"
        android:padding = "8dp"
        android:foregroundGravity = "center"
        android:gravity = "center_horizontal"
        android:text = "Swipe Down to refresh ME "
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content"/>

</androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

The complete code of the activity_main.xml file is shown below:

<?xml version=  "1.0" encoding=  "utf-8" ?>
<RelativeLayout
    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:layout_height =  "match_parent"
    tools:context =  ".MainActivity">

    <!-- Simple Swipe Refresh Layout -->
    <androidx.swiperefreshlayout.widget.SwipeRefreshLayout
        android:id = "@+id/swiperefreshlayout"
        android:layout_width = "match_parent"
        android:layout_height = "match_parent">

        <!-- Simple Text View inside Swipe  Refresh Layout -->
        <TextView
            android:layout_marginTop = "16dp"
            android:textColor = "#1C0A1A"
            android:textSize = "40sp"
            android:id = "@+id/textview"
            android:padding = "8dp"
            android:foregroundGravity = "center"
            android:gravity = "center_horizontal"
            android:text = "Swipe Down to refresh ME "
            android:layout_width = "match_parent"
            android:layout_height = "wrap_content"/>
    </androidx.swiperefreshlayout.widget.SwipeRefreshLayout>

</RelativeLayout>

Step 4: MainActivity.java file

Now open the MainActivity.java file and import some basic classes as shown below:

//importing required classes
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout ;
import android.widget.TextView ;

Next we create the object of SwipeRefreshLayout and TextView inside MainActivity class as shown below:

//Creating object of SwipeRefreshLayout and TextView
private SwipeRefreshLayout swipeRefreshLayout;
private TextView textView;

Now inside the onCreate method we initialize the swipeRefreshLayout and textView:

//initializing the swipeRefreshLayout and textView
swipeRefreshLayout = ( SwipeRefreshLayout ) findViewById ( R.id.swiperefreshlayout ) ;
textView = ( TextView ) findViewById ( R.id.textview ) ;

Now we create OnRefreshListener for the swipeRefreshLayout and inside the @Override method of it we change the textView and make swipeRefreshLayout.setRefreshing to false as show below:

swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {@Override
	public void onRefresh() {

		//Changing the text when refresh
		textView.setText(" Now I am Refreshed ! ");

		//setting Refreshing to false
		swipeRefreshLayout.setRefreshing(false);

	}
});

The complete code of the MainActivity.java is shown below:

package com.studytonight.project;

import android.os.Bundle;
import androidx.appcompat.app.AppCompatActivity;

//importing required classes
import androidx.swiperefreshlayout.widget.SwipeRefreshLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

	//Creating object of SwipeRefreshLayout and TextView
	private SwipeRefreshLayout swipeRefreshLayout;
	private TextView textView;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		//initializing the swipeRefreshLayout and textView
		swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swiperefreshlayout);
		textView = (TextView) findViewById(R.id.textview);

		swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {@Override
			public void onRefresh() {

				//Changing the text when refresh
				textView.setText(" Now I am Refreshed ! ");

				//setting Refreshing to false
				swipeRefreshLayout.setRefreshing(false);

			}
		});
	}
}

Basic Methods And Listeners of SwipeRefreshLayout:

• public boolean isRefreshing(): Whether the SwipeRefreshLayout is showing refresh progress or not . The return is either true or false

• public void setEnabled(boolean enabled): It takes one boolean value either true or false and Enabled the SwipeRefreshLayout according to values passed

• setOnRefreshListener: It set the listener to get notified when onRefresh() method is triggered via the swipe gesture.

Also Read: Add a NestedScrollView in Android App

Output:

In the below snapshots, you can see how the SwipeRefreshLayout will look in the android application.

When the app runs first time:

When pulling down to Refresh:

When refreshed:

Conclusion:

In just 4 simple steps we have integrated and shown you the basic example for creating a simple SwipeRefreshLayout in your android app. If you face any issue while doing this, please share it in the comment section below and we will be happy to help.

You may also like:

• Adapter and Adapter View

• How to add Admob Interstitial Ad in Android App

• How to add a ScrollView in Android App

• How to add Tapadoo Alerter in Android App