Android SwipeRefreshLayout - Android Pull/Swipe Down to Refresh

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 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 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. 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