Esta es la Parte 6 del tutorial «Crear una aplicación de redes sociales en Android Studio» , y cubriremos las siguientes funcionalidades en este artículo:
- Vamos a recuperar los blogs escritos por los usuarios en HomeFragment .
- Aquí solo hemos mostrado los datos del usuario y el título, la descripción y la imagen de los blogs, pero también vamos a implementar la función Me gusta y comentar en los próximos blogs.
- Luego mostraremos los detalles de la publicación Actividad donde los usuarios podrán comentar.
- También hemos implementado la función Me gusta en un blog .
Implementación paso a paso
Paso 1: Cree un nuevo archivo de recursos de diseño
Vaya a app > res > layout > New > Layout Resource File y nombre el archivo como row_posts . A continuación se muestra el código para el archivo row_posts.xml .
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:orientation="vertical" app:cardBackgroundColor="@color/colorWhite" app:cardCornerRadius="3dp" app:cardElevation="3dp" app:cardUseCompatPadding="true" app:contentPadding="5dp"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <LinearLayout android:id="@+id/profilelayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center_vertical" android:orientation="horizontal"> <de.hdodenhof.circleimageview.CircleImageView android:id="@+id/picturetv" android:layout_width="50dp" android:layout_height="50dp" android:scaleType="centerCrop" android:src="@drawable/profile_image" /> <LinearLayout android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:orientation="vertical"> <TextView android:id="@+id/unametv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Name" android:textColor="@color/colorBlack" android:textSize="20sp" /> <TextView android:id="@+id/utimetv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="33 min" /> </LinearLayout> <ImageButton android:id="@+id/morebtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@null" android:src="@drawable/ic_more" /> </LinearLayout> <TextView android:id="@+id/ptitletv" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Title" android:textSize="16sp" android:textStyle="bold" /> <TextView android:id="@+id/descript" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Description" android:textColor="@color/colorBlack" /> <ImageView android:id="@+id/pimagetv" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorWhite" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal"> <TextView android:id="@+id/plikeb" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="1.2K Likes" android:textColor="@color/colorPrimary" /> <TextView android:id="@+id/pcommentco" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_weight="1" android:text="1.2K Comment" android:textAlignment="textEnd" android:textColor="@color/colorPrimary" /> </LinearLayout> <View android:layout_width="match_parent" android:layout_height="1dp" android:background="#F5F0F0" /> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:gravity="center" android:orientation="horizontal"> <Button android:id="@+id/like" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:autoLink="all" android:background="@color/colorWhite" android:drawableStart="@drawable/ic_like" android:drawableLeft="@drawable/ic_like" android:padding="5dp" android:text="Like" /> <Button android:id="@+id/comment" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_weight="1" android:autoLink="all" android:background="@color/colorWhite" android:drawableStart="@drawable/ic_comment" android:drawableLeft="@drawable/ic_comment" android:padding="5dp" android:text="COMMENT" /> </LinearLayout> </LinearLayout> </androidx.cardview.widget.CardView>
Paso 2: Crea una nueva clase Java
Consulte este artículo Crear clases en Android Studio y nombre la clase como ModelPost. A continuación se muestra el código para el archivo ModelPost.java . Creó esta clase para inicializar la clave para que podamos recuperar el valor de la clave más adelante.
Java
package com.example.socialmediaapp;
public class ModelPost {
public ModelPost() {
}
String description;
public String getDescription() {
return description;
}
public void setDescription(String description) {
this.description = description;
}
public String getPid() {
return pid;
}
public void setPid(String pid) {
this.pid = pid;
}
public String getPtime() {
return ptime;
}
public void setPtime(String ptime) {
this.ptime = ptime;
}
public String getTitle() {
return title;
}
public void setTitle(String title) {
this.title = title;
}
public String getUdp() {
return udp;
}
public void setUdp(String udp) {
this.udp = udp;
}
public String getUemail() {
return uemail;
}
public void setUemail(String uemail) {
this.uemail = uemail;
}
public String getUid() {
return uid;
}
public void setUid(String uid) {
this.uid = uid;
}
public String getUimage() {
return uimage;
}
public void setUimage(String uimage) {
this.uimage = uimage;
}
public String getUname() {
return uname;
}
public void setUname(String uname) {
this.uname = uname;
}
public String getPlike() {
return plike;
}
public void setPlike(String plike) {
this.plike = plike;
}
String pid;
public String getPcomments() {
return pcomments;
}
public void setPcomments(String pcomments) {
this.pcomments = pcomments;
}
public ModelPost(String description, String pid, String ptime, String pcomments, String title, String udp, String uemail, String uid, String uimage, String uname, String plike) {
this.description = description;
this.pid = pid;
this.ptime = ptime;
this.pcomments = pcomments;
this.title = title;
this.udp = udp;
this.uemail = uemail;
this.uid = uid;
this.uimage = uimage;
this.uname = uname;
this.plike = plike;
}
String ptime, pcomments;
String title;
String udp;
String uemail;
String uid;
String uimage;
String uname, plike;
}
Del mismo modo, cree otra clase Java y nombre la clase como AdapterPosts. A continuación se muestra el código del archivo AdapterPosts.java .
Java
package com.example.socialmediaapp;
import android.app.ProgressDialog;
import android.content.Context;
import android.content.Intent;
import android.text.format.DateFormat;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupMenu;
import android.widget.TextView;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;
import com.bumptech.glide.Glide;
import com.google.android.gms.tasks.OnFailureListener;
import com.google.android.gms.tasks.OnSuccessListener;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.Query;
import com.google.firebase.database.ValueEventListener;
import com.google.firebase.storage.FirebaseStorage;
import com.google.firebase.storage.StorageReference;
import java.util.Calendar;
import java.util.List;
import java.util.Locale;
public class AdapterPosts extends RecyclerView.Adapter<com.example.socialmediaapp.AdapterPosts.MyHolder> {
Context context;
String myuid;
private DatabaseReference liekeref, postref;
boolean mprocesslike = false;
public AdapterPosts(Context context, List<ModelPost> modelPosts) {
this.context = context;
this.modelPosts = modelPosts;
myuid = FirebaseAuth.getInstance().getCurrentUser().getUid();
liekeref = FirebaseDatabase.getInstance().getReference().child("Likes");
postref = FirebaseDatabase.getInstance().getReference().child("Posts");
}
List<ModelPost> modelPosts;
@NonNull
@Override
public MyHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.row_posts, parent, false);
return new MyHolder(view);
}
@Override
public void onBindViewHolder(@NonNull final MyHolder holder, final int position) {
final String uid = modelPosts.get(position).getUid();
String nameh = modelPosts.get(position).getUname();
final String titlee = modelPosts.get(position).getTitle();
final String descri = modelPosts.get(position).getDescription();
final String ptime = modelPosts.get(position).getPtime();
String dp = modelPosts.get(position).getUdp();
String plike = modelPosts.get(position).getPlike();
final String image = modelPosts.get(position).getUimage();
String email = modelPosts.get(position).getUemail();
String comm = modelPosts.get(position).getPcomments();
final String pid = modelPosts.get(position).getPtime();
Calendar calendar = Calendar.getInstance(Locale.ENGLISH);
calendar.setTimeInMillis(Long.parseLong(ptime));
String timedate = DateFormat.format("dd/MM/yyyy hh:mm aa", calendar).toString();
holder.name.setText(nameh);
holder.title.setText(titlee);
holder.description.setText(descri);
holder.time.setText(timedate);
holder.like.setText(plike + " Likes");
holder.comments.setText(comm + " Comments");
setLikes(holder, ptime);
try {
Glide.with(context).load(dp).into(holder.picture);
} catch (Exception e) {
}
holder.image.setVisibility(View.VISIBLE);
try {
Glide.with(context).load(image).into(holder.image);
} catch (Exception e) {
}
holder.like.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(holder.itemView.getContext(), PostLikedByActivity.class);
intent.putExtra("pid", pid);
holder.itemView.getContext().startActivity(intent);
}
});
holder.likebtn.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
final int plike = Integer.parseInt(modelPosts.get(position).getPlike());
mprocesslike = true;
final String postid = modelPosts.get(position).getPtime();
liekeref.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
if (mprocesslike) {
if (dataSnapshot.child(postid).hasChild(myuid)) {
postref.child(postid).child("plike").setValue("" + (plike - 1));
liekeref.child(postid).child(myuid).removeValue();
mprocesslike = false;
} else {
postref.child(postid).child("plike").setValue("" + (plike + 1));
liekeref.child(postid).child(myuid).setValue("Liked");
mprocesslike = false;
}
}
}
@Override
public void onCancelled(@NonNull DatabaseError databaseError) {
}
});
}
});
holder.more.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
showMoreOptions(holder.more, uid, myuid, ptime, image);
}
});
holder.comment.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent(context, PostDetailsActivity.class);
intent.putExtra("pid", ptime);
context.startActivity(intent);
}
});
}
private void showMoreOptions(ImageButton more, String uid, String myuid, final String pid, final String image) {
PopupMenu popupMenu = new PopupMenu(context, more, Gravity.END);
if (uid.equals(myuid)) {
popupMenu.getMenu().add(Menu.NONE, 0, 0, "DELETE");
}
popupMenu.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
@Override
public boolean onMenuItemClick(MenuItem item) {
if (item.getItemId() == 0) {
deltewithImage(pid, image);
}
return false;
}
});
popupMenu.show();
}
private void deltewithImage(final String pid, String image) {
final ProgressDialog pd = new ProgressDialog(context);
pd.setMessage("Deleting");
StorageReference picref = FirebaseStorage.getInstance().getReferenceFromUrl(image);
picref.delete().addOnSuccessListener(new OnSuccessListener<Void>() {
@Override
public void onSuccess(Void aVoid) {
Query query = FirebaseDatabase.getInstance().getReference("Posts").orderByChild("ptime").equalTo(pid);
query.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
for (DataSnapshot dataSnapshot1 : dataSnapshot.getChildren()) {
dataSnapshot1.getRef().removeValue();
}
pd.dismiss();
Toast.makeText(context, "Deleted Successfully", Toast.LENGTH_LONG).show();
}
@Override
public void onCancelled(@NonNull DatabaseError databaseError) {
}
});
}
}).addOnFailureListener(new OnFailureListener() {
@Override
public void onFailure(@NonNull Exception e) {
}
});
}
private void setLikes(final MyHolder holder, final String pid) {
liekeref.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
if (dataSnapshot.child(pid).hasChild(myuid)) {
holder.likebtn.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_liked, 0, 0, 0);
holder.likebtn.setText("Liked");
} else {
holder.likebtn.setCompoundDrawablesWithIntrinsicBounds(R.drawable.ic_like, 0, 0, 0);
holder.likebtn.setText("Like");
}
}
@Override
public void onCancelled(@NonNull DatabaseError databaseError) {
}
});
}
@Override
public int getItemCount() {
return modelPosts.size();
}
class MyHolder extends RecyclerView.ViewHolder {
ImageView picture, image;
TextView name, time, title, description, like, comments;
ImageButton more;
Button likebtn, comment;
LinearLayout profile;
public MyHolder(@NonNull View itemView) {
super(itemView);
picture = itemView.findViewById(R.id.picturetv);
image = itemView.findViewById(R.id.pimagetv);
name = itemView.findViewById(R.id.unametv);
time = itemView.findViewById(R.id.utimetv);
more = itemView.findViewById(R.id.morebtn);
title = itemView.findViewById(R.id.ptitletv);
description = itemView.findViewById(R.id.descript);
like = itemView.findViewById(R.id.plikeb);
comments = itemView.findViewById(R.id.pcommentco);
likebtn = itemView.findViewById(R.id.like);
comment = itemView.findViewById(R.id.comment);
profile = itemView.findViewById(R.id.profilelayout);
}
}
}
Paso 3: trabajar con el archivo fragment_home.xml
Vaya a la aplicación > res > diseño > fragment_home.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo fragment_home.xml .
XML
<?xml version="1.0" encoding="utf-8"?> <FrameLayout 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=".HomeFragment"> <androidx.recyclerview.widget.RecyclerView android:id="@+id/postrecyclerview" android:layout_width="match_parent" android:layout_height="match_parent" /> </FrameLayout>
Paso 4: trabajar con el archivo HomeFragment.java
Así es como se recuperarán los blogs de Firebase. Cada vez que los datos cambien, el valor cambiará en consecuencia.
DatabaseReference databaseReference= FirebaseDatabase.getInstance().getReference("Posts");
databaseReference.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
posts.clear();
for (DataSnapshot dataSnapshot1:dataSnapshot.getChildren()){
}
}
@Override
public void onCancelled(@NonNull DatabaseError databaseError) {
Toast.makeText(getActivity(),databaseError.getMessage(),Toast.LENGTH_LONG).show();
}
});
Java
package com.example.socialmediaapp;
import android.content.Intent;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MenuItem;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Toast;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
import com.google.firebase.auth.FirebaseAuth;
import com.google.firebase.database.DataSnapshot;
import com.google.firebase.database.DatabaseError;
import com.google.firebase.database.DatabaseReference;
import com.google.firebase.database.FirebaseDatabase;
import com.google.firebase.database.ValueEventListener;
import java.util.ArrayList;
import java.util.List;
/**
* A simple {@link Fragment} subclass.
*/
public class HomeFragment extends Fragment {
FirebaseAuth firebaseAuth;
String myuid;
RecyclerView recyclerView;
List<ModelPost> posts;
AdapterPosts adapterPosts;
public HomeFragment() {
// Required empty public constructor
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
// Inflate the layout for this fragment
View view = inflater.inflate(R.layout.fragment_home, container, false);
firebaseAuth = FirebaseAuth.getInstance();
recyclerView = view.findViewById(R.id.postrecyclerview);
recyclerView.setHasFixedSize(true);
LinearLayoutManager layoutManager = new LinearLayoutManager(getActivity());
layoutManager.setReverseLayout(true);
layoutManager.setStackFromEnd(true);
recyclerView.setLayoutManager(layoutManager);
posts = new ArrayList<>();
loadPosts();
return view;
}
private void loadPosts() {
DatabaseReference databaseReference = FirebaseDatabase.getInstance().getReference("Posts");
databaseReference.addValueEventListener(new ValueEventListener() {
@Override
public void onDataChange(@NonNull DataSnapshot dataSnapshot) {
posts.clear();
for (DataSnapshot dataSnapshot1 : dataSnapshot.getChildren()) {
ModelPost modelPost = dataSnapshot1.getValue(ModelPost.class);
posts.add(modelPost);
adapterPosts = new AdapterPosts(getActivity(), posts);
recyclerView.setAdapter(adapterPosts);
}
}
@Override
public void onCancelled(@NonNull DatabaseError databaseError) {
Toast.makeText(getActivity(), databaseError.getMessage(), Toast.LENGTH_LONG).show();
}
});
}
@Override
public void onCreate(@Nullable Bundle savedInstanceState) {
setHasOptionsMenu(true);
super.onCreate(savedInstanceState);
}
}
Paso 5: Cree 2 nuevas actividades vacías y nómbrelas como PostLikedByActivity y PostDetailsActivity . Mantenga el archivo como está.
Producción:
Para ver todos los archivos dibujables utilizados en este artículo, consulte este enlace: https://drive.google.com/drive/folders/1M_knOH_ugCuwSP5nkYzeD4dRp-Honzbe?usp=sharing
A continuación se muestra la estructura de archivos después de realizar estas operaciones:
