Android Pull To Refresh View using SwipeRefreshLayout

Android support library android.support.v4 provides support for in-built Android Pull To Refresh View using SwipeRefreshLayout. SwipeRefreshLayout should be used whenever the user can refresh the contents of a view via a vertical swipe gesture.

Activities having SwipeRefreshLayout view should add OnRefreshListener to be notified whenever the swipe to refresh gesture is completed.

SwipeRefreshLayout.OnRefreshListener – Classes that wish to be notified when the swipe gesture correctly triggers a refresh should implement this interface.

Commonly Used Methods

isRefreshing () – returns whether the SwipeRefreshWidget is actively showing refresh progress.

setColorSchemeColors (int... colors) – Used to set the colors used in the progress animation.

setDistanceToTriggerSync (int distance) – Used to set the distance to trigger a sync in dips

setOnRefreshListener (SwipeRefreshLayout.OnRefreshListener listener) – Set the listener to be notified when a refresh is triggered via the swipe gesture.

setRefreshing (boolean refreshing) – Notify the widget that refresh state has changed. Do not call this when refresh is triggered by a swipe gesture.

Sample Android Application with Android Pull To Refresh View using SwipeRefreshLayout

 

[su_button url=”https://github.com/androidsrc/SwipeRefreshLayout” target=”blank” style=”stroked” background=”#51d461″ color=”#ffffff” size=”6″ center=”yes” radius=”0″ icon=”icon: arrow-circle-o-down”]Download Full Source Code[/su_button]

 

SwipeRefreshLayoutSample_2

 

Application main activity layout will have android.support.v4.widget.SwipeRefreshLayout as parent view. SwipeRefreshLayout can have only one child similar to ScrollView. Add ListView whose items will be refreshed on swiping. Final /res/layout/activity_main.xml will be as below.

 

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

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <TextView
                android:id="@+id/infoText"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="10dp"
                android:gravity="center"
                android:text="Pull Down to Refresh" />

            <ListView
                android:id="@+id/listView"
                android:layout_width="match_parent"
                android:layout_height="424dp"
                android:layout_marginTop="10dp" >
            </ListView>
        </LinearLayout>

    </ScrollView>

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

 

ListView item layout will be a simple TextView which will display name of the city. Create layout file /res/layout/list_item.xml as below.

 

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center_vertical"
    android:minHeight="?android:attr/listPreferredItemHeightSmall"
    android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
    android:paddingStart="?android:attr/listPreferredItemPaddingStart"
    android:textAppearance="?android:attr/textAppearanceListItemSmall"
    android:textColor="@android:color/black" />

 

Application main activity will implement OnRefreshListener to be notified for swipe gesture event completion. We will use simple ArrayList adapter to show city names in list view. Whenever onRefresh() receives call, we will set swipe view to refreshing and send message to Handler for updating city list. After updating adapter, we will set refreshing animation to false. I have used android.view.View.postDelayed(Runnable action, long delayMillis) for setting refreshing animation as it is called very early after receiving onRefresh() call. Final source code for MainActivity.java will be as below.

 

package com.androidsrc.swiperefreshlayout;

import android.app.Activity;
import android.graphics.Color;
import android.os.Bundle;
import android.os.Handler;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v4.widget.SwipeRefreshLayout.OnRefreshListener;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;

import java.util.Arrays;
import java.util.List;

public class MainActivity extends Activity implements OnRefreshListener {

    private SwipeRefreshLayout swipeView;

    private ListView listView;
    private ArrayAdapter<String> adapter;

    private String[] LIST_ITEM_TEXT_CITIES = {"Los Angeles", "Chicago",
            "Indianapolis", "San Francisco", "Oklahoma City", "Washington"};

    private String[] LIST_ITEM_TEXT_MORE_CITIES = {"Phoenix", "San Antonio",
            "San Jose", "Nashville", "Las Vegas", "Virginia Beach"};

    private List<String> cityList;

    // variable to toggle city values on refresh
    boolean refreshToggle = true;

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

        swipeView = (SwipeRefreshLayout) findViewById(R.id.swipe_view);
        swipeView.setOnRefreshListener(this);
        swipeView.setColorSchemeColors(Color.GRAY, Color.GREEN, Color.BLUE,
                Color.RED, Color.CYAN);
        swipeView.setDistanceToTriggerSync(20);// in dips
        swipeView.setSize(SwipeRefreshLayout.DEFAULT);// LARGE also can be used

        cityList = Arrays.asList(LIST_ITEM_TEXT_CITIES);
        listView = (ListView) findViewById(R.id.listView);
        adapter = new ArrayAdapter<String>(getApplicationContext(),
                R.layout.list_item, cityList);
        listView.setAdapter(adapter);
        listView.requestLayout();
    }

    Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {

            if (refreshToggle) {
                refreshToggle = false;
                cityList = Arrays.asList(LIST_ITEM_TEXT_MORE_CITIES);
                adapter = new ArrayAdapter<String>(getApplicationContext(),
                        R.layout.list_item, cityList);
            } else {
                refreshToggle = true;
                cityList = Arrays.asList(LIST_ITEM_TEXT_CITIES);
                adapter = new ArrayAdapter<String>(getApplicationContext(),
                        R.layout.list_item, cityList);
            }
            listView.setAdapter(adapter);

            swipeView.postDelayed(new Runnable() {

                @Override
                public void run() {
                    Toast.makeText(getApplicationContext(),
                            "city list refreshed", Toast.LENGTH_SHORT).show();
                    swipeView.setRefreshing(false);
                }
            }, 1000);
        }

        ;
    };

    @Override
    public void onRefresh() {

        swipeView.postDelayed(new Runnable() {

            @Override
            public void run() {
                swipeView.setRefreshing(true);
                handler.sendEmptyMessage(0);
            }
        }, 1000);
    }
}

You may also like...

3 Responses

  1. MurphyNeo says:

    thank you!

  2. phila says:

    A ListView inside a ScrollView? A you trying to confuse the user???

  3. Jack says:

    Here is new library with “pull to refresh” effect for Android – https://github.com/Cleveroad/FireworkyPullToRefresh

Leave a Reply

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