Android Parse JSON And Show In Listview Retrieve/Fetch URL Server

Android Parse JSON And Show In Listview Example is the topic of today.

You will learn how to display JSON data in custom listview in android.

To fetch/retrieve JSON data from URL or web server we need to create one web service.

This web service will get us the data which will parse using JSONArray and JSONObject and we will populate the custom listview.

We will get string data like name, country, city etc. and an image URL which is also in string format.

To how to fetch data from server in android and display in listview with image and text, we need to have data in proper format which is JSON.

In this example, we will get the JSON data , about tennis players and, will populate listview step by step with information about players.

Step 1. Writing in Gradle File

To set the image from URL in Listview, we need to fetch image from URL using Picasso library.

You can also use other libraries like AQuery, Volley etc. to load image from URL.

To use Picasso library, wrote down the below line in build.gradle(Module:app) file.

Above line will integrate the required classes to use various methods of the Picasso library.

Step 2. Permissions

This example is fetching JSON data from the remote web server by using the web service.

So for this purpose, we need to use internet and so we also need internet permissions.

Add the below line in the AndroidManifest.xml file

  • This permissions is normal permission, so we do not need to ask for runtime permission to the user.

Step 3. HttpRequest class

To make Http calls to retrieve JSON data from URL we need to use HttpURLConnection class.

  • Using HttpURLConnection class, you can make for GET or POST call to the web service.

So create a new class named HttpRequest.java and copy the following source code

  • We will use various methods from the above class to make Http calls.
  • In POST call, we need to have some parameters and in GET call, we do not need to add any parameters.

Step 4. Tennis Model

We want to fetch the information like name, country, city and image URL from the remote MySQL server.

And we will populate listview with the fetched information. So for listview, we should create a model class which will maintain the data set.

Prepare a new class and give it a name as TennisModel.java

Write down following lines in TennisModel.java class

  • As you can see in the above code snippet that it contains a getter and setter methods for each information.
  • We will use getter methods in parsing the JSON and setters in the adapter class of the listview.

Step 5. Separate Layout File

Let us make a new separate layout XML file that will represent a view layout of every row of the listview.

Create a new XML file in res->layout directory and set a name as lv_players.xml

Code structure for lv_players.xml is as below

  • I have taken one Imageview and three TextViews in the above file.
  • We will set the image of the player in imageview and name, country, city in the each three TextView.

Step 6. Making Tennis Adapter Class

Now let us make an adapter class which will populate the listview.

Create a new class named TennisAdapter.java

Code block for TennisAdapter.java class looks like the below

  • In this class, we will receive one arraylist (tennisModelArrayList) which contains the objects of the TennisModel class.

Following lines from the getView() method will set the required data into respective imageview and textview.

  • We have used getter methods to fetch desired data. Picasso library is used here to load image from image URL.

Step 7. Last Changes

At last, we just need to do some changes in activity_main.xml and MainActivity.java file.

Write the below source code in activity_main.xml file.

Mainly, a listview is the important layout widget in the above file.

Now replace your existing code of MainActivity.java with the below source code

Reading Deeply

Let us step by step read and understand the code of MainActivity.java

Consider the following lines of code

  • Very first line is defining the string variable with URL as a value of it.
  • This is the URL which will give us the data in the JSON format.
  • Second line in one integer variable.
  • Third one is making an object of the ListView class.
  • Fourth line is creating an arraylist with the objects of the TennisModel class.
  • Fifth line is making an object of the TennisAdapter class and sixth will create one progress dialog.

Now in onCreate() method, we will call a fetchJSON() method.

Code for fetchJSON() method is as below

  • We are making an http request to our URL in this method using AsyncTask class.
  • When http call completes it’s execution, compiler call onPostExecute() method.
  • onPostExecute() method will call onTaskCompleted() method.

Code for onTaskCompleted() method is as follow

  • if compiler receives the JSON data correctly, then if(isSuccess(response)) will be true, and compiler will go inside this if() condition.
  • After that it will parse the JSON using getInfo() method.
  • And then compiler will set the adapter in the listview.

Writings for getInfo() method is as the following

  • We are parsing the JSON response in this class.

Our JSON response looks like the below

  • Compiler will run one for loop for the number of times equal to the number of children in the JSONArray named “data.”
  • During the every iteration of the  for loop compiler will set the data using the setter methods of TennisModel class.

Final OutPut Of Example

Download Source Code for Android parse JSON and Show In ListView

[sociallocker]Download Source Code For Json_Parse_Listview[/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 *