Why can't I see the hidden textview behind my cardview after it animates and moves to left for a second?

Question

I am trying to show a message behind the CardView in the space that is created after the Cardview moves to left for a moment and then again make that text invisible after the Cardview comes back to its original position. I want this to happen when I click on imageIcon present in upper right corner of the cardview. Currently, my cardview does move to left for a second when I click on the imageIcon but no Textview message gets shown behind the cardview. Below is my code and the XML file .

item_image.xml

<androidx.core.widget.NestedScrollView
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">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="5dp"
    android:id="@+id/cardAnimals"
    app:cardCornerRadius="8dp"
    android:layout_margin="10dp"
    app:cardElevation="4dp"
    >
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/gradient_cardview"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="10dp"
            android:layout_gravity="center"
            android:scaleType="fitXY"
            android:background="@drawable/circular_imageview" />

        <TextView
            android:id="@+id/name1TextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Text1"
            android:textColor="@color/textColor"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:textStyle="bold"
            android:textSize="18sp" />

        <TextView
            android:id="@+id/name2TextView"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="text2"
            android:textStyle="bold"
            android:textColor="@color/textColor"
            android:layout_marginTop="5dp"
            android:layout_marginBottom="5dp"
            android:gravity="center"
            android:textSize="18sp" />
    </LinearLayout>
    <ImageView
        android:id="@+id/gemCount"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="10dp"
        android:layout_gravity="end|top"
        android:scaleType="fitXY"
        android:src="@drawable/purp" />
    <ImageView
        android:id="@+id/newImageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/mic"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="10dp"
        android:layout_gravity="bottom|start" />
</androidx.cardview.widget.CardView>
<TextView
    android:id="@+id/hiddenTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="100dp"
    android:text="Hello"
    android:textColor="@color/textColor"
    android:textStyle="bold"
    android:textSize="18sp"
    android:visibility="gone"/>
</LinearLayout>

</androidx.core.widget.NestedScrollView>

ImageAdapter.kt

package com.example.visuallithuanian.adapter

import android.R
import android.animation.Animator
import android.animation.AnimatorListenerAdapter
import android.animation.ObjectAnimator
import android.view.LayoutInflater
import android.view.View
import android.view.ViewGroup
import android.widget.ImageView
import android.widget.TextView
import androidx.cardview.widget.CardView
import androidx.recyclerview.widget.RecyclerView
import com.example.visuallithuanian.data.ImageInfo


class ImageAdapter(private val imageList: List<ImageInfo>) : RecyclerView.Adapter<ImageAdapter.ViewHolder>() {

class ViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
    val imageView: ImageView = itemView.findViewById(com.example.visuallithuanian.R.id.imageView)
    val textView1: TextView = itemView.findViewById(com.example.visuallithuanian.R.id.name1TextView)
    val textView2: TextView = itemView.findViewById(com.example.visuallithuanian.R.id.name2TextView)
}

override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
    val view = LayoutInflater.from(parent.context).inflate(com.example.visuallithuanian.R.layout.item_image, parent, false)
    return ViewHolder(view)
}

override fun onBindViewHolder(holder: ViewHolder, position: Int) {
    val currentItem = imageList[position]
    holder.imageView.setImageResource(currentItem.imageId)
    holder.textView1.text = currentItem.name1
    holder.textView2.text = currentItem.name2

    val imageIcon =
        holder.itemView.findViewById<ImageView>(com.example.visuallithuanian.R.id.gemCount)
    val cardAnimals =
        holder.itemView.findViewById<CardView>(com.example.visuallithuanian.R.id.cardAnimals)
    val textHidden =
        holder.itemView.findViewById<TextView>(com.example.visuallithuanian.R.id.hiddenTextView)


     //Code where the cardview moves to left and Textview gets shown behind it.
    imageIcon.setOnClickListener {
        val anim = ObjectAnimator.ofFloat(cardAnimals, "translationX", -500f)
        anim.duration = 1000
        anim.start()
        anim.addListener(object : AnimatorListenerAdapter() {
            override fun onAnimationEnd(animation: Animator) {
                val anim = ObjectAnimator.ofFloat(cardAnimals, "translationX", 0f)
                anim.duration = 1000
                anim.start()
                anim.addListener(object : AnimatorListenerAdapter() {
                    override fun onAnimationEnd(animation: Animator) {
                        textHidden.visibility = View.VISIBLE
                    }
                })
            }
        })
    }

}
override fun getItemCount() = imageList.size
}

I have visibiliy values along with ObjectAnimator but the invisible text view just never get's visible after i click on icon im cardview. My animation works fine .

Answer 1

There is an issue with XML file. HiddenTextView is not behind of CardView. Here is the updated XML. Update parent LinearLayout with FrameLayout and then no need to hide visibility of HiddenTextView.

<androidx.core.widget.NestedScrollView 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">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <androidx.cardview.widget.CardView
            android:id="@+id/cardAnimals"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="10dp"
            android:layout_marginTop="5dp"
            app:cardCornerRadius="8dp"
            app:cardElevation="4dp">

                <Inside Code Remain Same>

        </androidx.cardview.widget.CardView>

        <TextView
            android:id="@+id/hiddenTextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:text="Hello"
            android:layout_marginEnd="16dp"
            android:layout_gravity="end|center_vertical"
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold" />
    </FrameLayout>

</androidx.core.widget.NestedScrollView>