April 9th, 2014

Swipe To Refresh added to Android

Swipe-to-Refresh animation

Google recently released an update to the Android support library bringing in an exciting new standard implementation of a pattern that they have been progressively introducing through applications such as GMail or Google Now.

This pattern, called swipe-to-refresh, uses an upward pull user feedback to inform the app that a data refresh is requested. This complete another common pattern, infinite scrolling, that instead use a downward movement to load more data.

We have updated our component to expose the new SwipeRefreshLayout class that implements the pattern. To make use of it, simply wrap in your existing Xamarin.Android app layout.

<android.support.v4.widget.SwipeRefreshLayout
    android:id="@+id/refresher"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</android.support.v4.widget.SwipeRefreshLayout>

Setting up the SwipeRefreshLayout instance is pretty easy from code. You simply have to define a color scheme and a callback that is invoked when an update operation is requested by the user.

refresher = FindViewById<SwipeRefreshLayout> (Resource.Id.refresher);
refresher.SetColorScheme (Resource.Color.xam_dark_blue,
                          Resource.Color.xam_purple,
                          Resource.Color.xam_gray,
                          Resource.Color.xam_green);
refresher.Refresh += async delegate {
	await forum.FetchItems (clear: true);
	refresher.Refreshing = false;
};

The color scheme can be any set of color or the same color. In any case, the first parameter is also used as the initial feedback bar background.

We have also added a dedicated sample that shows how this code can be integrated in a complete scenario, including a complex layout utilizing fragments.

0 comments

Discussion are closed.