// Tutorial //

Android SwipeRefreshLayout - Android Pull/Swipe Down to Refresh

Published on August 3, 2022
Default avatar

By Anupam Chugh

Android SwipeRefreshLayout - Android Pull/Swipe Down to Refresh

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

In this tutorial we’ll discuss and implement Android Swipe Down to Refresh or Android Pull to Refresh the screen. This Android Material Design UI pattern is very commonly seen in many applications like Gmail, Facebook, Twitter and implemented using Android SwipeRefreshLayout.

Android SwipeRefreshLayout

Android SwipeRefreshLayout, android pull to refresh, android swipe down to refresh screen Android SwipeRefreshLayout is a ViewGroup that can hold only one scrollable child. It can be either a ScrollView, ListView or RecyclerView. The basic need for a SwipeRefreshLayout is to allow the users to refresh the screen manually. This is pretty common in the Facebook Newsfeed screen. Before this layout was available in the support library, we had to resort to creating and detecting custom swipe down gestures to refresh let’s say a ListView. This class consists of one important listener that is OnRefreshListener. On swiping down this listener is triggered and the OnRefresh() method is called. We can override this method according to our needs. In this tutorial we’ll develop an application that consists of a ListView that on swipe down, refreshes the screen and shuffles the list rows.

Android SwipeRefreshLayout Project Structure

android swipe to refresh, pull down to refresh listview, Android SwipeRefreshLayout

Android SwipeRefreshLayout Code

The activity_main.xml is given below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.journaldev.swipetorefresh.MainActivity">

        <android.support.v4.widget.SwipeRefreshLayout
            android:id="@+id/swipeToRefresh"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

        </android.support.v4.widget.SwipeRefreshLayout>

</RelativeLayout>

We add a ListView inside a SwipeRefreshLayout in the layout as shown above. The MainActivity.java class is given below.

 
package com.journaldev.swipetorefresh;

import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;
import java.util.Collections;
import java.util.Random;

public class MainActivity extends AppCompatActivity {

    ArrayList arrayList = new ArrayList();
    SwipeRefreshLayout mSwipeRefreshLayout;
    ListView mListView;

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

        mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipeToRefresh);
        mListView = (ListView) findViewById(R.id.listView);

        mSwipeRefreshLayout.setColorSchemeResources(R.color.colorAccent);

        arrayList.add("First Element");
        arrayList.add("Second Element");
        arrayList.add("Third Element");
        arrayList.add("Fourth Element");
        arrayList.add("Fifth Element");

        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, arrayList);
        mListView.setAdapter(adapter);

        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                shuffle();
                mSwipeRefreshLayout.setRefreshing(false);
            }
        });
    }

    public void shuffle(){
        Collections.shuffle(arrayList, new Random(System.currentTimeMillis()));
        ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_list_item_1, arrayList);
        mListView.setAdapter(adapter);
    }
}
  • In the above code we’ve created an ArrayList of strings and add it to the ArrayAdapter object that’s later set onto the ListView.
  • We’ve added a shuffle method that shuffles the whole ArrayList every time the onRefresh() is called.
  • We’ve used the Collections framework method to randomly shuffle the ArrayList by setting a random seed as the current time in milli seconds.
  • setRefreshing(false) is an important line of code. It notifies the SwipeRefreshLayout instance that the refreshing is completed and it should stop the refreshing loader animation.
  • The default refreshing animation color is set to black. We can change it using the method setColorSchemeResources()

The output of the application in action is given below. android pull to refresh example This brings an end to this tutorial. You can download the Android SwipeRefreshLayout project from the link below and play around with different ways you can refresh the android screen on pull down.

Download Android SwipeRefreshLayout Project

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


Want to learn more? Join the DigitalOcean Community!

Join our DigitalOcean community of over a million developers for free! Get help and share knowledge in our Questions & Answers section, find tutorials and tools that will help you grow as a developer and scale your project or business, and subscribe to topics of interest.

Sign up now
About the authors
Default avatar
Anupam Chugh

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
JournalDev
DigitalOcean Employee
DigitalOcean Employee badge
February 24, 2021

Hi, in my recyclerview, I get the data from internet and when I pull down, I can see the refresh animation but it doesn’t rotate (seems its frozen) but once the data is pulled it refresh the recyclerview and refresh animation is gone. Can you help?

- VS

    JournalDev
    DigitalOcean Employee
    DigitalOcean Employee badge
    July 8, 2019

    How do i change the background color in your case it’s greyish but in my case it’s orange i want to change it to blue

    - Vrushabh

      JournalDev
      DigitalOcean Employee
      DigitalOcean Employee badge
      August 21, 2017

      thank you so much sir it was really awesome and simple method

      - Naman kashyap