Gmail Like Inbox By JSON Parsing Using RecyclerView CardView and Volley

Post Views: 6,965

Hello guys, today’s tutorial is about fetching data from JSON file and display it with RecyclerView CardView and to perform Network Request we will use volley.

RecyclerView – RecyclerView got introduced in android Lollipop. Basically The RecyclerView widget is a more advanced and flexible version of ListView. When we need to display a scrolling list of elements based on large data sets we use Recyclerview. As the name suggests, anrdoid RecyclerView is used to reuse cells when scrolling up and down by recycling the items in the list.

CardView – Android CardView UI component shows information inside cards. This component is generally used to show contact information. In this tutorial we will show some information inside the CardView using RecyclerView.

Volley – Volley is an HTTP library that makes networking for Android apps easier and most importantly, faster. By default all the volley network calls works asynchronously, so we don’t have to worry about using asynctask anymore.

So lets start..

Gmail Like Inbox By JSON Parsing Using RecyclerView CardView and Volley

Lets start by creating a new project i am giving it name RecyclerViewJson.

Sample JSON File

I have created JSON file which contains data which we want to show on our RecyclerView.
In realtime this json should be generated from a database using any server side language.
You can see JSON here – http://androidcodefinder.com/RecyclerViewJson.json
We will use this in this tutorial.

Creating Android Project

Create a new project in Android Studio File–>New–>New Project.
Enter Application Name, Package Name, Select Empty Activity and click on finish.

Adding RecyclerView CardView and Volley

Now we will add RecyclerView, CardView and Volley to our project by adding their Dependencies on our project.
Add Dependencies on gradle.

implementation 'com.android.support:recyclerview-v7:26.1.0'
implementation 'com.android.support:cardview-v7:26.1.0'
implementation 'com.android.volley:volley:1.1.1'

implementation 'com.android.support:recyclerview-v7:26.1.0'

implementation 'com.android.support:cardview-v7:26.1.0'

implementation 'com.android.volley:volley:1.1.1'

Now sync your project.

Android Manifest File

Open your AndroidManifest.xml file and add Internet permission.

&lt;uses-permission android:name="android.permission.INTERNET" /&gt;

1	<uses-permission android:name="android.permission.INTERNET" />

Creating RecyclerView Layouts

RecyclerView

Create a RecyclerView inside your activity_main.xml.
Give it a id myRecyclerView.
We will also add ProgressBar to show progress.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context="com.androidcodefinder.recyclerviewjson.MainActivity">

    <ProgressBar
        android:id="@+id/progressBar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:indeterminate="true"
        android:layout_marginBottom="-6dp"
        android:layout_marginTop="-6dp"/>

    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/myRecyclerView">
    </android.support.v7.widget.RecyclerView>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="vertical"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="wrap_content"

tools:context="com.androidcodefinder.recyclerviewjson.MainActivity">

<ProgressBar

android:id="@+id/progressBar"

style="@style/Widget.AppCompat.ProgressBar.Horizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:indeterminate="true"

android:layout_marginBottom="-6dp"

android:layout_marginTop="-6dp"/>

<android.support.v7.widget.RecyclerView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:id="@+id/myRecyclerView">

</android.support.v7.widget.RecyclerView>

</LinearLayout>

Add Vector Drawable

Add vector drawable which we are going to use in our project.
Right click on Drawable folder then New–>Vector Asset.
Click on Icon then Select Icon and add it to on drawable folder.
Search and Select Star Icon which we will use use in our project.

Make Circle Shape TextView

Right click on drawable folder–>New–>Drawable resource file.
Write File Name (circle_shape.xml) and click Ok.
We have to add this file to Background property of TextView.

RecyclerView Item Layout using CardView

We need to create separate layout for for items for RecyclerView.
For that we will use CardView.
So we can create a desired design inside CardView.
CardView is not mandatory. CardView gives a nice elevated look that’s why we are using it in our project.
In our project we are designing Gmail Inbox like layout.
Create a new layout resource file named list_view.xml and use the following xml code.

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="1dp"
        app:cardElevation="2dp">

        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:tools="http://schemas.android.com/tools"
            android:layout_width="match_parent"
            android:layout_height="90dp"
            android:orientation="horizontal"
            android:paddingBottom="10dp"
            android:paddingTop="10dp"
            android:weightSum="1">

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="0.10"
                android:gravity="center_horizontal|center_vertical"
                android:orientation="vertical"
                android:padding="10dp">

                <TextView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/circle_shape"
                    android:text="G"
                    android:textAlignment="center"
                    android:textColor="@android:color/white"
                    android:textSize="28dp"
                    android:id="@+id/circleText"/>

            </LinearLayout>

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="0.70"
                android:orientation="vertical"
                android:paddingBottom="5dp"
                android:paddingTop="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Pravin Radio"
                    android:textColor="@android:color/black"
                    android:textSize="15dp"
                    android:textStyle="bold"
                    android:id="@+id/headText"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:maxEms="10"
                    android:singleLine="true"
                    android:text="Main road dongargaon time tojjlksdjflksd.sdfsdfsdf"
                    android:textColor="@android:color/black"
                    android:textStyle="bold"
                    android:id="@+id/subText"/>

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:maxEms="10"
                    android:singleLine="true"
                    android:text="Main road dongargaon time tojjlksdjflksd.sdfsdfsdf"
                    android:id="@+id/desText"/>

            </LinearLayout>

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_weight="0.20"
                android:orientation="vertical"
                android:paddingTop="5dp">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="0.5"
                    android:text="31 Oct"
                    android:textColor="@android:color/holo_blue_dark"
                    android:id="@+id/dateText"/>

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:background="@drawable/ic_star_border_black_24dp"
                    android:layout_gravity="center_horizontal"
                    android:id="@+id/starIcon"/>
            </LinearLayout>

        </LinearLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

