How to Build a Facebook Like Custom RecyclerView in Android?

We have seen implementing RecyclerView in Android with simple data inside our app. In this article, we will take a look at the implementation of Facebook like Custom RecyclerView in Android.  

What we are going to build in this article? 

We will be building a simple application in which we will display the Facebook like RecyclerView in our Android app. We will be fetching this data from a simple API (https://jsonkeeper.com/b/OB3B) which is given in the article. With the help of this API, we will be displaying that data in our RecyclerView. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Add the below dependency in your build.gradle file Below is the dependency for Volley which we will be using to get the data from API. For adding this dependency navigate to the app > Gradle Scripts > build.gradle(app) and add the below dependency in the dependencies section.    

// dependency for loading data from json file.

implementation ‘com.android.volley:volley:1.1.1’

// dependency for loading image from url.

implementation ‘com.squareup.picasso:picasso:2.71828’

// dependency for creating a circle image.  

implementation ‘de.hdodenhof:circleimageview:3.1.0’

Step 3: Adding internet permissions in your AndroidManifest.xml file

As we are loading data from the internet, for that, we will have to add the internet permissions to our AndroidManifest.xml file. Navigate to the app > AndroidManifest.xml file and add the below code to it.  

XML

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

Step 4: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

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

    <!--recycler view for displaying
        our Facebook posts-->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/idRVInstaFeeds"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!--progressbar for displaying
        our loading indicator-->
    <ProgressBar
        android:id="@+id/idLoadingPB"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:visibility="visible" />

</RelativeLayout>

Step 5: Creating a custom drawable file for our background image

Navigate to the app > res > drawable > Right-click on it > New > drawable resource file and name your file as background_drawable and add the below code to it for our custom background. 

XML

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--radius for our shape-->
    <corners android:radius="20dp" />
    <!--background color for our shape-->
    <solid android:color="#EDEDED" />
</shape>

Step 6: Creating a layout file for our item of RecyclerView 

Navigate to the app > res > layout > Right-click on it > New > layout Resource file and name it as facebook_feed_rv_item and add the below code to it. Comments are added in the code to get to know in more detail. 

Note: Icons used in this file are present in the drawable folder. Navigate to the app > res > drawable folder and add your icons to that folder. 

XML

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:elevation="8dp"
    app:cardCornerRadius="8dp">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:id="@+id/idLLTopBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:padding="4dp">

            <!--circle image for displaying the user image-->
            <de.hdodenhof.circleimageview.CircleImageView
                android:id="@+id/idCVAuthor"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_margin="5dp" />

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:orientation="vertical">

                <!--text view for displaying user name-->
                <TextView
                    android:id="@+id/idTVAuthorName"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_margin="3dp"
                    android:padding="3dp"
                    android:text="geeks_for_geeks"
                    android:textColor="@color/black"
                    android:textStyle="bold" />

                <!--textview for displaying post publish time-->
                <TextView
                    android:id="@+id/idTVTime"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:padding="3dp"
                    android:text="time"
                    android:textColor="@color/black"
                    android:textSize="11sp" />

            </LinearLayout>

        </LinearLayout>


        <!--text view for displaying post description-->
        <TextView
            android:id="@+id/idTVDescription"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idLLTopBar"
            android:layout_margin="5dp"
            android:padding="5dp"
            android:text="Description"
            android:textColor="@color/black"
            android:textSize="11sp" />

        <!--image view to display the post image-->
        <ImageView
            android:id="@+id/idIVPost"
            android:layout_width="match_parent"
            android:layout_height="300dp"
            android:layout_below="@id/idTVDescription"
            android:adjustViewBounds="true"
            android:scaleType="fitCenter" />

        <!--linear layout for displaying facebook actions-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idIVPost"
            android:layout_margin="5dp"
            android:orientation="horizontal"
            android:padding="2dp"
            android:weightSum="3">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="1"
                android:background="@drawable/background_drawable"
                android:orientation="horizontal"
                android:weightSum="2">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:src="@drawable/ic_like" />

                <TextView
                    android:id="@+id/idTVLikes"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:background="@drawable/background_drawable"
                    android:drawablePadding="3dp"
                    android:padding="5dp"
                    android:text="likes"
                    android:textColor="@color/black"
                    android:textSize="12sp" />

            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="1"
                android:background="@drawable/background_drawable"
                android:orientation="horizontal"
                android:weightSum="2">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:src="@drawable/ic_comment" />

                <TextView
                    android:id="@+id/idTVComments"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="5dp"
                    android:layout_weight="1"
                    android:drawablePadding="3dp"
                    android:padding="5dp"
                    android:text="12"
                    android:textColor="@color/black"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:id="@+id/idLLShare"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="10dp"
                android:layout_weight="1"
                android:background="@drawable/background_drawable"
                android:orientation="horizontal"
                android:weightSum="2">

                <ImageView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_weight="1"
                    android:src="@drawable/ic_share" />

                <TextView
                    android:id="@+id/idTVShare"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center"
                    android:layout_margin="4dp"
                    android:layout_weight="1"
                    android:background="@drawable/background_drawable"
                    android:drawablePadding="3dp"
                    android:padding="5dp"
                    android:text="Share"
                    android:textColor="@color/black"
                    android:textSize="12sp" />

            </LinearLayout>

        </LinearLayout>

    </RelativeLayout>

</androidx.cardview.widget.CardView>

Step 7: Creating a modal class for storing our data 

Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name your class as FacebookFeedModal and add the below code to it. 

Java

public class FacebookFeedModal {
    // variables for storing our author image,
    // author name, postDate,postDescription,
    // post image,post likes,post comments.
    private String authorImage;
    private String authorName;
    private String postDate;
    private String postDescription;
    private String postIV;
    private String postLikes;
    private String postComments;

    // creating getter and setter methods.
    public String getAuthorImage() {
        return authorImage;
    }

    public void setAuthorImage(String authorImage) {
        this.authorImage = authorImage;
    }

    public String getAuthorName() {
        return authorName;
    }

    public void setAuthorName(String authorName) {
        this.authorName = authorName;
    }

    public String getPostDate() {
        return postDate;
    }

    public void setPostDate(String postDate) {
        this.postDate = postDate;
    }

    public String getPostDescription() {
        return postDescription;
    }

    public void setPostDescription(String postDescription) {
        this.postDescription = postDescription;
    }

    public String getPostIV() {
        return postIV;
    }

    public void setPostIV(String postIV) {
        this.postIV = postIV;
    }

    public String getPostLikes() {
        return postLikes;
    }

    public void setPostLikes(String postLikes) {
        this.postLikes = postLikes;
    }

    public String getPostComments() {
        return postComments;
    }

    public void setPostComments(String postComments) {
        this.postComments = postComments;
    }

    // creating a constructor class.
    public FacebookFeedModal(String authorImage, String authorName, String postDate,
                             String postDescription, String postIV, String postLikes,
                             String postComments) {
        this.authorImage = authorImage;
        this.authorName = authorName;
        this.postDate = postDate;
        this.postDescription = postDescription;
        this.postIV = postIV;
        this.postLikes = postLikes;
        this.postComments = postComments;
    }
}

Step 8: Creating an Adapter class for setting data to our item of RecyclerView

Navigate to the app > java > your app’s package name > Right-click on it > New Java class and name it as FacebookFeedRVAdapter and add the below code to it. 

Java

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.squareup.picasso.Picasso;

import java.util.ArrayList;

import de.hdodenhof.circleimageview.CircleImageView;

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

    // arraylist for our facebook feeds.
    private ArrayList<FacebookFeedModal> facebookFeedModalArrayList;
    private Context context;

    // creating a constructor for our adapter class.
    public FacebookFeedRVAdapter(ArrayList<FacebookFeedModal> facebookFeedModalArrayList, Context context) {
        this.facebookFeedModalArrayList = facebookFeedModalArrayList;
        this.context = context;
    }

    @NonNull
    @Override
    public FacebookFeedRVAdapter.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        // inflating our layout for item of recycler view item.
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.facebook_feed_rv_item, parent, false);
        return new FacebookFeedRVAdapter.ViewHolder(view);
    }

    @Override
    public void onBindViewHolder(@NonNull FacebookFeedRVAdapter.ViewHolder holder, int position) {
        // getting data from array list and setting it to our modal class.
        FacebookFeedModal modal = facebookFeedModalArrayList.get(position);

        // setting data to each view of recyclerview item.
        Picasso.get().load(modal.getAuthorImage()).into(holder.authorIV);
        holder.authorNameTV.setText(modal.getAuthorName());
        holder.timeTV.setText(modal.getPostDate());
        holder.descTV.setText(modal.getPostDescription());
        Picasso.get().load(modal.getPostIV()).into(holder.postIV);
        holder.likesTV.setText(modal.getPostLikes());
        holder.commentsTV.setText(modal.getPostComments());
    }

    @Override
    public int getItemCount() {
        // returning the size of our array list.
        return facebookFeedModalArrayList.size();
    }

    public class ViewHolder extends RecyclerView.ViewHolder {
        // creating variables for our views
        // of recycler view items.
        private CircleImageView authorIV;
        private TextView authorNameTV, timeTV, descTV;
        private ImageView postIV;
        private TextView likesTV, commentsTV;
        private LinearLayout shareLL;

        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            // initializing our variables
            shareLL = itemView.findViewById(R.id.idLLShare);
            authorIV = itemView.findViewById(R.id.idCVAuthor);
            authorNameTV = itemView.findViewById(R.id.idTVAuthorName);
            timeTV = itemView.findViewById(R.id.idTVTime);
            descTV = itemView.findViewById(R.id.idTVDescription);
            postIV = itemView.findViewById(R.id.idIVPost);
            likesTV = itemView.findViewById(R.id.idTVLikes);
            commentsTV = itemView.findViewById(R.id.idTVComments);
        }
    }
}

Step 9: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;

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.JsonObjectRequest;
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 {

    // creating variables for our requestqueue,
    // array list, progressbar, edittext,
    // image button and our recycler view.
    private RequestQueue mRequestQueue;
    private ArrayList<FacebookFeedModal> instaModalArrayList;
    private ArrayList<FacebookFeedModal> facebookFeedModalArrayList;
    private ProgressBar progressBar;

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

        // initializing our views.
        progressBar = findViewById(R.id.idLoadingPB);

        // calling method to load
        // data in recycler view.
        getFacebookFeeds();
    }

    private void getFacebookFeeds() {
        facebookFeedModalArrayList = new ArrayList<>();

        // below line is use to initialize the variable for our request queue.
        mRequestQueue = Volley.newRequestQueue(MainActivity.this);

        // below line is use to clear
        // cache this will be use when
        // our data is being updated.
        mRequestQueue.getCache().clear();

        // below is the url stored in
        // string for our sample data
        String url = "https://jsonkeeper.com/b/OB3B";

        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                progressBar.setVisibility(View.GONE);
                try {
                    // in below line we are extracting the data from json object.
                    String authorName = response.getString("authorName");
                    String authorImage = response.getString("authorImage");

                    // below line is to get json array from our json object.
                    JSONArray feedsArray = response.getJSONArray("feeds");

                    // running a for loop to add data to our array list
                    for (int i = 0; i < feedsArray.length(); i++) {
                        // getting json object of our json array.
                        JSONObject feedsObj = feedsArray.getJSONObject(i);

                        // extracting data from our json object.
                        String postDate = feedsObj.getString("postDate");
                        String postDescription = feedsObj.getString("postDescription");
                        String postIV = feedsObj.getString("postIV");
                        String postLikes = feedsObj.getString("postLikes");
                        String postComments = feedsObj.getString("postComments");

                        // adding data to our modal class.
                        FacebookFeedModal feedModal = new FacebookFeedModal(authorImage, authorName, postDate, postDescription, postIV, postLikes, postComments);
                        facebookFeedModalArrayList.add(feedModal);

                        // below line we are creating an adapter class and adding our array list in it.
                        FacebookFeedRVAdapter adapter = new FacebookFeedRVAdapter(facebookFeedModalArrayList, MainActivity.this);
                        RecyclerView instRV = findViewById(R.id.idRVInstaFeeds);

                        // below line is for setting linear layout manager to our recycler view.
                        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(MainActivity.this, RecyclerView.VERTICAL, false);

                        // below line is to set layout
                        // manager to our recycler view.
                        instRV.setLayoutManager(linearLayoutManager);

                        // below line is to set adapter
                        // to our recycler view.
                        instRV.setAdapter(adapter);
                    }
                } catch (JSONException e) {
                    e.printStackTrace();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                Toast.makeText(MainActivity.this, "Fail to get data with error " + error, Toast.LENGTH_SHORT).show();
            }
        });
        mRequestQueue.add(jsonObjectRequest);
    }
}

Now run your app and see the output of the app. 

Output:

You can check the project on the below link: https://github.com/ChaitanyaMunje/LibraryApp/tree/FacebookBranch