¿Cómo crear un RecyclerView personalizado similar a Instagram en Android?

Hemos visto implementar RecyclerView en Android con datos simples dentro de nuestra aplicación. En este artículo, veremos la implementación de Instagram como Custom RecyclerView en Android . 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que mostraremos datos del perfil de Instagram y usaremos una API oficial de Instagram para cargar los datos del perfil de Instagram del usuario y mostrar esos datos en un RecyclerView personalizado. qué

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia a continuación en su archivo build.gradle  

A continuación se muestra la dependencia de Volley que usaremos para obtener los datos de la API. Para agregar esta dependencia, vaya a la aplicación > Gradle Scripts > build.gradle(app) y agregue la dependencia a continuación en la sección de dependencias.    

// dependencia para cargar datos del archivo json.

implementación ‘com.android.volley:volley:1.1.1’

// dependencia para cargar imagen desde url.

implementación ‘com.squareup.picasso:picasso:2.71828’

// dependencia para crear una imagen circular.  

implementación ‘de.hdodenhof:circleimageview:3.1.0’

Paso 3: Creación de API para obtener los datos para generar API 

Ahora, para crear una API de visualización básica para las publicaciones de Instagram, crearemos una API para mostrar estos datos. Puede consultar ¿Cómo generar URL de API para fuentes públicas de Instagram en Android? Ahora hemos creado la URL con el token de acceso y usaremos esta URL para obtener los datos JSON.  

Paso 4: agregar permisos para Internet en el archivo AndroidManifest.xml

Como estamos cargando datos de internet. Para eso, tendremos que agregar los permisos de internet a nuestro archivo AndroidManifest.xml . Vaya a la aplicación > archivo AndroidManifest.xml y agréguele el siguiente código. 

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

Paso 5: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.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 Instagram 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>

Paso 6: crear un nuevo archivo de diseño para mostrar cada elemento de nuestro RecyclerView 

Vaya a la aplicación > res > diseño > haga clic con el botón derecho en él > Nuevo > archivo de recursos de diseño y nombre el archivo como insta_feed_rv_item y agréguele el siguiente código. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    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" />
  
        <!--text view for displaying user name-->
        <TextView
            android:id="@+id/idTVAuthorName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="3dp"
            android:padding="3dp"
            android:text="geeks_for_geeks"
            android:textColor="@color/black"
            android:textStyle="bold" />
    </LinearLayout>
  
    <!--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/idLLTopBar"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop" />
  
    <!--text view to display likes count-->
    <TextView
        android:id="@+id/idTVLikes"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idIVPost"
        android:layout_margin="6dp"
        android:padding="5dp"
        android:text="likes"
        android:textColor="@color/black"
        android:textStyle="bold" />
  
    <!--text view to display the caption
        in instagram post-->
    <TextView
        android:id="@+id/idTVPostDesc"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/idTVLikes"
        android:layout_margin="6dp"
        android:padding="5dp"
        android:textColor="@color/black"
        android:textSize="11sp" />
      
</RelativeLayout>

Paso 7: crea una clase modal para almacenar datos para nuestro feed

Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nuevo > clase Java y nombre su clase como InstaModal . 

public class InstaModal {
    // variables for storing data 
    // of our recycler view item
    private String id;
    private String media_type;
    private String permalink;
    private String media_url;
    private String username;
    private String caption;
    private String timestamp;
  
    public String getAuthor_url() {
        return author_url;
    }
  
    public void setAuthor_url(String author_url) {
        this.author_url = author_url;
    }
  
    public int getLikesCount() {
        return likesCount;
    }
  
    public void setLikesCount(int likesCount) {
        this.likesCount = likesCount;
    }
  
    private String author_url;
    private int likesCount;
  
    public String getId() {
        return id;
    }
  
    public void setId(String id) {
        this.id = id;
    }
  
    public String getMedia_type() {
        return media_type;
    }
  
    public void setMedia_type(String media_type) {
        this.media_type = media_type;
    }
  
    public String getPermalink() {
        return permalink;
    }
  
    public void setPermalink(String permalink) {
        this.permalink = permalink;
    }
  
    public String getMedia_url() {
        return media_url;
    }
  
    public void setMedia_url(String media_url) {
        this.media_url = media_url;
    }
  
    public String getUsername() {
        return username;
    }
  
    public void setUsername(String username) {
        this.username = username;
    }
  
    public String getCaption() {
        return caption;
    }
  
    public void setCaption(String caption) {
        this.caption = caption;
    }
  
    public String getTimestamp() {
        return timestamp;
    }
  
    public void setTimestamp(String timestamp) {
        this.timestamp = timestamp;
    }
  
    public InstaModal(String id, String media_type, String permalink, String media_url, String username,
                      String caption, String timestamp, String author_url, int likesCount) {
        this.id = id;
        this.media_type = media_type;
        this.permalink = permalink;
        this.media_url = media_url;
        this.username = username;
        this.caption = caption;
        this.timestamp = timestamp;
        this.author_url = author_url;
        this.likesCount = likesCount;
    }
}

Paso 8: crear una clase de adaptador para configurar estos datos en cada elemento de nuestro RecyclerView

