Transición de elementos compartidos de Android con Kotlin

La transición de elementos compartidos se ve en la mayoría de las aplicaciones que se utilizan cuando el usuario navega entre dos pantallas. Este tipo de animación se ve cuando un usuario hace clic en los elementos presentes en la lista y navega a una pantalla diferente. Durante estas transiciones, la animación que se muestra se denomina transición de elementos compartidos. En este artículo, veremos la implementación de la transición de elementos compartidos en aplicaciones de Android usando Kotlin. 

Nota : si está buscando integrar la transición de elementos compartidos en Android usando Java. Consulte el siguiente artículo: Transición de elementos compartidos en Android usando Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Kotlin como lenguaje de programación.

Paso 2: crea una nueva actividad vacía

Vaya a la aplicación > java > el nombre de su paquete > haga clic con el botón derecho en > Nuevo > Actividad > Actividad vacía y nombre la actividad como MainActivity2 .

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo activity_main.xml . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
 
    <!-- Textview to display the heading of the app-->
    <TextView
        android:id="@+id/idTVHeading"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="50dp"
        android:layout_marginRight="20dp"
        android:gravity="center"
        android:padding="5dp"
        android:text="Shared Element Transition Example"
        android:textAlignment="center"
        android:textColor="@color/purple_200"
        android:textSize="20sp"
        android:textStyle="bold" />
 
    <!--on below line we are creating a simple image view-->
    <ImageView
        android:id="@+id/idIVAndroid"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="50dp"
        android:padding="10dp"
        android:src="@drawable/android"
        android:transitionName="fade" />
 
</RelativeLayout>

Paso 4: trabajar con el archivo activity_main2.xml

Vaya a app > res > layout > activity_main2.xml y agréguele el siguiente código. Se agregan comentarios en el código para conocer en detalle. 

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">
 
    <!--on below line we are creating a simple image view
         and specifying a transition name for it -->
    <ImageView
        android:id="@+id/idIVAndroid"
        android:layout_width="200dp"
        android:layout_height="200dp"
        android:layout_centerHorizontal="true"
        android:layout_margin="50dp"
        android:padding="10dp"
        android:src="@drawable/android"
        android:transitionName="fade" />
 
</RelativeLayout>

Paso 5: trabajar con el archivo MainActivity2.kt

Vaya al archivo MainActivity2.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity2.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.gtappdevelopers.kotlingfgproject
 
import android.os.Build
import android.os.Bundle
import android.transition.Fade
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
 
class MainActivity2 : AppCompatActivity() {
    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main2)
         
        // on below line we are creating
        // a variable for fade animation
        val fade = Fade()
         
        // on below line we are excluding our target such
        // as status bar background and navigation bar
        // background from animation.
        fade.excludeTarget(android.R.id.statusBarBackground, true)
        fade.excludeTarget(android.R.id.navigationBarBackground, true)
         
        // on below line we are setting enter
        // and exit transition as fade.
        window.enterTransition = fade
        window.exitTransition = fade
 
    }
}

Paso 6: trabajar con el archivo MainActivity.kt

Vaya al archivo MainActivity.kt y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.kt . Se agregan comentarios dentro del código para comprender el código con más detalle.

package com.gtappdevelopers.kotlingfgproject
 
import android.content.Intent
import android.os.Build
import android.os.Bundle
import android.transition.Fade
import android.widget.ImageView
import androidx.annotation.RequiresApi
import androidx.appcompat.app.AppCompatActivity
import androidx.core.app.ActivityOptionsCompat
import androidx.core.view.ViewCompat
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating
    // a variable for our image view.
    lateinit var imageView: ImageView
 
    @RequiresApi(Build.VERSION_CODES.LOLLIPOP)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
         
        // on below line we are creating
        // a variable for our fade.
        val fade = Fade()
         
        // on below line we are exclusing the target
        // which we dont want to animate such as our
        // status background and navigation background.
        fade.excludeTarget(android.R.id.statusBarBackground, true)
        fade.excludeTarget(android.R.id.navigationBarBackground, true)
         
        // on below line we are specifying
        // enter transition as fade.
        window.enterTransition = fade
         
        // on below line we are specifying
        // exit transition as fade.
        window.exitTransition = fade
         
        // on below line we are initializing
        // our image view with its id.
        imageView = findViewById(R.id.idIVAndroid)
         
        // on below line we are adding on
        // click listener for our image view.
        imageView.setOnClickListener {
            // on below line we are creating a variable
            // for our intent to open a new activity.
            val intent = Intent(this@MainActivity, MainActivity2::class.java)
             
            // on below line we are creating a variable
            // for activity options compact and setting
            // transition for our activity.
            val options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                this@MainActivity, imageView, ViewCompat.getTransitionName(imageView)!!
            )
             
            // on below line we are starting our
            // activity passing bundles.
            startActivity(intent, options.toBundle())
        }
 
    }
}

Ahora ejecute su aplicación para ver el resultado.

Producción: