Hemos visto implementar RecyclerView en Android con datos simples dentro de nuestra aplicación. En este artículo, veremos la implementación de Facebook como Custom RecyclerView en Android .
¿Qué vamos a construir en este artículo?
Construiremos una aplicación simple en la que mostraremos Facebook como RecyclerView en nuestra aplicación de Android. Obtendremos estos datos de una API simple ( https://jsonkeeper.com/b/OB3B ) que se proporciona en el artículo. Con la ayuda de esta API, mostraremos esos datos en nuestro RecyclerView. 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: agregar permisos de Internet en su 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.
XML
<uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
Paso 4: 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
<?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>
Paso 5: crear un archivo dibujable personalizado para nuestra imagen de fondo
Navegue a la aplicación> res> dibujable> Haga clic con el botón derecho en él> Nuevo> archivo de recurso dibujable y nombre su archivo como background_drawable y agregue el código a continuación para nuestro fondo personalizado.
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>
Paso 6: crear un archivo de diseño para nuestro elemento de RecyclerView
Navegue a la aplicación> res> diseño> Haga clic derecho en él> Nuevo> archivo de recursos de diseño y asígnele el nombre facebook_feed_rv_item y agregue el código a continuación. Se agregan comentarios en el código para conocer con más detalle.
Nota: Los iconos usados en este archivo están presentes en la carpeta dibujable. Navegue a la aplicación > res > carpeta dibujable y agregue sus íconos a esa carpeta.
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>
Paso 7: Crear una clase modal para almacenar nuestros datos
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 FacebookFeedModal y agréguele el siguiente código.
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;
}
}
Paso 8: crear una clase de adaptador para configurar datos en nuestro elemento de 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 FacebookFeedRVAdapter y agréguele el siguiente código.
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);
}
}
}
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.
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);
}
}
Ahora ejecute su aplicación y vea el resultado de la aplicación.
Producción:
Puede consultar el proyecto en el siguiente enlace: https://github.com/ChaitanyaMunje/LibraryApp/tree/FacebookBranch
Publicación traducida automáticamente
Artículo escrito por chaitanyamunje y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA