androidandroid-layoutandroid-animationandroid-constraintlayoutandroid-transitions

TranslationY animation doesn't play with TransitionManager


I have an issue with animations. I have defined two simple layouts:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/root"
    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="match_parent">

    <ImageView
        android:id="@+id/player1"
        android:layout_width="50dp"
        android:layout_height="77dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:src="@drawable/two_hearts"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

looking like this: image in which a 2 of Hearts card appears in the upper left of a white background

and

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    android:id="@+id/root"
    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="match_parent">

    <ImageView
        android:id="@+id/player1"
        android:layout_width="50dp"
        android:layout_height="77dp"
        android:layout_marginStart="32dp"
        android:layout_marginTop="16dp"
        android:src="@drawable/two_hearts"
        android:translationY="-60dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

with looks:

image in which the bottom portion of a 2 of Hearts card appears in the upper left of a white background

The difference between them is android:translationY="-60dp".

I switch between them in the GameFragment.kt:

class GameFragment: Fragment() {

    private lateinit var root: ConstraintLayout
    private var expanded = false

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        root = inflater.inflate(R.layout.fragment_game_hidden, container, false) as ConstraintLayout
        root.setOnClickListener {
            show()
        }
        return root
    }

    private fun show() {
        if (expanded) {
            updateConstraints(R.layout.fragment_game_hidden)
        } else {
            updateConstraints(R.layout.fragment_game_shown)
        }
        expanded = !expanded
    }

    private fun updateConstraints(@LayoutRes id: Int) {
        val newConstraintSet = ConstraintSet()
        newConstraintSet.clone(context, id)
        val transition = ChangeBounds()
        transition.interpolator = AccelerateDecelerateInterpolator()
        transition.duration = 1000
        newConstraintSet.applyTo(root)
        TransitionManager.beginDelayedTransition(root, transition)
    }

}

My problem is, the animation is not played at all, the card on the layout just jumps to target location without any transition. Why? I feel like I'm missing something obvious here...


Solution

  • Remove android:translationY="-60dp" in : fragment_game_hidden.xml . Just use margin directly.

    Try change to code below:

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/root"
        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="match_parent">
    
        <ImageView
            android:id="@+id/player1"
            android:layout_width="50dp"
            android:layout_height="77dp"
            android:layout_marginStart="32dp"
            android:src="@drawable/two_hearts"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintBottom_toTopOf="parent"/>
    
    </androidx.constraintlayout.widget.ConstraintLayout>