Facebook messenger chat item animation on click

Question

I'm trying to make my list item to be animated after onClick(),Like Facebook messenger. I tried to do this with animateLayoutChanges=true in my list item layout and also my recyclerView's parent layout, but it is not smooth and have some problem, after first click when I want to show hidden fields (setVisibility(VISIBLE)) , it works not bad, but setVisibility(GONE) works not properly, this is what it looks like

And what I'm trying to achieve is this

Any advice how to do that? this is My custom view

class MessageItemView : RelativeLayout {

  constructor(context: Context) : super(context)
  constructor(context: Context, attributeSet: AttributeSet) : super(context, attributeSet)

  private var messageTextView: TextView
  private var dateTextView: TextView
  private var itemView: View? = null
  init {
      itemView =  LayoutInflater.from(context)?.inflate(R.layout.live_chat_list_item, this)
      messageTextView = itemView?.findViewById(R.id.live_chat_msg_text_id) as TextView
      dateTextView = itemView?.findViewById(R.id.message_received_date_txt_id) as TextView
  }

 fun setUPViewModelData(message: MessageModel) {
     itemView?.setOnClickListener {
         dateTextView.visibility = if (dateTextView.visibility == View.VISIBLE) View.GONE else View.VISIBLE
         delivered_status_txt_id.visibility = dateTextView.visibility
  }
}

And this is xml of this view

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:animateLayoutChanges="true"
    android:orientation="vertical">

<TextView
    android:id="@+id/message_received_date_txt_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerHorizontal="true"
    android:visibility="gone" />

<LinearLayout
    android:id="@+id/message_wrapper_layout_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/message_received_date_txt_id"
    android:orientation="vertical">

    <TextView
        android:id="@+id/live_chat_msg_text_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

<TextView
    android:id="@+id/delivered_status_txt_id"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/message_wrapper_layout_id"
    android:visibility="gone" />

</RelativeLayout>

I don't understand what's wrong in my layout hierarchy or what would be good architecture and also interested in Fb's messenger chat item layout hierarchy... Any eideas?

Answer 1

Remove the animateLayoutChanges from your layout and then use the TransitionManager from the support library:

fun setUPViewModelData(message: MessageModel) {
     itemView?.setOnClickListener {
         TransitionManager.beginDelayedTransition(recyclerView)
         dateTextView.visibility = if (dateTextView.visibility == View.VISIBLE) View.GONE else View.VISIBLE
         delivered_status_txt_id.visibility = dateTextView.visibility
    }
}