100

101

102

103

104

105

106

107

108

109

<?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:orientation="vertical"

android:layout_width="match_parent"

android:layout_height="wrap_content">

<android.support.v7.widget.CardView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_marginTop="1dp"

app:cardElevation="2dp">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="90dp"

android:orientation="horizontal"

android:paddingBottom="10dp"

android:paddingTop="10dp"

android:weightSum="1">

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_weight="0.10"

android:gravity="center_horizontal|center_vertical"

android:orientation="vertical"

android:padding="10dp">

<TextView

android:layout_width="40dp"

android:layout_height="40dp"

android:background="@drawable/circle_shape"

android:text="G"

android:textAlignment="center"

android:textColor="@android:color/white"

android:textSize="28dp"

android:id="@+id/circleText"/>

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_weight="0.70"

android:orientation="vertical"

android:paddingBottom="5dp"

android:paddingTop="5dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:text="Pravin Radio"

android:textColor="@android:color/black"

android:textSize="15dp"

android:textStyle="bold"

android:id="@+id/headText"/>

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:maxEms="10"

android:singleLine="true"

android:text="Main road dongargaon time tojjlksdjflksd.sdfsdfsdf"

android:textColor="@android:color/black"

android:textStyle="bold"

android:id="@+id/subText"/>

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:maxEms="10"

android:singleLine="true"

android:text="Main road dongargaon time tojjlksdjflksd.sdfsdfsdf"

android:id="@+id/desText"/>

</LinearLayout>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="wrap_content"

android:layout_height="match_parent"

android:layout_weight="0.20"

android:orientation="vertical"

android:paddingTop="5dp">

<TextView

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_weight="0.5"

android:text="31 Oct"

android:textColor="@android:color/holo_blue_dark"

android:id="@+id/dateText"/>

<ImageView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:background="@drawable/ic_star_border_black_24dp"

android:layout_gravity="center_horizontal"

android:id="@+id/starIcon"/>

</LinearLayout>

</android.support.v7.widget.CardView>

</LinearLayout>

Our layout will look like this –

Creating Model Class

Here we don’t have a single item for our list, and that is why it can’t be stored in a String array. We need a class to store all the attributes that we have for item in our list.
So to store these attributes we need to create a class let’s name it ModelActivity.java.
Write the following code.

package com.androidcodefinder.recyclerviewjson;

/**
 * Created by Sumeet Jain on 01-11-2018.
 */

public class ModelActivity {

    private String circleText,headText,subText,desText,dateText;

    public ModelActivity(String circleText, String headText, String subText, String desText, String dateText) {
        this.circleText = circleText;
        this.headText = headText;
        this.subText = subText;
        this.desText = desText;
        this.dateText = dateText;
    }

    public String getCircleText() {
        return circleText;
    }

    public String getHeadText() {
        return headText;
    }

    public String getSubText() {
        return subText;
    }

    public String getDesText() {
        return desText;
    }

    public String getDateText() {
        return dateText;
    }
}

package com.androidcodefinder.recyclerviewjson;

