Esta es la Parte 10 del tutorial «Crear una aplicación de redes sociales en Android Studio» , y vamos a cubrir las siguientes funcionalidades en este artículo:
- Vamos a darle Me Gusta a un Blog. Estamos implementando esta característica utilizando dos imágenes, una con un botón Me gusta con fondo blanco y otra con un fondo azul.
- Cuando el usuario haga clic en el botón por primera vez, cambiaremos la imagen al botón con el color de fondo azul y aumentará la cuenta. Cuando el usuario haga clic nuevamente, disminuiremos el conteo y cambiaremos el botón Me gusta con un fondo blanco.
Implementación paso a paso
Paso 1: trabajar con el archivo row_posts.xml
Agregue un botón Me gusta y un total como TextView .
XML
<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" />
A continuación se muestra el código actualizado 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: trabajar con el archivo AdapterPosts.java
Vaya al archivo AdapterPosts.java y consulte el siguiente código. A continuación se muestra el código actualizado para el 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);
}
}
}
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:
