Transición de elemento compartido en Android con ejemplo

Shared Element Transition es una de las animaciones más vistas en las aplicaciones de Android. Este tipo de animación se utiliza cuando tenemos que abrir un elemento desde un ListView o RecyclerView . La transición de elementos compartidos en Android determina cómo se animan las vistas de elementos compartidos de una actividad a otra o de un fragmento a otro. Ahora veremos la implementación de Transición de elementos compartidos en nuestra aplicación con un ejemplo simple. 

Implementación de Transición de elementos compartidos en Android

En este ejemplo, crearemos una aplicación simple donde crearemos dos actividades con ImageView e implementaremos una animación de transición entre estas dos actividades. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java 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 al archivo activity_main.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main.xml .

<?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=".MainActivity">
 
    <!--Transition name is a simple
        string that will be given
        to two views between which
         we are applying transition-->
 
    <!--Transition name should be same
         for both the views in which we
        are making transition-->
     
    <ImageView
        android:id="@+id/image"
        android:layout_width="180dp"
        android:layout_height="100dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="120dp"
        android:contentDescription="@string/image_desc"
        android:scaleType="centerCrop"
        android:src="@drawable/gfgimage"
        android:transitionName="fade" />
 
</RelativeLayout>

Paso 4: trabajar con el archivo activity_main2.xml

Vaya al archivo activity_main2.xml y consulte el siguiente código. A continuación se muestra el código para el archivo activity_main2.xml .

<?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">
 
    <!--Transition name is same
        as that we have used
        in previous imageview-->
 
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="250dp"
        android:layout_alignParentTop="true"
        android:contentDescription="@string/image_desc"
        android:scaleType="centerCrop"
        android:src="@drawable/gfgimage"
        android:transitionName="fade" />
     
</RelativeLayout>

Paso 5: trabajar con el archivo MainActivity2.java

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

import android.os.Build;
import android.os.Bundle;
import android.transition.Fade;
import android.view.View;
 
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
 
public class MainActivity2 extends AppCompatActivity {
 
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main2);
         
        // here we are initializing
        // fade animation.
        Fade fade = new Fade();
        View decor = getWindow().getDecorView();
         
        // here also we are excluding status bar,
        // action bar and navigation bar from animation.
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container), true);
        fade.excludeTarget(android.R.id.statusBarBackground, true);
        fade.excludeTarget(android.R.id.navigationBarBackground, true);
         
        // below methods are used for adding
        // enter and exit transition.
        getWindow().setEnterTransition(fade);
        getWindow().setExitTransition(fade);
    }
}

Paso 6: trabajar con el archivo MainActivity.java

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

import android.content.Intent;
import android.os.Build;
import android.os.Bundle;
import android.transition.Fade;
import android.view.View;
import android.widget.ImageView;
 
import androidx.annotation.RequiresApi;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.app.ActivityOptionsCompat;
import androidx.core.view.ViewCompat;
 
public class MainActivity extends AppCompatActivity {
 
    @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
 
        // we are adding fade animation
        // between two imageviews.
        Fade fade = new Fade();
        View decor = getWindow().getDecorView();
         
        // below 3 lines of code is to exclude
        // action bar,title bar and navigation
        // bar from animation.
        fade.excludeTarget(decor.findViewById(R.id.action_bar_container), true);
        fade.excludeTarget(android.R.id.statusBarBackground, true);
        fade.excludeTarget(android.R.id.navigationBarBackground, true);
         
        // we are adding fade animation
        // for enter transition.
        getWindow().setEnterTransition(fade);
         
        // we are also setting fade
        // animation for exit transition.
        getWindow().setExitTransition(fade);
         
        // initializing our imageview.
        final ImageView imageView = findViewById(R.id.image);
 
        // setting on click listener for our imageview.
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on image click we are opening new activity
                // and adding animation between this two activities.
                Intent intent = new Intent(MainActivity.this, MainActivity2.class);
                // below method is used to make scene transition
                // and adding fade animation in it.
                ActivityOptionsCompat options = ActivityOptionsCompat.makeSceneTransitionAnimation(
                        MainActivity.this, imageView, ViewCompat.getTransitionName(imageView));
                // starting our activity with below method.
                startActivity(intent, options.toBundle());
            }
        });
    }
}

Producción:

Consulte el código de la aplicación: https://github.com/ChaitanyaMunje/GFGImageSlider/tree/SharedElementTransition