• Android Swipe to Refresh

    19 February 2016

    I have recently came across this new View in the support library package that allows your app to have built-in support for pull swipe to refresh. This is pretty cool, since we don't have to use any of the libraries out there. Admittedly, very little customization can be done, but then what else can we customize, right?

    Anyway, here's a short demo of using this nifty little view.

    Initial list
    While refreshing
    After refreshing

    The app is a simple ListView that shows a list of countries. Swiping down on the list will simulate a long-running activity (like connecting to a server, for example) and afterwards updating the list with new data.

    Adding support for swipe to refresh is pretty straightforward. You would have to wrap the swipe-able layout in a SwipeRefreshLayout. Here is my XML file:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    <android.support.v4.widget.SwipeRefreshLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:id="@+id/container"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:ignore="MergeRootFrame" >

    <ListView

    android:id="@android:id/list"

    android:layout_width="match_parent"

    android:layout_height="match_parent" />

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


    In your Fragment, you would then have to put an onRefreshListener on thisSwipeRefreshLayout. In my Fragment's onCreateView, I have this:

    ?

    1

    2

    3

    4

    5

    6

    // Configure the swipe refresh layout

    mSwipeRefreshLayout = (SwipeRefreshLayout) rootView.findViewById(R.id.container);

    mSwipeRefreshLayout.setOnRefreshListener(this);

    mSwipeRefreshLayout.setColorScheme(

    R.color.swipe_color_1, R.color.swipe_color_2,

    R.color.swipe_color_3, R.color.swipe_color_4);


    The colors are defined in a colors.xml file in my res/values folder. To show or hide the refresh animation, you would have to call setRefreshing(boolean). This means that if you have to kick off an AsyncTask when the user swipes down, call setRefreshing(true) inonPreExecute, and call setRefreshing(false) in onPostExecute.

    The implementation of onRefresh in the demo app is pretty simple, it simply grabs the next bunch of countries from a pre-defined list.

    ?

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    @Override

    public void onRefresh() {

    // Start showing the refresh animation

    mSwipeRefreshLayout.setRefreshing(true);

    // Simulate a long running activity

    new Handler().postDelayed(new Runnable() {

    @Override

    public void run() {

    updateCountries();

    }

    }, 5000);

    }


    That's it really.  Nice and short. The code for this demo is in Github.

Comments

Comments closed on this post.