/**

* Created by Sumeet Jain on 01-11-2018.

public class ModelActivity {

private String circleText,headText,subText,desText,dateText;

public ModelActivity(String circleText, String headText, String subText, String desText, String dateText) {

this.circleText = circleText;

this.headText = headText;

this.subText = subText;

this.desText = desText;

this.dateText = dateText;

}

public String getCircleText() {

return circleText;

}

public String getHeadText() {

return headText;

}

public String getSubText() {

return subText;

}

public String getDesText() {

return desText;

}

public String getDateText() {

return dateText;

}

Creating RecyclerView Adapter

To manage and display the data of our RecyclerView we need a class that will extend RecyclerView.Adapter. Inside this class we need RecyclerView.ViewHolder. Now what are these two?
RecyclerView.ViewHolder represents the views of our RecyclerView and the RecyclerView.Adapter represents the data that is to be shown with the ViewHoder.
We have 3 methods inside RecyclerView.Adapter that we need to override.
1. RecyclerView.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
  - This method returns a new instance of our ViewHolder.
2. void onBindViewHolder(ProductViewHolder holder, int position)
  - This method binds the data to the view holder.
  - we have also randomly color each circle in this method.
3. int getItemCount()
  - This returns the size of the List.
So lets create our Adapter. For this create a new class named AdapterActivity.java and write the following code.

package com.androidcodefinder.recyclerviewjson;

import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.GradientDrawable;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;
import java.util.List;
import java.util.Random;

/**
 * Created by Sumeet Jain on 01-11-2018.
 */

public class AdapterActivity extends RecyclerView.Adapter<AdapterActivity.ViewHolder> {

    private List<ModelActivity> modelActivityList ;
    private Context context;

    public AdapterActivity(List<ModelActivity> modelActivityList, Context context) {
        this.modelActivityList = modelActivityList;
        this.context = context;
    }

    @Override
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.list_view,parent,false);
        return new ViewHolder(v);
    }

    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        ModelActivity modelActivity = modelActivityList.get(position);

        //This will randomly color all circle
        Random mRandom = new Random();
        int color = Color.argb(255, mRandom.nextInt(256), mRandom.nextInt(256), mRandom.nextInt(256));
        ((GradientDrawable) holder.textCircle.getBackground()).setColor(color);

        holder.textCircle.setText(modelActivity.getCircleText());
        holder.textHead.setText(modelActivity.getHeadText());
        holder.textSub.setText(modelActivity.getSubText());
        holder.textDes.setText(modelActivity.getDesText());
        holder.textDate.setText(modelActivity.getDateText());
    }

    @Override
    public int getItemCount() {
        return modelActivityList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder{

        public TextView textCircle,textHead,textSub,textDes,textDate;

        public ViewHolder(View itemView) {
            super(itemView);

            textCircle = (TextView)itemView.findViewById(R.id.circleText);
            textHead = (TextView)itemView.findViewById(R.id.headText);
            textSub = (TextView)itemView.findViewById(R.id.subText);
            textDes = (TextView)itemView.findViewById(R.id.desText);
            textDate = (TextView)itemView.findViewById(R.id.dateText);
        }
    }

}

package com.androidcodefinder.recyclerviewjson;

import android.content.Context;

import android.graphics.Color;

import android.graphics.drawable.GradientDrawable;

import android.support.v7.widget.RecyclerView;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.TextView;

import java.util.List;

import java.util.Random;

