Volley & Glide Tutorial | Parse Json & display Content to a recyclerview Part 1

1-Overview :

In this tutorial you will learn how to parse a hosted json file and display the content to recyclerview
using Volley and Glide libraries :

Volley library : Volley is an HTTP library that makes networking for Android apps easier and most importantly, faster.

Glide : Glide is a fast and efficient open source media management and image loading framework for Android that wraps media decoding, memory and disk caching, and resource pooling into a simple and easy to use interface.

1.1- Final Result  (Demo) :

1.2- Our Layout :

1.3- Our JSON File:

its simply a file contains an array of JSON Objects and our object structor is like the following :

Note : we are hosting our Json File on Github you can check this link for full file content
json link : https://goo.gl/oX5Ztp

	{
	"name": "Naruto: Shippuuden",
	"description": "Description will be displayed in Details Activity",
	"Rating": "8.16",
	"episode": 500,
	"categorie":"Animation | Drama | Adventure",
	"studio":"Studio Pierrot",
	"img": "https://myanimelist.cdn-dena.com/images/anime/5/17407.jpg"
	}

view raw animeobject.json hosted with ❤ by GitHub

2- Preparing:

Start a new Android Studio Project

choose your target API

choose an empty activity then click finish

2-1 Import Required Libraries :

Inside build.gradle (Project: yourappname) add mavenCentral() repository :

	repositories {
	mavenCentral()
	google()
	jcenter()
	}
	dependencies {
	classpath 'com.android.tools.build:gradle:3.0.1'
	// NOTE: Do not place your application dependencies here; they belong
	// in the individual module build.gradle files
	}

view raw build.gradle hosted with ❤ by GitHub

and in build.gradle (Module: app) add the following implementations :

	dependencies {
	implementation fileTree(dir: 'libs', include: ['*.jar'])
	implementation 'com.android.support:appcompat-v7:27.1.0'
	implementation 'com.android.support.constraint:constraint-layout:1.0.2'
	testImplementation 'junit:junit:4.12'
	androidTestImplementation 'com.android.support.test:runner:1.0.1'
	androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
	// Glide library
	implementation 'com.github.bumptech.glide:glide:4.6.1'
	annotationProcessor 'com.github.bumptech.glide:compiler:4.6.1'
	// Volley library
	implementation 'com.android.volley:volley:1.0.0'
	// Recyclerview Library
	implementation 'com.android.support:recyclerview-v7:27.0.2'
	}

view raw build.gradle hosted with ❤ by GitHub

2-2 Package Structor :

add the following packages in your project :

3 Create a Model Class  :

	package com.demotxt.myapp.myapplication.model;
	/**
	* Created by Aws on 22/02/2018.
	*/
	public class Anime {
	private String name ;
	private String description;
	private String rating ;
	private int nb_episode;
	private String image_url;
	private String categorie;
	private String studio;
	public Anime() {
	}
	public Anime(String name, String description, String rating, int nb_episode, String image_url, String categorie, String studio) {
	this.name = name;
	this.description = description;
	this.rating = rating;
	this.nb_episode = nb_episode;
	this.image_url = image_url;
	this.categorie = categorie;
	this.studio = studio;
	}
	public String getName() {
	return name;
	}
	public String getDescription() {
	return description;
	}
	public String getRating() {
	return rating;
	}
	public int getNb_episode() {
	return nb_episode;
	}
	public String getImage_url() {
	return image_url;
	}
	public String getCategorie() {
	return categorie;
	}
	public String getStudio() {
	return studio;
	}
	public void setName(String name) {
	this.name = name;
	}
	public void setDescription(String description) {
	this.description = description;
	}
	public void setRating(String rating) {
	this.rating = rating;
	}
	public void setNb_episode(int nb_episode) {
	this.nb_episode = nb_episode;
	}
	public void setImage_url(String image_url) {
	this.image_url = image_url;
	}
	public void setCategorie(String categorie) {
	this.categorie = categorie;
	}
	public void setStudio(String studio) {
	this.studio = studio;
	}
	}

view raw Anime.java hosted with ❤ by GitHub

