Android Retrofit ListView Tutorial Example Parse JSON Step By Step

You are reading about Android Retrofit ListView Tutorial Example Parse JSON Step By Step.

Retrofit android tutorial will guide you to parse JSON data from the remote web server and then display this data in the ListView.

We will fetch/retrieve JSON data from MySQL database (server) using retrofit and will make custom listview with image and text.

In this tutorial, we will fetch the information like player name, city, country and image URL in JSON format with retrofit library.

Retrofit library makes our task easy to do http calls to the web service to retrieve the JSON data.

It also handles the cache of data in the proper manner.

Then a listview will showcase this information in a perfect format.

Last Look Of Retrofit ListView

Let us reach our goal step by step.

Step 1. Permission and Gradle lines

Open up your android studio and make a new fresh project with empty activity as a default activity.

When we want to get data from server, we need to use internet of the android device.

For this need, we will write one line in AndroidManifest.xml file. Below line will enable our app to use internet.

After this, let us add some lines in the build.gradle(Module:app) file as per the below

  • First line will add the required classes to use retrofit library in our project.
  • Second line will enable us to use the coding lines of the scalar library.
  • By default, retrofit will not give us the JSON response in a string format. Scalar helps us to convert the JSON data into the string format.
  • Last line is for picasso library. This library will help us to load the images from URL and to maintain the image cache.

Step 2. Making Our Interface

Prepare a new JAVA class and give it a name MyInterface.java

Write down the below source code in MyInterface.java

  • A string variable JSONURL contains the URL from which we will get our JSON data.
  • @GET annotation holds the name of the php file.
  • getString() function has the return type as a call back in the string format.

Step 3. Model class for ListView

Now make a new java class named ModelListView.java

Source code for ModelListView.java is looking like the following

  • Types of information we are getting from JSON is like name, city, country etc.
  • Above class includes getter ans setter information for all the types of the information.
  • These methods will help us to maintain data between the listview and the adapter class.

Step 4. Special layout file

Create a new layout resource file named retro_lv.xml and write the below code snippet in this file.

  • This file have one image view and three text views.
  • We will fetch image from the URL in this image view.
  • Textviews will hold the information like name, country, city etc.

Step 5. Retro Adapter

Time to make an adapter class for the listview.

Prepare a new class and named it as RetroAdapter.java

Following is the code structure for RetroAdapter.java class

  • Look at the constructor in the above adapter class. It has two parameters.
  • First parameters will get context while other one will get the arraylist with the objects of the ModelListView class.
  • getView() method contain the necessary coding lines to fill the information.

Following lines are populating the row of the listview.

  • First line line will load the image from the URL using picasso library.
  • Other three lines will fill the name, country and city respectively.

Step 6. Main Modifications

Now just need to change the main files.

First of all, add the below code snippet in the activity_main.xml file

  • Above file holds one text view and one listview.
  • Text view is static and it is saying that below listview have data which is parsed with retrofit.

Now in the MainActivity.java file, you should write the following coding lines

Deep Into Main Activity

Let us check what will main activity code actually do in this app.

First of all in onCreate() method, compiler will call getJSONResponse() method.

Source code for getJSONResponse() method is as the below

  • Here, compiler will create the object of the Retrofit class. During this process, it will bind the URL using .baseUrl() method.
  • Then compiler will create the object of the MyInterface class which we have created in Step 2.
  • An object of the Call<String> will use call.enqueue() to make the http call.
  • When system gives the final JSON response then compiler will call onResponse() method.
  • Inside the onResponse() method, we will get the JSON response in the string format.
  • Then call to writeListView() method will be taken place.

Code for writeListView() method is as the following

Let us first check the JSON data which we get from the server.

  • Now understand the writeListView() method and also check the JSON data simultaneously.
  • Here, compiler will first get the json array from the field “data
  • Then it will run one for loop. In the every iteration of the for loop, compiler will fetch the information and will set it in the object of the ModelListView class.
  • After the completion of the for loop, compiler will set the arraylist to the second parameter of the RetroAdapter.

Finally, adapter is set to the listview and whooom, our example is finish!!

Download Code for Android Retrofit ListView Example

Download Json_ListView_Retrofit Source Code

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 *