How to Build an Instagram 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 Instagram 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 be displaying data from the Instagram profile, and we will be using an official Instagram API to load the data from user’s Instagram profile and display that data in a custom 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.
// dependency for loading image from url.
// dependency for creating a circle image.
Step 3: Creating API for getting the data for generating API
Now for creating a basic display API for Instagram posts we will be creating an API for displaying this data. You may refer to the How to Generate API URL for Public Instagram Feeds in Android? Now we have created the URL with the access token and we will use this URL to get the JSON data.
Step 4: Adding permissions for the internet in the 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 5: 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 6: Creating a new layout file for displaying each item of our RecyclerView
Navigate to the app > res > layout > Right-click on it > New > layout resource file and name the file as insta_feed_rv_item and add the below code to it.
Step 7: Create a Modal Class to store data for our Feed
Navigate to the app > java > your app’s package name > Right-click on it > New > Java class and name your class as InstaModal.
Step 8: Creating an Adapter class for setting this data to each item of our RecyclerView
Navigate to the app > java > your app’s package name > Right-click on it > New Java class and name it as InstagramFeedRVAdapter 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.
Check out the project on the below link: https://github.com/ChaitanyaMunje/LibraryApp/tree/InstagramCustomListVIew