Pull down to fetch fresh data from PHP or JSON file into RecyclerView using Android Swipe Refresh Layout and AsyncTask.
When you swipe down to the screen, you likely to see a rounded button with refresh icon spinning indicating data is loading on the background. In Android, it’s easy to implement that android pull to refresh layout. Let’s see how to do that.
This article is directly linked to my previous article Fetch JSON data in Android and display with RecyclerView so Please, go through that article and come back to this tutorial to implement pull to refresh layout for that.
How to add swipe/pull to refresh layout?
Adding pull to refresh layout involves following files.
activity_main.xml
The SwipeRefreshLayout widget is supported in android support version 4, the code for adding widget is highlighted below and make sure that your RecyclerView widget is inside SwipeRefreshLayout widget.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<android.support.v4.widget.SwipeRefreshLayout
android:id="@+id/swifeRefresh"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<android.support.v7.widget.RecyclerView
android:id="@+id/fishPriceList"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
/>
</android.support.v4.widget.SwipeRefreshLayout>
</LinearLayout>
MainActivity.java
Define the variable for SwipeRefreshLayout view on top of the class.
SwipeRefreshLayout mSwipeRefreshLayout;
Copy the below-highlighted code into your oncreate()
method of MainActivity.java class. Here we are getting the reference to SwipeRefreshLayout widget and setting listener to listen for swipe down refresh and when the user swipes down to a screen, call AsyncTask to fetch fresh data.
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Swipe Refresh Layout
mSwipeRefreshLayout = (SwipeRefreshLayout)findViewById(R.id.swifeRefresh);
mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
@Override
public void onRefresh() {
new AsyncFetch().execute();
}
});
//Make call to AsyncTask
new AsyncFetch().execute();
}
We have made Swipe layout visible when the user swipes the screen. It continues to visible even after data loaded so we need to hide the layout after our data loaded from the server. At the end of your onPostExecute(String result)
method add below code to hide SwipeRefreshLayout.
mSwipeRefreshLayout.setRefreshing(false);
Finally, to test your application remove some rows from JSON file or add some rows to it. Now, in your phone, swipe vertically down to see updated data.
July 29, 2018 at 8:10 am
how to Use Refresh Layout in Volley data refresh from server.
July 29, 2018 at 11:11 am
Follow link https://stackoverflow.com/questions/33573803/how-to-send-a-post-request-using-volley-with-string-body to define request using Volley. Here are the basic steps to follow.
OnRefresh()
method by removing AsyncTask class.SwipeRefreshLayout.setRefreshing(false)
line of code inOnResponse()
andOnResponse.ErrorListener()
to hide the refresh layoutJune 3, 2017 at 3:43 am
Thanks bro, It is a great tutorial. 🙂
March 16, 2017 at 7:12 pm
Hi, I added teh code correctly but the “AsyncFetch” is not knowing so it’s with red color.
Can you give me an idea why is happening this?
Thanks.
March 24, 2017 at 1:54 pm
I think you are not implemented methods in it.
September 30, 2016 at 11:30 am
helllo gururaj… i have a problem… when i am using swipe… it showing repeat data…it’s not refresing data.. but add json data repeatedly
July 25, 2016 at 1:35 pm
How to add load more ?
July 27, 2016 at 5:10 am
The article Endless Scrolling with AdapterViews and RecyclerView on codepath may help you.
June 2, 2016 at 6:12 pm
Hi Guru thank you for the source code and tutorial. I manage to run the app. but i am wondering about the image. fish image which I would like to replace with my own images from my server. I want to pass my image as an url please help me achieve with thank you.
June 2, 2016 at 6:57 pm
In our JSON file you like to see image name as
1.jpg, 2.jpg and so on...
, they are actually image from URL, rather than repeating URL again likehttp://www.example.com/images/1.jpg, http://www.example.com/images/2.jpg and so on...
, i specified only image name and folder path is attached while retrieving image. The sample code is shown below which i used inAdapterFish.java
and for your reference image folder path is highlighted.June 8, 2016 at 2:30 am
Hi,
// load image into imageview using glide
Glide.with(context).load(“http://192.168.1.7/test/images/” + current.fishImage)
.placeholder(R.drawable.ic_img_error)
.error(R.drawable.ic_img_error)
.into(myHolder.ivFish);
What I found glide supports fetching, decoding, and displaying video stills, images, and animated GIFs.
But how could I change it to display picture from mysql? This code use to find picture from file test/images right? Im still looking forward tutorial fetch picture from mysql to search example.. 🙂
Thank you so much. 🙂
June 8, 2016 at 6:25 am
May i know how you stored images in your database, as image path
ex: http://example.com/image.jpg
or Blob.