/**

* Created by Sumeet Jain on 01-11-2018.

public class AdapterActivity extends RecyclerView.Adapter<AdapterActivity.ViewHolder> {

private List<ModelActivity> modelActivityList ;

private Context context;

public AdapterActivity(List<ModelActivity> modelActivityList, Context context) {

this.modelActivityList = modelActivityList;

this.context = context;

}

@Override

public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {

View v = LayoutInflater.from(parent.getContext())

.inflate(R.layout.list_view,parent,false);

return new ViewHolder(v);

}

@Override

public void onBindViewHolder(ViewHolder holder, int position) {

ModelActivity modelActivity = modelActivityList.get(position);

//This will randomly color all circle

Random mRandom = new Random();

int color = Color.argb(255, mRandom.nextInt(256), mRandom.nextInt(256), mRandom.nextInt(256));

((GradientDrawable) holder.textCircle.getBackground()).setColor(color);

holder.textCircle.setText(modelActivity.getCircleText());

holder.textHead.setText(modelActivity.getHeadText());

holder.textSub.setText(modelActivity.getSubText());

holder.textDes.setText(modelActivity.getDesText());

holder.textDate.setText(modelActivity.getDateText());

}

@Override

public int getItemCount() {

return modelActivityList.size();

}

public class ViewHolder extends RecyclerView.ViewHolder{

public TextView textCircle,textHead,textSub,textDes,textDate;

public ViewHolder(View itemView) {

super(itemView);

textCircle = (TextView)itemView.findViewById(R.id.circleText);

textHead = (TextView)itemView.findViewById(R.id.headText);

textSub = (TextView)itemView.findViewById(R.id.subText);

textDes = (TextView)itemView.findViewById(R.id.desText);

textDate = (TextView)itemView.findViewById(R.id.dateText);

}

Setting Adapter to RecyclerView

The last step to show RecyclerView. Come inside MainActivity and write the following code.

package com.androidcodefinder.recyclerviewjson;

import android.content.Context;
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.View;
import android.widget.ProgressBar;

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.io.StringReader;
import java.util.List;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private static final String URL = "http://androidcodefinder.com/RecyclerViewJson.json";
    private RecyclerView recyclerView;
    private RecyclerView.Adapter adapter;
    private List<ModelActivity> modelActivityList;
    private ProgressBar progressBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        progressBar = (ProgressBar)findViewById(R.id.progressBar);
        recyclerView = (RecyclerView)findViewById(R.id.myRecyclerView);
        recyclerView.setHasFixedSize(true);
        recyclerView.setLayoutManager(new LinearLayoutManager(this));

        modelActivityList = new ArrayList<>();

        loadData();
    }

    private void loadData() {

      

        StringRequest stringRequest = new StringRequest(Request.Method.GET,
                URL,
                new Response.Listener<String>() {
                    @Override
                    public void onResponse(String response) {

                        progressBar.setVisibility(View.GONE);

                        try {
                            //JSONObject jsonObject = new JSONObject(response);
                            JSONArray jsonArray = new JSONArray(response);

                            for(int i=0; i<jsonArray.length(); i++){

                                JSONObject o = jsonArray.getJSONObject(i);
                                ModelActivity modelActivity = new ModelActivity(
                                        o.getString("head").substring(0,1),
                                        o.getString("head"),
                                        o.getString("subject"),
                                        o.getString("description"),
                                        o.getString("date")
                                );
                                modelActivityList.add(modelActivity);
                            }

                            adapter = new AdapterActivity(modelActivityList, getApplicationContext());
                            recyclerView.setAdapter(adapter);


                        } catch (JSONException e) {
                            e.printStackTrace();
                        }

                    }
                },
                new Response.ErrorListener() {
                    @Override
                    public void onErrorResponse(VolleyError error) {

                    }
                });

        RequestQueue requestQueue = Volley.newRequestQueue(this);
        requestQueue.add(stringRequest);
    }
}

package com.androidcodefinder.recyclerviewjson;

import android.content.Context;

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.View;

import android.widget.ProgressBar;

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.io.StringReader;

import java.util.List;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

private static final String URL = "http://androidcodefinder.com/RecyclerViewJson.json";

private RecyclerView recyclerView;

private RecyclerView.Adapter adapter;

private List<ModelActivity> modelActivityList;

private ProgressBar progressBar;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

progressBar = (ProgressBar)findViewById(R.id.progressBar);

recyclerView = (RecyclerView)findViewById(R.id.myRecyclerView);

recyclerView.setHasFixedSize(true);

recyclerView.setLayoutManager(new LinearLayoutManager(this));

modelActivityList = new ArrayList<>();

loadData();

}

private void loadData() {

StringRequest stringRequest = new StringRequest(Request.Method.GET,

URL,

new Response.Listener<String>() {

@Override

public void onResponse(String response) {

progressBar.setVisibility(View.GONE);

try {

//JSONObject jsonObject = new JSONObject(response);

JSONArray jsonArray = new JSONArray(response);

for(int i=0; i<jsonArray.length(); i++){

JSONObject o = jsonArray.getJSONObject(i);

ModelActivity modelActivity = new ModelActivity(

o.getString("head").substring(0,1),

o.getString("head"),

o.getString("subject"),

o.getString("description"),

o.getString("date")

);

modelActivityList.add(modelActivity);

}

adapter = new AdapterActivity(modelActivityList, getApplicationContext());

recyclerView.setAdapter(adapter);

} catch (JSONException e) {

e.printStackTrace();

}

new Response.ErrorListener() {

@Override

public void onErrorResponse(VolleyError error) {

}

});

RequestQueue requestQueue = Volley.newRequestQueue(this);

requestQueue.add(stringRequest);

}

Gmail Like Inbox By JSON Parsing Using RecyclerView CardView and Volley
You can see we have created gmail looking layout.
I have tried to my best to explain if you have any doubts feel free to comment below or mail me at csesumeet@gmail.com

Gmail Like Inbox By JSON Parsing Using RecyclerView CardView and Volley

Download Complete Project

Gmail Like Inbox Using Recyclerview and Cardview

Subscribe To Our YouTube Channel

Like Us On Facebook

Android Code Finder

Other Tutorials-

Gmail Like Inbox By JSON Parsing Using RecyclerView CardView and Volley

Gmail Like Inbox By JSON Parsing Using RecyclerView CardView and Volley

Sample JSON File

Creating Android Project

Adding RecyclerView CardView and Volley

Android Manifest File

Creating RecyclerView Layouts

RecyclerView

Add Vector Drawable

Make Circle Shape TextView

RecyclerView Item Layout using CardView

Creating Model Class

Creating RecyclerView Adapter

Setting Adapter to RecyclerView

Gmail Like Inbox By JSON Parsing Using RecyclerView CardView and Volley

Download Complete Project

Subscribe To Our YouTube Channel

Like Us On Facebook

Other Tutorials-

RECENT POST

Leave a Reply Cancel reply