How To Implement Like/dislike Function In My App

How to manage 'Like / Unlike' system efficiently in your Android Application

Adding 'like' feature to your app seems quite simple. Just give an icon for like and upon user click, make request to your server and if it's a success change the drawable to 'liked',otherwise show an error toast. Yes this will work fine, if you have a fast network. But let's say a user having lower bandwidth does the same process. Umm! Now something fishy starts here, the time interval increases between the drawable change, leading to a poor UX. Well if you are finding a better approach, this article may be helpful to you.

In th i s sample, a app with recyclerview displays 'information' cards in which a user can post his review' and can 'like' a card.

So what's my basic approach towards it?

Step 1: User likes a card.
Step 2: Change the drawable of 'like' button to 'liked' button. This will ensure that click response is immediate.
Step 3: Make the request for updating like status on server. If the request is successful then server returns the number of likes, set this to the textview showing no. of likes. (This number is necessary, although we could have code that to increase by +1, but if someother guy liked/unliked the same post in the meantime, then the number of likes shown will be incorrect.)
Step 4: If the request fails then you have to revert the icon and the no. of likes to previous value. Just show a toast something like 'poor connectivity' in that case.

Server request fails upon clicking 'like' button. The lag is due to latency in network. UX isn't hurt

The advantage in this approach is that you are reducing the wait time of drawable to change upon the completion of network request. UX will not get hurt in this case.

How to achieve this Programmatically?

First of all, here is the onBindViewHolder() method which is responsible for setting up of data in the card. (only 'liked' icon and 'no.of likes' textview are shown in code)

          @Override
            public void            onBindViewHolder(final            RecyclerView.ViewHolder viewHolder,            final int            position) {
            IssueViewHolder issueViewHolder = (IssueViewHolder) viewHolder;          //setting liked status initially, if user liked it previously
            if            (messagelist.get(position).getIs_liked().equals("true")) {
            issueViewHolder.like.setImageResource(R.drawable.              ic_thumbs_up_red            );
            issueViewHolder.likesnumber.setTextColor(Color.              RED            );
            }            else            {
            issueViewHolder.like.setImageResource(R.drawable.              ic_thumbs_up            );
            issueViewHolder.likesnumber.setTextColor(Color.              GREY            );
            }                      //setting the likes number            
            issueViewHolder.likesnumber.setText("("            +            
            messagelist.get(position).getLikes() +            ")");              }

Now when a user hits 'like button':
Step 1: first check whether card is liked or not
Step 2: if not, set the liked boolean to true and call notifyItemChanged() to update the drawable.
Step 3: After this make your update request to the server

                      likebox.setOnClickListener(new            View.OnClickListener() {
            @Override
            public void            onClick(View v) {                      //check whether it is liked or unliked
            if            (messagelist.get(getAdapterPosition())
            .getIs_liked().equals("true")) {                      //update unlike drawable
            messagelist.get(getAdapterPosition()).setIs_liked("false");
            notifyItemChanged(getAdapterPosition(),            "preunlike");
            }            else            {
            //update like drawable            
            messagelist.get(getAdapterPosition()).setIs_liked("true");
            notifyItemChanged(getAdapterPosition(),            "prelike");
            }                      //make network request
            updateLike(getAdapterPosition());
            }
});                      private void            updateLike(final int            adapterPosition) {                      /*Network Request code*/          // if success
/*update the no. of likes or this card*/          // if fails, check first the status of 'liked', and revert the            
// drawable to its previous state
            if            (messagelist.get(adapterPosition).getIs_liked().equals("false"))            
            {
            messagelist.get(getAdapterPosition()).setIs_liked("true");
            notifyItemChanged(adapterPosition,            "prelike");
            }            else            {
            messagelist.get(getAdapterPosition()).setIs_liked("false");
            notifyItemChanged(adapterPosition,            "preunlike");
            }          }

Make the relevant changes by calling notifyItemChanged() method with some payload(say "prelike","preunlike"). The onBindViewHolder() with payload parameter will be called. Make the drawable related changes in this method. This method is called before onBindViewHolder() method and hence you must call super.onBindViewHolder() is payload is empty

          @Override
            public void            onBindViewHolder(RecyclerView.ViewHolder holder,            int            position, List<Object> payloads) {
            IssueViewHolder issueViewHolder = (IssueViewHolder) holder;              if              (!payloads.isEmpty()) {
              if              (payloads.contains("prelike")) {
              //update UI changes
              updateLike(issueViewHolder,position);
                              }              else if              (payloads.contains("preunlike")) {
              //update UI changes
              updateUnlike(issueViewHolder,position);
                              }
}              else super.onBindViewHolder(holder, position, payloads);
}
                    //Update Like drawable and set the no. of likes, update main list data                      private void            updateLike(IssueViewHolder issueViewHolder,            int            position) {
            issueViewHolder.like.setImageResource(R.drawable.              ic_thumbs_up_red            );
issueViewHolder.likesnumber.setTextColor(Color.              RED            );
issueViewHolder.likesnumber.setText("("            + (Integer.parseInt(messagelist.get(position).getLikes()) + 1) +            ")");              //Update no. of likes in main data list
              messagelist.get(position).setLikes(String.valueOf(Integer.parseInt(
              messagelist.get(position).getLikes()) + 1));
                    }          //Update UnLike drawable and set the no. of likes, update main list data                      private void            updateUnlike(IssueViewHolder issueViewHolder,            int            position) {          issueViewHolder.like.setImageResource(R.drawable.              ic_thumbs_up            );   issueViewHolder.likesnumber.setTextColor(Color.parseColor("#909090"));
issueViewHolder.likesnumber.setText("("            + (Integer.parseInt(messagelist.get(position).getLikes()) - 1) +            ")");              //Update no. of likes in main data list
              messagelist.get(position).setLikes(String.valueOf(Integer.parseInt(
              messagelist.get(position).getLikes()) - 1));
            }

Remember to update no. of likes, liked boolean in main data list otherwise scrolling back recyclerView will show old data.

This Like/UnLike system is currently used in one my open-source app 'Reweyou' :

Github- https://github.com/varunn12/Reweyou/tree/issuesbranch
GetApk- https://play.google.com/store/apps/details?id=in.reweyou.reweyou