SwipeRefreshLayout in Android | AndroidMonks

SwipeRefreshLayout in Android with Example

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. According to the Docs,

“The SwipeRefreshLayout should be used whenever the user can refresh the contents of a view via a vertical swipe gesture. The activity that instantiates this view should add an OnRefreshListener to be notified whenever the swipe to refresh gesture is completed”

YOU ARE YOUR BOSS
I agree to have my personal information transfered to MailChimp ( more information )
Join over 5.000 visitors who are receiving our free content and learn how to program with Android. The growth of Android is estimated to reach a whooping 83% by 2020. Hop on the train and start making money!
We hate spam. Your email address will not be sold or shared with anyone else.

This ViewGroup is really helpful as there is no need to define a custom layout that will detect a swipe gesture and then provide a Swipe refresh action on it. We will see how the SwipeRefreshLayout is used in Android with an example app below.

Note: It is important to note that, the SwipeRefreshLayout should act as the parent and it can hold only one direct child which will be performing the refresh action on it. 

An example use of a Swipe Refresh Layout is the infamous Facebook swipe to perform a feed update!!

SwipeRefreshLayout – Basic Implementation

<android.support.v4.widget.SwipeRefreshLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/swipe_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
</android.support.v4.widget.SwipeRefreshLayout>

Just like any other view, layout_width and layout_height are compulsory attributes, in this we have provided the SwipeRefresh layout as the parent element to the entire layout.

There are however, some important public methods that are part of the SwipeRefresh Layout like given below.

SwipeRefreshLayout – Public Methods

 canChildScrollUp() – Returns Boolean value, indicating if the given child can scroll up or not.

getProgressCircleDiameter() – Returns the Diameter of the Progress Circle which comes up when the swipe up gesture is done.

isRefreshing() – Boolean value, returns if the View is refreshing or not

setColorSchemeResources(int... colorResIds) – The method is used to set the color resources used in the progress animation from color resources.

setColorSchemeColors(int... colors) – Set the colors used in the progress animation.

setOnRefreshListener(SwipeRefreshLayout.OnRefreshListener ) – Most important listener, whenever the swipe gesture is done, this method gets fired, you can override the action to be performed in this method.

setSize(int size) – Responsible for setting the size of the progress bar, it can be either DEFAULT/LARGE

startNestedScroll(int axes) – Starts the nested scroll of the view in the given axis.

We will see a example Application with the above methods.

Be sure to use Android Studio IDE, the examples in this tutorial is implemented in the same.

SwipeRefreshLayout – Layout Implementation

First we create a simple swipe refresh layout as the viewgroup which will be holding the ListView like below. I have named it as swipe_refresh_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >
    <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>

SwipeRefreshLayout – Activity Implementation

Once the layout is created, time to look at our Activity. I have created a sample SwipeRefreshLayoutClass.java. This will act as our Activity.

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

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

public class SwipeRefreshLayoutClass extends AppCompatActivity {
    ArrayList arrayList = new ArrayList();
    SwipeRefreshLayout mSwipeRefreshLayout;
    ListView mListView;

    @Override
    protected void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.swipe_refresh_layout);
        mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipeToRefresh);
        mListView = (ListView) findViewById(R.id.listView);
        mSwipeRefreshLayout.setColorSchemeResources(R.color.colorAccent);
        arrayList.add("1");
        arrayList.add("2");
        arrayList.add("3");
        arrayList.add("4");
        arrayList.add("5");

        final 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() {
                int rand = new Random().nextInt(500)+1;
                arrayList.add(String.valueOf(rand));
                adapter.notifyDataSetChanged();
                mSwipeRefreshLayout.setRefreshing(false);
            }
        });
    }
}

We have used the ArrayAdapter to fill our ListView with numbers from 1-5. After which, we randomise some numbers and add it to the ArrayAdapter. Once this is done, we call the notifyDataSetChanged() call back.

This way, our ListView shows the updated list of values

The resulting Application is as below.

SwipeRefreshLayout- Android App
SwipeRefreshLayout- Android App

Drop in any comments you have below.

“Learn and Be Curious”

Also Read  How do develop an Android App - The easy way (Part 2)

Leave a Comment

Your email address will not be published. Required fields are marked *