Skip to main content

Android Pull to Refresh RecyclerView with JSON PHP

Android Swipe Refresh layout with RecyclerView PHP JSON

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 screen, you likely to see rounded button with refresh icon spinning indicating data is loading on 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.

Download Code From Github

How to add swipe/pull to refresh layout?

Adding pull to refresh layout involves following files.

activity_main.xml

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 reference to SwipeRefreshLayout widget and setting listener to listen for swipe down refresh and when user swipe down to 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 user swipes the screen. It continues to visible even after data loaded so we need to hide the layout after our data loaded from 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 it. Now, in your phone, swipe vertically down to see updated data.

Gururaj P Kharvi

An Entrepreneur, Web and Android developer from India.

9 thoughts on “Android Pull to Refresh RecyclerView with JSON PHP

  1. 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.

    1. 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 like http://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 in AdapterFish.java and for your reference image folder path is highlighted.

      // 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);
      
      1. 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. 🙂

        1. May i know how you stored images in your database, as image pathex: http://example.com/image.jpg or Blob.

  2. 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

  3. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *