Tech tip of this week

Android Lollipop Swipe to Refresh Example

In this tutorial we will learn about swipe to refresh layout introduced in Android Lollipop (API 21).

https://developer.android.com/reference/android/support/v4/widget/SwipeRefreshLayout.html

How it works:
  • ListView is declared as a child view to SwipeRefreshLayout.
  • When user swipes the ListView, SwipeRefreshLayout class will show the refresh bar UI.
  • When user swipes down, the OnRefreshListener events gets fired, inside this listener we will write refresh result logic.
  • Once data is downloaded, user has to manually call setRefreshing(false) to hide the refresh spinner.
This API is available in below support library.
com.android.support:support-v4:21.0.+.


  • First we need to add support library in build.gradle file,

       dependencies {
              compile 'com.android.support:support-v4:21.0.+'
       }

  • Next we have to add SwipeRefreshLayout widget to the layout file
   <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: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=".MainActivity">

    <android.support.v4.widget.SwipeRefreshLayout
         android:id="@+id/activity_main_swipe_refresh_layout"
         android:layout_width="match_parent"
         android:layout_height="wrap_content">

           <android.support.v7.widget.RecyclerView
                 android:id="@+id/cardList"
                 android:layout_width="match_parent"
                 android:layout_height="match_parent"
                 android:layout_marginBottom="50dip" />
    </android.support.v4.widget.SwipeRefreshLayout>
</RelativeLayout>
  • Next we have to create SwipeRefreshLayout in onCreate() method in Activity.
       mSwipeRefreshLayout = (SwipeRefreshLayout)                                                      findViewById(R.id.activity_main_swipe_refresh_layout);

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

    private void refreshContent() {
        if(mSwipeRefreshLayout.isRefreshing()) {
            Toast.makeText(this,"Pull to List Refresh",                                                                                              Toast.LENGTH_LONG).show();
            //To hide refresh bar once list is refreshed
            mSwipeRefreshLayout.setRefreshing(false);
        }
    }


Example:
video

No comments:

Post a Comment