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.
Video Output
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.
implementation 'com.android.volley:volley:1.1.1' implementation 'com.squareup.picasso:picasso:2.71828'
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
<uses-permission android:name="android.permission.INTERNET"/>
- 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
public class DataModel {
private String name, country, city, imgURL;
public String getImgURL(){
return imgURL;
}
public void setImgURL(String imgURL){
this.imgURL = imgURL;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getCountry() {
return country;
}
public void setCountry(String country) {
this.country = country;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
}
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.
<?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">
<ImageView
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_marginTop="10dp"
android:layout_marginLeft="10dp"
android:scaleType="fitXY"
android:id="@+id/iv"/>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="100dp"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_marginTop="5dp"
android:layout_weight="1"
android:id="@+id/name"
android:text="ddd"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/country"
android:text="ddd"/>
<TextView
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/city"
android:text="ddd"/>
</LinearLayout>
</LinearLayout>
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
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import com.squareup.picasso.Picasso;
import java.util.ArrayList;
public class ListAdapter extends BaseAdapter {
private Context context;
private ArrayList<DataModel> dataModelArrayList;
public ListAdapter(Context context, ArrayList<DataModel> dataModelArrayList) {
this.context = context;
this.dataModelArrayList = dataModelArrayList;
}
@Override
public int getViewTypeCount() {
return getCount();
}
@Override
public int getItemViewType(int position) {
return position;
}
@Override
public int getCount() {
return dataModelArrayList.size();
}
@Override
public Object getItem(int position) {
return dataModelArrayList.get(position);
}
@Override
public long getItemId(int position) {
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
ViewHolder holder;
if (convertView == null) {
holder = new ViewHolder();
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
convertView = inflater.inflate(R.layout.lv_player, null, true);
holder.iv = (ImageView) convertView.findViewById(R.id.iv);
holder.tvname = (TextView) convertView.findViewById(R.id.name);
holder.tvcountry = (TextView) convertView.findViewById(R.id.country);
holder.tvcity = (TextView) convertView.findViewById(R.id.city);
convertView.setTag(holder);
}else {
// the getTag returns the viewHolder object set as a tag to the view
holder = (ViewHolder)convertView.getTag();
}
Picasso.get().load(dataModelArrayList.get(position).getImgURL()).into(holder.iv);
holder.tvname.setText("Name: "+dataModelArrayList.get(position).getName());
holder.tvcountry.setText("Country: "+dataModelArrayList.get(position).getCountry());
holder.tvcity.setText("City: "+dataModelArrayList.get(position).getCity());
return convertView;
}
private class ViewHolder {
protected TextView tvname, tvcountry, tvcity;
protected ImageView iv;
}
}
Understanding Adapter
Look at the below constructor
public ListAdapter(Context context, ArrayList<DataModel> dataModelArrayList) {
this.context = context;
this.dataModelArrayList = dataModelArrayList;
}
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.
Picasso.get().load(dataModelArrayList.get(position).getImgURL()).into(holder.iv);
holder.tvname.setText("Name: "+dataModelArrayList.get(position).getName());
holder.tvcountry.setText("Country: "+dataModelArrayList.get(position).getCountry());
holder.tvcity.setText("City: "+dataModelArrayList.get(position).getCity());
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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dp"
android:text="Below ListView is populated from JSON Data"
android:textColor="#000"
/>
<ListView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/lv"
android:layout_marginTop="10dp">
</ListView>
</LinearLayout>
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
import android.app.ProgressDialog;
import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.ListView;
import android.widget.Toast;
import com.android.volley.Request;
import com.android.volley.RequestQueue;
import com.android.volley.Response;
import com.android.volley.VolleyError;
import com.android.volley.toolbox.StringRequest;
import com.android.volley.toolbox.Volley;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
private String URLstring = "https://demonuts.com/Demonuts/JsonTest/Tennis/json_parsing.php";
private static ProgressDialog mProgressDialog;
private ListView listView;
ArrayList<DataModel> dataModelArrayList;
private ListAdapter listAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
listView = findViewById(R.id.lv);
retrieveJSON();
}
private void retrieveJSON() {
showSimpleProgressDialog(this, "Loading...","Fetching Json",false);
StringRequest stringRequest = new StringRequest(Request.Method.GET, URLstring,
new Response.Listener<String>() {
@Override
public void onResponse(String response) {
Log.d("strrrrr", ">>" + response);
try {
JSONObject obj = new JSONObject(response);
if(obj.optString("status").equals("true")){
dataModelArrayList = new ArrayList<>();
JSONArray dataArray = obj.getJSONArray("data");
for (int i = 0; i < dataArray.length(); i++) {
DataModel playerModel = new DataModel();
JSONObject dataobj = dataArray.getJSONObject(i);
playerModel.setName(dataobj.getString("name"));
playerModel.setCountry(dataobj.getString("country"));
playerModel.setCity(dataobj.getString("city"));
playerModel.setImgURL(dataobj.getString("imgURL"));
dataModelArrayList.add(playerModel);
}
setupListview();
}
} catch (JSONException e) {
e.printStackTrace();
}
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
//displaying the error in toast if occurrs
Toast.makeText(getApplicationContext(), error.getMessage(), Toast.LENGTH_SHORT).show();
}
});
// request queue
RequestQueue requestQueue = Volley.newRequestQueue(this);
requestQueue.add(stringRequest);
}
private void setupListview(){
removeSimpleProgressDialog(); //will remove progress dialog
listAdapter = new ListAdapter(this, dataModelArrayList);
listView.setAdapter(listAdapter);
}
public static void removeSimpleProgressDialog() {
try {
if (mProgressDialog != null) {
if (mProgressDialog.isShowing()) {
mProgressDialog.dismiss();
mProgressDialog = null;
}
}
} catch (IllegalArgumentException ie) {
ie.printStackTrace();
} catch (RuntimeException re) {
re.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
public static void showSimpleProgressDialog(Context context, String title,
String msg, boolean isCancelable) {
try {
if (mProgressDialog == null) {
mProgressDialog = ProgressDialog.show(context, title, msg);
mProgressDialog.setCancelable(isCancelable);
}
if (!mProgressDialog.isShowing()) {
mProgressDialog.show();
}
} catch (IllegalArgumentException ie) {
ie.printStackTrace();
} catch (RuntimeException re) {
re.printStackTrace();
} catch (Exception e) {
e.printStackTrace();
}
}
}
Entities of Main Activity
Let us check the modules of above class step by step.
Consider the below snippet
private String URLstring = "https://demonuts.com/Demonuts/JsonTest/Tennis/json_parsing.php";
private static ProgressDialog mProgressDialog;
private ListView listView;
ArrayList<DataModel> dataModelArrayList;
private ListAdapter listAdapter;
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
private void retrieveJSON() {
showSimpleProgressDialog(this, "Loading...","Fetching Json",false);
StringRequest stringRequest = new StringRequest(Request.Method.GET, URLstring,
new Response.Listener<String>() {
@Override
public void onResponse(String response) {
Log.d("strrrrr", ">>" + response);
try {
JSONObject obj = new JSONObject(response);
if(obj.optString("status").equals("true")){
dataModelArrayList = new ArrayList<>();
JSONArray dataArray = obj.getJSONArray("data");
for (int i = 0; i < dataArray.length(); i++) {
DataModel playerModel = new DataModel();
JSONObject dataobj = dataArray.getJSONObject(i);
playerModel.setName(dataobj.getString("name"));
playerModel.setCountry(dataobj.getString("country"));
playerModel.setCity(dataobj.getString("city"));
playerModel.setImgURL(dataobj.getString("imgURL"));
dataModelArrayList.add(playerModel);
}
setupListview();
}
} catch (JSONException e) {
e.printStackTrace();
}
}
},
new Response.ErrorListener() {
@Override
public void onErrorResponse(VolleyError error) {
//displaying the error in toast if occurrs
Toast.makeText(getApplicationContext(), error.getMessage(), Toast.LENGTH_SHORT).show();
}
});
// request queue
RequestQueue requestQueue = Volley.newRequestQueue(this);
requestQueue.add(stringRequest);
}
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
{
"status": "true",
"message": "Data fetched successfully!",
"data": [
{
"id": "1",
"name": "Roger Federer",
"country": "Switzerland",
"city": "Basel",
"imgURL": "https://demonuts.com/Demonuts/SampleImages/roger.jpg"
},
{
"id": "2",
"name": "Rafael Nadal",
"country": "Spain",
"city": "Madrid",
"imgURL": "https://demonuts.com/Demonuts/SampleImages/nadal.jpg"
},
{
"id": "3",
"name": "Novak Djokovic",
"country": "Serbia",
"city": "Monaco",
"imgURL": "https://demonuts.com/Demonuts/SampleImages/djoko.jpg"
},
{
"id": "4",
"name": "Andy Murray",
"country": "United Kingdom",
"city": "London",
"imgURL": "https://demonuts.com/Demonuts/SampleImages/murray.jpg"
},
{
"id": "5",
"name": "Maria Sharapova",
"country": "Russia",
"city": "Moscow",
"imgURL": "https://demonuts.com/Demonuts/SampleImages/shara.jpg"
},
{
"id": "6",
"name": "Caroline Wozniacki",
"country": "Denmark",
"city": "Odense",
"imgURL": "https://demonuts.com/Demonuts/SampleImages/woz.jpg"
},
{
"id": "7",
"name": "Eugenie Bouchard",
"country": "Canada",
"city": " Montreal",
"imgURL": "https://demonuts.com/Demonuts/SampleImages/bou.png"
},
{
"id": "8",
"name": "Ana Ivanovic",
"country": "Serbia",
"city": "Belgrade",
"imgURL": "https://demonuts.com/Demonuts/SampleImages/iva.jpg"
}
]
}
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
private void setupListview(){
removeSimpleProgressDialog(); //will remove progress dialog
listAdapter = new ListAdapter(this, dataModelArrayList);
listView.setAdapter(listAdapter);
}
Compiler will first remove the progress dialog.
Then it will set the adapter to the listview. Adapter includes arraylist in it’s parameter.
Download Source Code For Android ListView Using Volley Example
[sociallocker]Download Source Code For Json_ListView_Volley[/sociallocker]