KeyFrame Animation

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	xmlns:tools="http://schemas.android.com/tools"
	android:id="@+id/constraintLayout"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:background="#181818"
	tools:context=".MainActivity">

	<ImageView
		android:id="@+id/imvBackground"
		android:layout_width="0dp"
		android:layout_height="0dp"
		android:src="@drawable/tajmahal"
		android:scaleType="centerCrop"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="parent"
		app:layout_constraintTop_toTopOf="parent"
		tools:src="@drawable/tajmahal"/>

	<TextView
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="Agra, India"
		app:layout_constraintBottom_toBottomOf="@+id/txvTitle"
		android:textSize="14sp"
		android:paddingStart="16dp"
		android:background="#c000"
		android:textColor="@android:color/white"
		android:paddingEnd="16dp"
		android:paddingTop="3dp"
		android:paddingBottom="3dp" android:id="@+id/txvPlace"
		app:layout_constraintStart_toEndOf="@+id/imvBackground"/>

	<TextView
		android:id="@+id/txvTitle"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_marginTop="48dp"
		android:background="#a000"
		android:paddingBottom="8dp"
		android:paddingEnd="24dp"
		android:paddingStart="24dp"
		android:paddingTop="8dp"
		android:text="The Taj Mahal"
		android:textColor="@android:color/white"
		android:textSize="45sp"
		app:layout_constraintTop_toTopOf="parent"
		app:layout_constraintStart_toEndOf="@+id/imvBackground"/>

	<TextView
		android:id="@+id/txvTapForInfo"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_marginBottom="12dp"
		android:layout_marginEnd="8dp"
		android:layout_marginStart="8dp"
		android:text="Tap for info"
		android:textSize="15sp"
		android:textColor="@android:color/white"
		app:layout_constraintBottom_toBottomOf="parent"
		app:layout_constraintEnd_toEndOf="parent"
		app:layout_constraintStart_toStartOf="parent"/>

	<TextView
		android:id="@+id/txvDescription"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="The Taj Mahal is an ivory-white marble mausoleum on the south bank of the Yamuna river in the Indian city of Agra. It was commissioned in 1632 by the Mughal emperor, Shah Jahan, to house the tomb of his favourite wife, Mumtaz Mahal."
		android:textSize="22sp"
		android:textColor="#FFFF"
		android:background="#181818"
		android:gravity="center"
		android:paddingStart="8dp"
		android:paddingEnd="8dp"
		android:paddingBottom="8dp"
		app:layout_constraintTop_toBottomOf="@+id/imvBackground"
		app:layout_constraintLeft_toLeftOf="parent"
		app:layout_constraintRight_toRightOf="parent"/>

</androidx.constraintlayout.widget.ConstraintLayout>

activity_main_detail.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" android:id="@+id/constraintLayout">

    <ImageView
        android:id="@+id/imvBackground"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:scaleType="centerCrop"
        android:src="@drawable/tajmahal"
        app:layout_constraintBottom_toTopOf="@+id/txvDescription"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@drawable/tajmahal"/>

    <TextView
        android:id="@+id/txvTitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="48dp"
        android:background="#a000"
        android:paddingBottom="8dp"
        android:paddingEnd="24dp"
        android:paddingStart="24dp"
        android:paddingTop="8dp"
        android:text="The Taj Mahal"
        android:textColor="@android:color/white"
        android:textSize="45sp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Agra, India"
        app:layout_constraintTop_toBottomOf="@+id/txvTitle"
        android:textSize="14sp"
        android:background="#c000"
        android:textColor="@android:color/white"
        android:paddingStart="16dp"
        android:paddingEnd="16dp"
        android:paddingTop="3dp"
        android:paddingBottom="3dp" android:id="@+id/txvPlace"
        app:layout_constraintStart_toStartOf="@+id/txvTitle"/>

    <TextView
        android:id="@+id/txvTapForInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="Tap for info"
        android:textSize="15sp"
        android:textColor="@android:color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"/>

    <TextView
        android:id="@+id/txvDescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="The Taj Mahal is an ivory-white marble mausoleum on the south bank of the Yamuna river in the Indian city of Agra. It was commissioned in 1632 by the Mughal emperor, Shah Jahan, to house the tomb of his favourite wife, Mumtaz Mahal."
        android:textSize="22sp"
        android:textColor="#FFFF"
        android:gravity="center"
        android:background="#181818"
        android:paddingStart="8dp"
        android:paddingEnd="8dp"
        android:paddingBottom="8dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>


</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.kt

package com.sriyank.keyframeanimation

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.transition.ChangeBounds
import android.transition.TransitionManager
import android.view.animation.AnticipateOvershootInterpolator
import androidx.constraintlayout.widget.ConstraintSet
import kotlinx.android.synthetic.main.activity_main.*


class MainActivity : AppCompatActivity() {

    private var isDetailLayout = false

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        constraintLayout.setOnClickListener {
            if (isDetailLayout)
                // switch to default layout
            else
                // switch to detail layout
        }
    }

    private fun swapFrames(layoutId: Int){


    }
}

tajmahal.jpg