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: