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.
// dependancy for loading data from json file.
// dependancy for loading image from url.
// dependancy for creating a circle image.
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.
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.
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.
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.
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.
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.
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.
Now run your app and see the output of the app.
You can check the project on the below link: https://github.com/ChaitanyaMunje/LibraryApp/tree/FacebookBranch