Vaya a la aplicación > java > el nombre del paquete de su aplicación > haga clic con el botón derecho en él > Nueva clase de Java y asígnele el nombre InstagramFeedRVAdapter y agréguele el siguiente código. 

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
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 InstagramFeedRVAdapter extends RecyclerView.Adapter<InstagramFeedRVAdapter.ViewHolder> {
  
    private ArrayList<InstaModal> instaModalArrayList;
    private Context context;
  
    public InstagramFeedRVAdapter(ArrayList<InstaModal> instaModalArrayList, Context context) {
        this.instaModalArrayList = instaModalArrayList;
        this.context = context;
    }
  
    @NonNull
    @Override
    public InstagramFeedRVAdapter.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.insta_feed_rv_item, parent, false);
        return new InstagramFeedRVAdapter.ViewHolder(view);
    }
  
    @Override
    public void onBindViewHolder(@NonNull InstagramFeedRVAdapter.ViewHolder holder, int position) {
        InstaModal modal = instaModalArrayList.get(position);
        holder.authorTV.setText(modal.getUsername());
        if (modal.getMedia_type().equals("IMAGE")) {
            Picasso.get().load(modal.getMedia_url()).into(holder.postIV);
        }
        holder.desctv.setText(modal.getCaption());
        holder.likeTV.setText("" + modal.getLikesCount() + " likes");
        Picasso.get().load(modal.getAuthor_url()).into(holder.authorIV);
    }
  
    @Override
    public int getItemCount() {
        return instaModalArrayList.size();
    }
  
    public class ViewHolder extends RecyclerView.ViewHolder {
  
        CircleImageView authorIV;
        private TextView authorTV;
        private ImageView postIV;
        private TextView likeTV, desctv;
  
        public ViewHolder(@NonNull View itemView) {
            super(itemView);
            authorIV = itemView.findViewById(R.id.idCVAuthor);
            authorTV = itemView.findViewById(R.id.idTVAuthorName);
            postIV = itemView.findViewById(R.id.idIVPost);
            likeTV = itemView.findViewById(R.id.idTVLikes);
            desctv = itemView.findViewById(R.id.idTVPostDesc);
        }
    }
}

Paso 9: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

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<InstaModal> instaModalArrayList;
    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);
        instaModalArrayList = new ArrayList<>();
          
        // calling method to load
        // data in recycler view.
        getInstagramData();
    }
  
    private void getInstagramData() {
        // 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 for getting data 
        // from API in json format.
        String url = "Enter your URL";
         
        // below line we are  creating a new request queue.
        RequestQueue queue = Volley.newRequestQueue(MainActivity.this);
        JsonObjectRequest jsonObjectRequest = new JsonObjectRequest(Request.Method.GET, url, null, new Response.Listener<JSONObject>() {
            @Override
            public void onResponse(JSONObject response) {
                progressBar.setVisibility(View.GONE);
                try {
                    JSONArray dataArray = response.getJSONArray("data");
                    for (int i = 0; i < dataArray.length(); i++) {
                        // below line is to extract data from JSON file.
                        JSONObject dataObj = dataArray.getJSONObject(i);
                        String id = dataObj.getString("id");
                        String media_type = dataObj.getString("media_type");
                        String permalink = dataObj.getString("permalink");
                        String media_url = dataObj.getString("media_url");
                        String username = dataObj.getString("username");
                        String caption = dataObj.getString("caption");
                        String timestamp = dataObj.getString("timestamp");
                         
                        // below line is to add a constant author image URL to our recycler view.
                        String author_url = "https://instagram.fnag5-1.fna.fbcdn.net/v/t51.2885-19/s320x320/75595203_828043414317991_4596848371003555840_n.jpg?_nc_ht=instagram.fnag5-1.fna.fbcdn.net&_nc_ohc=WzA_n4sdoQIAX9B5HWJ&tp=1&oh=05546141f5e40a8f02525b497745a3f2&oe=6031653B";
                        int likesCount = 100 + (i * 10);
                          
                        // below line is use to add data to our modal class.
                        InstaModal instaModal = new InstaModal(id, media_type, permalink, media_url, username, caption, timestamp, author_url, likesCount);
                          
                        // below line is use to add modal 
                        // class to our array list.
                        instaModalArrayList.add(instaModal);
                          
                        // below line we are creating an adapter class and adding our array list in it.
                        InstagramFeedRVAdapter adapter = new InstagramFeedRVAdapter(instaModalArrayList, 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) {
                    // handling error case.
                    e.printStackTrace();
                    Toast.makeText(MainActivity.this, "Fail to get Data.." + e.getMessage(), Toast.LENGTH_SHORT).show();
                }
            }
        }, new Response.ErrorListener() {
            @Override
            public void onErrorResponse(VolleyError error) {
                // handling error message.
                Toast.makeText(MainActivity.this, "Fail to get Data.." + error, Toast.LENGTH_SHORT).show();
            }
        });
        queue.add(jsonObjectRequest);
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción:

Consulte el proyecto en el siguiente enlace: https://github.com/ChaitanyaMunje/LibraryApp/tree/InstagramCustomListVIew