Android ListView Using Volley | Parse JSON Listview With Image And Text

Android ListView Using Volley is the important aspect in android development.

In this tutorial, you will learn to parse JSON Data with Volley and Display in ListView With Image and Text.

We will retrieve mysql data from web server in JSON format and will make custom listview with image and text using volley.

Volley is the library that simplifies the process of fetching json data from mysql server or database.

We are creating a demo where we will retrieve data like county, city, name and image URL in string format.

Making listview from this data will be easy task if we maintain data with proper model class structure.

Step 1. Adding Gradle Dependencies

To use volley in android app, we need to fetch various classes of the library in our project.

We can do this by adding volley’s gradle dependency.

Add the below two lines in build.gradle(Module:app) file.

  • First line is the dependency for volley.
  • Second one is for Picasso library. We will use Picasso to load images from the URL.

Step 2. Permission To Use Internet

Internet is required to retrieve JSON data from remote server.

We have to write for Internet permission in AndroidManifest.xml file.

Copy the below line in AndroidManifest.xml

  • Asking for runtime permission is not required here because internet permission is a normal permission.

Step 3. Class of Model

To maintain the proper data structure for ListView, model class can be a perfect component.

We can define getter and setter methods in this class for all the information here.

Create a new class named DataModel.java and fill the below source code

  • There are different types of information like name, country, city and image URL in string format.
  • Above class includes separate getter and setter methods for all data types.
  • These methods will help to reduce complexity of listview adapter class.

Step 4. Proper ListView Layout

To make same layout for all the child of listview, we have to make one layout file.

Make a new Layout XML file under res->Layout directory.

Set the name of the file as lv_player.xml and copy the following code in it.

  • One ImageView and three TextView are representing the above file.
  • Image from URL will be loaded in the ImageView and other information will fill the textviews.

Step 5. ListView Adapter

Adapter works as the data setter for the ListView.

It helps us to set the data in each row with proper manipulation of the data.

Prepare a new java class and give it a name ListAdapter.java

Source code for  ListAdapter.java is as the below

Understanding Adapter

Look at the below constructor

  • Adapter will get the arraylist (dataModelArrayList) made with the objects of DataModel via constructor.
  • This arraylist will help us to populate the listview.

Consider the following lines from getView() method.

  • First line will load the image from URL using Picasso.
  • Compiler will set this image in imageview.
  • Then it will set the other information in the respective textviews.
  • As you may have noticed that arraylist (dataModelArrayList) is giving us proper object with the help of position.

Step 6. Climax Changes

Now we just need to change the main files and that is all.

Set the code of activity_main.xml file as the below one

  • A textview in above snippet is suggesting that below listview is populated from json data.
  • Then a listview is present which holds the JSON data.

After this, source code for MainActivity.java is looking like the following

Entities of Main Activity

Let us check the modules of above class step by step.

Consider the below snippet

  • First line is representing the URL line from where we will get the JSON data.
  • Second one will create an object of progress dialog.
  • Third is giving us the object of Listview.
  • Fourth one is making an arraylist of the objects of the DataModel class.
  • Last one is making an Adapter object.
  • In onCreate() method, compiler will call a method retrieveJSON().

Code block of retrieveJSON() method is as the following

  • Compiler will show the progress dialog to inform user that system is fetching the data from the server.
  • Then it will use stringRequest class of volley with URL to make http call to server.
  • In the try block, we will parse the JSON using JSONObject and JOSNArray classes.

JSON fetched from the URL looks like the below

  • object named “status” will have true or false value.
  • If value is true then compiler will parse JSONArray called “data.”
  • One for loop is made up.
  • Number of iterations of for loop is equals to the number of object of “data” array.
  • During every iteration, compiler will set the data in the arraylist (dataModelArrayList).
  • After that, compiler will call setupListView() method.

Code for setupListView() method is as below

  • Compiler will first remove the progress dialog.
  • Then it will set the adapter to the listview. Adapter includes arraylist in it’s parameter.

Video Output

Download Source Code For Android ListView Using Volley Example

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