ZOFTINO.COM android and web dev tutorials

How to Implement Swipe Refresh in Android

If you want to refresh content in a view on any screen in your android app, then use swipe refresh layout widget. Android support library provides swipe refresh layout widget which allows displaying new content on vertical swipe. In this post, I am going to show how to use swipe refresh layout widget.

How Swipe Refresh Layout Works

The view that needs to refresh on vertical swipe gesture should be defined as child of Swipe refresh layout. Swipe refresh layout captures vertical swipe events on the view and notifies refresh listener.

In the activity of your screen, you need to implement refresh listener SwipeRefreshLayout.OnRefreshListener to handle refresh event notifications from swipe refresh layout.

In onRefresh method of the listener, which gets called on vertical swipe, you need to notify swipe refresh layout about refreshing status by calling setRefreshing method so that refreshing visual can be shown to user while refresh data is being fetched and stopped once refresh is complete.

Swipe Refresh Layout Example

I’ll show you how to use swipe refresh layout with coupons app example. In this example, on coupons list screen, we will display latest coupons on refresh events. We will define RecyclerView to display list of coupons on coupon screen as the direct child of swipe refresh layout in layout xml. To know more about how to implement recycler view and to view recycler view related code, read recycler view related post.

You can customize refresh visual to change color by calling setProgressBackgroundColorSchemeResource.

Swipe Refresh Layout Output

android swipe refresh layout example

Swipe Refresh Layout Code

Swipe refresh activity

package com.zoftino.materialdesign;

import android.content.Context;
import android.os.Bundle;
import android.os.CountDownTimer;
import android.support.design.widget.TabLayout;
import android.support.v4.widget.SwipeRefreshLayout;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;

public class SwipeRefreshActivity extends AppCompatActivity {

    private RecyclerView recyclerView;
    private SwipeRefreshLayout srfl;
    private TabLayout tabLayout;
    private Context context;

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

        context = this;

        recyclerView = (RecyclerView) findViewById(R.id.latest_coupons);
        RecyclerView.LayoutManager storeContentLayoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(storeContentLayoutManager);

        RecyclerView.Adapter contentAdapter = new CouponRecyclerViewAdapter(CouponStoreData.couponsData, this);
        recyclerView.setAdapter(contentAdapter);

        srfl = (SwipeRefreshLayout)findViewById(R.id.store_content_refresh);
        srfl.setProgressBackgroundColorSchemeResource(R.color.colorBrn);

        srfl.setOnRefreshListener(
                new SwipeRefreshLayout.OnRefreshListener() {
                    @Override
                    public void onRefresh() {
                        refreshContent();
                    }
                }
        );

        tabLayout = (TabLayout) findViewById(R.id.store_tabs);

        tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            public void onTabReselected(TabLayout.Tab tab) {

            }

            public void onTabSelected(TabLayout.Tab tab) {
                String tabId = (String) tab.getText();
                showContent(tabId);
            }

            public void onTabUnselected(TabLayout.Tab tab) {

            }
        });

    }

    public void showContent(String tabId) {
        RecyclerView.Adapter contentAdapter = new CouponRecyclerViewAdapter(CouponStoreData.getStoreContent(tabId), this);
        recyclerView.setAdapter(contentAdapter);
    }
    public void refreshContent() {
        int tabPosition = tabLayout.getSelectedTabPosition();
        String tabId = (String)tabLayout.getTabAt(tabPosition).getText();
        delayResponseToShowSwipeRefreshVisual(tabId);
    }

    public void delayResponseToShowSwipeRefreshVisual(final String tabId){
        new CountDownTimer(4000, 4000) {
            public void onTick(long millisUntilFinished) {
            }

            public void onFinish() {
                RecyclerView.Adapter contentAdapter = new CouponRecyclerViewAdapter(CouponStoreData.getStoreContent(tabId), context);
                recyclerView.setAdapter(contentAdapter);
                srfl.setRefreshing(false);
            }
        }.start();
    }
}

Swipe refresh activity layout

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/swipe_refresh_activity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zoftino.materialdesign.SwipeRefreshActivity">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/app_bar">

        <android.support.design.widget.TabLayout
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:id="@+id/store_tabs">
            <android.support.design.widget.TabItem
                android:text="@string/stores"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/stores"></android.support.design.widget.TabItem>

            <android.support.design.widget.TabItem
                android:text="@string/coupons"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/coupons"></android.support.design.widget.TabItem>

            <android.support.design.widget.TabItem
                android:text="@string/cashback"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
                android:id="@+id/cashback"></android.support.design.widget.TabItem>
        </android.support.design.widget.TabLayout>
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.widget.SwipeRefreshLayout
        android:id="@+id/store_content_refresh"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <android.support.v7.widget.RecyclerView
            android:id="@+id/latest_coupons"
            android:scrollbars="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"></android.support.v7.widget.RecyclerView>
    </android.support.v4.widget.SwipeRefreshLayout>
</android.support.design.widget.CoordinatorLayout>