Android JSON Parsing And Display With RecyclerView Image And Text

Android JSON Parsing And Display With RecyclerView example is the current reading content.

You will Learn about Android recyclerview tutorial – fetching json from server in this example.

After JSON parsing, we will populate the recyclerview with image and text.

JSON data will contain string information like country, name, city and image URL.

JSONAarray and JSONObject are the key component of the JSON data structure which we will parse today.

After parsing this data we will show them in recyclerview along with cardview.

We need to use web service to parse JSON from URL or remote Web Service.

Web service enable us to fetch data and to set them in android device.

Step 1. Gradle File Updation

In this step, we will update the build.gradle(Module:app) file.

To use recyclerview and cardview, we need to fetch some classes from remote server.

Also, we need to have classes for Picasso library which we use to load the image from the URL.

So write the following lines in build.gradle(Module:app) file.

  • First line is for Picasso and other two are for recyclerview and cardview.

Step 2. Internet Permission In Manifest

Of course our android app need to use internet for retrieving JSON data from remote server.

So in the AndroidManifest.xml file, add the below line

Step 3. HttpRequest Class

To get the remote data, we need to make http call via web service.

For making http calls, there is a class named HttpURLConnection , which helps to make connection to the internet.

Create a new class and give it a name HttpRequest.java 

Write down the following coding lines in HttpRequest.java 

  • Methods of above class enable us to make GET and POST http calls.
  • In GET call, there is no parameter and while POST calls do require parameters along with URL of Web Service.

Step 4. Model Data Class

To maintain the various information among all the children of the recyclerview, we will make one data model class.

This class helps us to simplify the data maintaining task in adapter class.

So prepare a new class named RogerModel.java

Copy the following source code in RogerModel.java class.

  • As you can see that we have getter and setter methods for different string like country, name, city and image url.

Step 5. XML file for Recyclerview child

For maintaining the same view across all the children of recyclerview, we need one separate XML layout file.

Make a new XML file under res->layout directory and give it a name rv_item.xml.

Write down the below code block in rv_item.xml.

  • As you have seen in above code, main components are ImageView and Three textviews.
  • I have written a code for CardView as a parent of all other components.
  • CardView will create attractive view to make recyclerview looks more beautiful 🙂

Step 6. RogerAdapter class

For setting the data in every row item of recyclerview, we need to make appropriate adapter class.

Create a new class named “RogerAdapter.java” and add the following code

  • In the constructor of this adapter class, compiler will get an Arraylist (rogerModelArrayList) with the objects of the RogerModel class.
  • onBindViewHolder() method from the above class, set the information in imageview and textviews using rogerModelArrayList.
  • Every object from rogerModelArrayList is used to populate every single row item of recyclerview.

Step 7. At the End

Now we close to the end of this tutorial.

Replace the code of activity_main.xml with the following code block

  • I have taken one textview and one recyclerview in the main layout file.

In the MainActivity.java file copy the below source code

Getting Maximum from Above Code

Let us read and understand what above code is doing.

Consider the following code

  • First string variable contains the URL from which we will get the JSON data.
  • Second line have one integer variable which will be used in onTaskComplete method.
  • Third line is simply creating an object for RecyclerView.
  • Fourth line is making an arraylist with objects of the RogerModel class.
  • Fifth one is making one object of RogerAdapter class and last one is making an object of progress dialog.

Look at the below line

  • in onCreate() method I am calling a method named fetchJSON()

Code for this method is as the below

  • This is the method where compiler will make an http call.
  • Compiler will use AsyncTask class to make an http call with required parameters and URL.
  • When the http call is done successfully, compiler will execute onPostExecute() method.
  • onPostExecute() method will call the onTaskCompleted() method.

JSON response will look like the below

onTaskCompleted() method’s code structure is as the following

  • first, compiler will check if the status of JSON response is true or false (see in above JSON response).
  • If the status is true then compiler will go inside the if condition.
  • Then it will get the information from the getInfo() method.

getInfo() method has the below coding lines

  • Compiler will rotate the for loop for the number of iterations equals to the number of objects present in the JSONArray named “data”
  • After getting all the data, compiler will send it to the adapter class and adapter will finally populate the recyclerview.

Final OutCome

Download Source Code For Android JSON Parsing And Display With RecyclerView

[sociallocker]Download Source Code For Json_Recyclerview_Old[/sociallocker]

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

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