Free Shipping

Secure Payment

easy returns

24/7 support

  • Home
  • Blog
  • SwipeRefreshLayout in Android Fragment | An Introduction

SwipeRefreshLayout in Android Fragment | An Introduction

 July 20  | 0 Comments

Introduction to SwipeRefreshLayout

SwipeRefreshLayout was introduced in android.support.v4.widget.SwipeRefreshLayout library.
This feature displays when a user swipes down from the top and a circular loader appears. It will disappear when the content is refreshed.
The main use of SwipeRefreshLayout is to refresh the page or screen.

Real Time Example:
We can see so many applications like Gmail, G+, Facebook, Twitter uses this feature.

Interface & Methods:
SwipeRefreshLayout.OnRefreshListener:
We implement this interface to notify when the user swipes down to refresh.
onRefresh():
After implementing the interface, override this method. It is called when the user swipes down the view.

Example with code:
In this example, we are going to implement SwipeRefreshLayout using ListView in Android Fragment.
⦁ Create an Application SwipeRefreshLayoutFragmentExampleAndroid.
Requirements:
MainActivity.java, SwipeRefreshLayoutFragment.java, swipe_refresh_layout_fragment.xml, colors.xml, strings.xml.
Let’s do it one by one.

MainActivity.java:
Create this to add the fragment when the activity loads.
Add the code in onCreate(){…}

getSupportFragmentManager().beginTransaction()
.add(R.id.container, new SwipeRefreshLayoutFragment())
.commit();

Now, create the fragment class and its XML file.
swipe_refresh_layout_fragment.xml:
Create this XML file and add the code inside FrameLayout.

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

It supports only one direct child. So, here we show it in a ListView.
colors.xml:
We can set one or more colors for progress bar inside method setColorSchemeResources()

Add the code in this XML file.

<color name="orange">#FF9900</color>
<color name="green">#009900</color>
<color name="blue">#000099</color>

strings.xml:

Add the code here for String Array.

<string-array name="list_names">
<item>Cupcake</item>
<item>Donut</item>
<item>Eclair</item>
<item>Froyo</item>
<item>Gingerbread</item>
<item>Honeycomb</item>
<item>Ice Cream Sandwich</item>
<item>Jelly Bean</item>
<item>Kitkat</item>
<item>Lollipop</item>
<item>Marshmallow</item>
<item>Nougat</item>
</string-array>

SwipeRefreshLayoutFragment.java:

Create this class and extend it with the fragment.

Initialize SwipeRefreshLayout and other Variables:

List<String> arrayList;
SwipeRefreshLayout mSwipeRefreshLayout;
ListView mListView;

Add the code in onCreateView(){..}

Now, take the reference of it and ListView.

mSwipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.swipeToRefresh);
mListView = (ListView) view.findViewById(R.id.listView);

Set the colors and Adapter.

mSwipeRefreshLayout.setColorSchemeResources(R.color.orange, R.color.blue, R.color.green);
arrayList = Arrays.asList(getResources().getStringArray(R.array.list_names));
ArrayAdapter adapter = new ArrayAdapter(getContext(), android.R.layout.simple_list_item_1, arrayList);
mListView.setAdapter(adapter);

Now, implement the OnRefreshListener and its overridden method.

mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
new Handler().postDelayed(new Runnable() {
@Override
public void run() {
shuffle();
}
}, 2500);
}
});

Add the code for shuffle():

Collections.shuffle(arrayList);
ArrayAdapter adapter = new ArrayAdapter(getContext(), android.R.layout.simple_list_item_1, arrayList);
mListView.setAdapter(adapter);
mSwipeRefreshLayout.setRefreshing(false);

Here, when the user refreshes the view it calls the onRefresh() method every time, and it shuffles the list accordingly.

We have to setRefreshing(false), to notify the refresh is complete and stop the progress bar animation.

Output:

 

Here, we see it using ListView in Android Fragment.

Download Source Code: GitHub

Conclusion:

This was just a simple example of how to create SwipeRefreshlayout in Android fragment. We can also create it inside GridView or RecyclerView etc. This feature is mainly used to refresh the content most likely in News Feed applications. Some real time examples are discussed above.
It is introduced in Android support library. We can customize it to create great applications. It is quite important and popular in Android app development.

Keep visiting www.acadgild.com for more updates on the courses

>