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


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

        Try DigitalOcean for free

        Click below to sign up and get $200 of credit to try our products over 60 days!

        Sign up

        Join the Tech Talk
        Success! Thank you! Please check your email for further details.

        Please complete your information!

        Get our biweekly newsletter

        Sign up for Infrastructure as a Newsletter.

        Hollie's Hub for Good

        Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

        Become a contributor

        Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

        Welcome to the developer cloud

        DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

        Learn more
        DigitalOcean Cloud Control Panel