3-1 Design Anime Item Row    : 

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	android:background="@drawable/rippleeffect"
	android:layout_marginTop="5dp"
	android:padding="8dp"
	android:orientation="horizontal"
	android:layout_width="match_parent"
	android:layout_height="150dp"
	>
	<ImageView
	android:src="@drawable/loading"
	android:id="@+id/thumbnail"
	android:layout_width="100dp"
	android:layout_height="match_parent"
	android:scaleType="centerCrop"
	/>
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="131dp"
	android:layout_margin="8dp"
	android:orientation="vertical">
	<TextView
	android:id="@+id/rowname"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Naruto: Shippuuden"
	android:textSize="18sp"
	android:textStyle="bold" />
	<TextView
	android:id="@+id/categorie"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Animation | Drama | Adventure" />
	<TextView
	android:id="@+id/rating"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="10dp"
	android:background="@drawable/kl"
	android:drawableLeft="@drawable/ic_star_black_24dp"
	android:paddingRight="5dp"
	android:text="8.9"
	android:textColor="#fff"
	android:textSize="15sp"
	android:textStyle="bold" />
	<TextView
	android:id="@+id/studio"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_marginTop="5dp"
	android:text="Studio" />
	</LinearLayout>
	</LinearLayout>

view raw anime_row_item.xml hosted with ❤ by GitHub

3-2 Design Activity main

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	android:background="#fafafa"
	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"
	tools:context="com.demotxt.myapp.myapplication.activities.MainActivity"
	>
	<android.support.v7.widget.RecyclerView
	android:layout_marginRight="20dp"
	android:layout_marginLeft="20dp"
	android:id="@+id/rv"
	android:layout_marginTop="20dp"
	android:layout_width="match_parent"
	android:layout_height="match_parent"></android.support.v7.widget.RecyclerView>
	</RelativeLayout>

view raw activity_main.xml hosted with ❤ by GitHub

3-3 ActivityMain.java

	package com.demotxt.myapp.myapplication.activities;
	import android.support.v7.app.AppCompatActivity;
	import android.os.Bundle;
	import android.support.v7.widget.LinearLayoutManager;
	import android.support.v7.widget.RecyclerView;
	import android.view.Menu;
	import android.view.MenuInflater;
	import android.widget.Toast;
	import com.android.volley.RequestQueue;
	import com.android.volley.Response;
	import com.android.volley.VolleyError;
	import com.android.volley.toolbox.JsonArrayRequest;
	import com.android.volley.toolbox.Volley;
	import com.demotxt.myapp.myapplication.R;
	import com.demotxt.myapp.myapplication.adapter.RvAdapter;
	import com.demotxt.myapp.myapplication.model.Anime;
	import org.json.JSONArray;
	import org.json.JSONException;
	import org.json.JSONObject;
	import java.util.ArrayList;
	import java.util.List;
	public class MainActivity extends AppCompatActivity {
	private String URL_JSON = "https://gist.githubusercontent.com/aws1994/f583d54e5af8e56173492d3f60dd5ebf/raw/c7796ba51d5a0d37fc756cf0fd14e54434c547bc/anime.json";
	private JsonArrayRequest ArrayRequest ;
	private RequestQueue requestQueue ;
	private List<Anime> lstAnime = new ArrayList<>();
	private RecyclerView myrv ;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	myrv = findViewById(R.id.rv);
	jsoncall();
	}
	public void jsoncall() {
	ArrayRequest = new JsonArrayRequest(URL_JSON, new Response.Listener<JSONArray>() {
	@Override
	public void onResponse(JSONArray response) {
	JSONObject jsonObject = null;
	for (int i = 0 ; i<response.length();i++) {
	//Toast.makeText(getApplicationContext(),String.valueOf(i),Toast.LENGTH_SHORT).show();
	try {
	jsonObject = response.getJSONObject(i);
	Anime anime = new Anime();
	anime.setName(jsonObject.getString("name"));
	anime.setRating(jsonObject.getString("Rating"));
	anime.setDescription(jsonObject.getString("description"));
	anime.setImage_url(jsonObject.getString("img"));
	anime.setStudio(jsonObject.getString("studio"));
	anime.setCategorie(jsonObject.getString("categorie"));
	//Toast.makeText(MainActivity.this,anime.toString(),Toast.LENGTH_SHORT).show();
	lstAnime.add(anime);
	}
	catch (JSONException e) {
	e.printStackTrace();
	}
	}
	Toast.makeText(MainActivity.this,"Size of Liste "+String.valueOf(lstAnime.size()),Toast.LENGTH_SHORT).show();
	Toast.makeText(MainActivity.this,lstAnime.get(1).toString(),Toast.LENGTH_SHORT).show();
	setRvadapter(lstAnime);
	}
	}, new Response.ErrorListener() {
	@Override
	public void onErrorResponse(VolleyError error) {
	}
	});
	requestQueue = Volley.newRequestQueue(MainActivity.this);
	requestQueue.add(ArrayRequest);
	}
	public void setRvadapter (List<Anime> lst) {
	RvAdapter myAdapter = new RvAdapter(this,lst) ;
	myrv.setLayoutManager(new LinearLayoutManager(this));
	myrv.setAdapter(myAdapter);
	}
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
	MenuInflater inflater = getMenuInflater();
	inflater.inflate(R.menu.menu,menu);
	return super.onCreateOptionsMenu(menu);
	}
	}

