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
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<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.
|
1 2 3 4 5 6 7 8 9 10 11 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 |
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); } } |
