Adding Lottie animation to Android recyclerview leads to unstable results including views displaying in the wrong place and scrollToPosition bugging

Question

Im creating a simple chat style recyclerview like messenger only super simplified. It all works perfectly, however when I add a lottie animation to show the other person is typing it causes a lot of instability in the recyclerview.

I used a scrollToPosition function when a new message is inserted so it will auto scroll down to the bottom and make the message visible. This bugs out when i add the lottie file, it wont scroll to the bottom properly maybe only half way down instead.

In addition I noticed when I move down the list the message from index 0 of the list will appear as the most recent index so its now duplicated. All these anomolies fix themselves when I remove the lottie animation from the xml. But I would like to have the ability to show a typing animation like every other chat application on the planet. If someone could help me understand what is going wrong I would be greatly appreciative.

Video snippet of scrollToPosition failing with lottie animation

To clarify when I remove the lottie animation from the xml the scrollToPosition works as intended and their is no unusual behaviour.

ViewHolder XML

ADAPTER

class ReplaceAndEmbraceAdapter
constructor(
    private val dateUtil: DateUtil,
) : RecyclerView.Adapter() {
    private var messageList: MutableList = mutableListOf()
    private val appMessage: Int = 1
    private val userMessage: Int = 2
    
    inner class ChatDiffCallback(
        private val oldList: List,
        private val newList: List
    ) : DiffUtil.Callback() {
        override fun areItemsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
            return oldList[oldItemPosition] == newList[newItemPosition]
        }
        override fun getOldListSize(): Int = oldList.size
        override fun getNewListSize(): Int = newList.size
        override fun areContentsTheSame(oldItemPosition: Int, newItemPosition: Int): Boolean {
            return oldList[oldItemPosition] == newList[newItemPosition]
        }
    }

    fun addChat(list: List) = apply {
        val diffCallback = ChatDiffCallback(messageList, list)
        val diffResult = DiffUtil.calculateDiff(diffCallback)
        messageList.clear()
        messageList.addAll(list)
        diffResult.dispatchUpdatesTo(this)
    }

    /* fun addChat(list: List) {
         messageList = list
         notifyItemInserted(messageList.size)
     }*/

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {
        return when (viewType) {
            appMessage -> {
                MessageAppViewHolder(
                    RecyclerViewReplaceAndEmbraceAppBinding.inflate(
                        LayoutInflater.from(parent.context),
                        parent,
                        false
                    ),
                    dateUtil
                )
            }

            else -> MessageUserViewHolder(
                RecyclerViewReplaceAndEmbraceUserBinding.inflate(
                    LayoutInflater.from(parent.context),
                    parent,
                    false
                )
            )
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        when (holder) {
            is MessageAppViewHolder -> {
                holder.bind(messageList?.get(position))
            }
            is MessageUserViewHolder -> {
                holder.bind(messageList?.get(position))
            }
        }
    }

    override fun getItemCount(): Int {
        return if (!messageList.isNullOrEmpty()) {
            messageList!!.size
        } else {
            0
        }
    }

    override fun getItemViewType(position: Int): Int = messageList[position].id

    class MessageAppViewHolder
    constructor(
        private val binding: RecyclerViewReplaceAndEmbraceAppBinding,
        private val dateUtil: DateUtil
    ) : RecyclerView.ViewHolder(binding.root) {

        fun bind(item: ReplaceAppModel?) = with(itemView) {
            binding?.apply {


                 typingAnimation.addAnimatorListener(object : Animator.AnimatorListener {
                     override fun onAnimationRepeat(animation: Animator?) {
                     }

                     override fun onAnimationEnd(animation: Animator?) {
                         typingAnimation.visibility = View.INVISIBLE
                         message.text =
                             HtmlCompat.fromHtml(item?.message!!, HtmlCompat.FROM_HTML_MODE_LEGACY)
                         icon.setImageResource(R.drawable.feelingfit_app_icon_legacy_circular_v1)
                         timestamp.text = dateUtil.getCurrentTimestampEDDMMMYYYYHHMM()
                         timestamp.visibility = View.VISIBLE
                         messageCv.visibility = View.VISIBLE
                         messageCv.fadeIn()
                         timestamp.fadeIn()
                     }

                     override fun onAnimationCancel(animation: Animator?) {
                     }

                     override fun onAnimationStart(animation: Animator?) {
                     }

                 })

            }
        }
    }

user_1701154 · Answer

After looking at the available code in my opinion, the problem is with constraints so first try to change constraints of typingAnimation and icon w.r.t parent instead of messageCv.

But after looking the video, I think you don’t have to put animation in recyclerView/adapter. Just put it below the recyclerView. I mean in between recyclerView and EditText and change visibility when you want to show/hide animation.

If you still want to show animation in recycler view then you should create a separate view for animation view. Which means you will have three viewTypes and viewHolders. This is a better way to do this If you are showing it in recyclerView.

Adding Lottie animation to Android recyclerview leads to unstable results including views displaying in the wrong place and scrollToPosition bugging

1 Answers