view raw MainActivity.java hosted with ❤ by GitHub

3-4 RecyclerView Adapter class

	package com.demotxt.myapp.myapplication.adapter;
	import android.content.Context;
	import android.content.Intent;
	import android.support.v7.widget.RecyclerView;
	import android.view.LayoutInflater;
	import android.view.View;
	import android.view.ViewGroup;
	import android.widget.ImageView;
	import android.widget.TextView;
	import com.bumptech.glide.Glide;
	import com.bumptech.glide.request.RequestOptions;
	import com.demotxt.myapp.myapplication.activities.AnimeDetail;
	import com.demotxt.myapp.myapplication.model.Anime;
	import com.demotxt.myapp.myapplication.R;
	import java.util.List;
	/**
	* Created by Aws on 28/01/2018.
	*/
	public class RvAdapter extends RecyclerView.Adapter<RvAdapter.MyViewHolder> {
	RequestOptions options ;
	private Context mContext ;
	private List<Anime> mData ;
	public RvAdapter(Context mContext, List lst) {
	this.mContext = mContext;
	this.mData = lst;
	options = new RequestOptions()
	.centerCrop()
	.placeholder(R.drawable.loading)
	.error(R.drawable.loading);
	}
	@Override
	public MyViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
	View view ;
	LayoutInflater mInflater = LayoutInflater.from(mContext);
	view = mInflater.inflate(R.layout.row,parent,false);
	// click listener here
	return new MyViewHolder(view);
	}
	@Override
	public void onBindViewHolder(MyViewHolder holder, final int position) {
	holder.tvname.setText(mData.get(position).getName());
	holder.tv_rate.setText(mData.get(position).getRating());
	holder.tvstudio.setText(mData.get(position).getStudio());
	holder.tvcat.setText(mData.get(position).getCategorie());
	// load image from the internet using Glide
	Glide.with(mContext).load(mData.get(position).getImage_url()).apply(options).into(holder.AnimeThumbnail);
	}
	@Override
	public int getItemCount() {
	return mData.size();
	}
	public static class MyViewHolder extends RecyclerView.ViewHolder {
	TextView tvname,tv_rate,tvstudio,tvcat;
	ImageView AnimeThumbnail;
	public MyViewHolder(View itemView) {
	super(itemView);
	tvname = itemView.findViewById(R.id.rowname);
	tvstudio = itemView.findViewById(R.id.studio);
	tv_rate = itemView.findViewById(R.id.rating);
	tvcat = itemView.findViewById(R.id.categorie);
	AnimeThumbnail = itemView.findViewById(R.id.thumbnail);
	}
	}
	}

view raw RvAdapter.java hosted with ❤ by GitHub

if you have any question please let me know in the comments section Thanks For reading my blog post