¿Cómo agregar animación CrossFade entre actividades en Android?

Las animaciones de Android son el objeto que se puede decir que es el factor más importante para una mejor interfaz de usuario y experiencia de usuario en una aplicación de Android. En una amplia serie de artículos sobre GeeksforGeeks para hacer una mejor UI, UX de una aplicación, este también será el indicado. En este artículo, sabremos cómo agregar una animación de fundido cruzado entre dos actividades en Android. El significado de CrossFading aquí es una transición suave entre dos actividades. Por lo general, significa el desvanecimiento de uno, mientras se desvanece en otra actividad. Crea una transición fluida y, durante un breve período de tiempo, los usuarios tendrán una idea de ambas actividades. Aquí hay una muestra del mismo tipo de animación que vamos a crear entre actividades.

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 . Puede elegir el idioma según su elección porque aquí le damos el código para kotlin y java .

Paso 2:

<resources>
    <string name="app_name">GFG App</string>
    <string name="go_to_main_activity">GO TO MAIN ACTIVITY</string>
    <string name="go_to_second_activity">GO TO SECOND ACTIVITY</string>
</resources>

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#00AC28</color>
    <color name="colorPrimaryDark">#09d639</color>
    <color name="colorAccent">#03DAC5</color>
</resources>

Paso 3: crea otra actividad vacía

Asegúrese de haber seleccionado Android para la estructura del proyecto en la esquina superior izquierda de la pantalla. Luego navegue a java/your_package_name . Ahora, haga clic derecho en el nombre de su paquete y seleccione nuevo aquí, y seleccione actividad y actividad vacía.

Solo dale un nombre de tu elección como si le estuviéramos dando SecondActivity y haz clic en finalizar.

Paso 4: trabajar con los archivos de diseño

Vaya a res/layout/activity_second y pegue el siguiente código. Aquí, estamos usando un ConstraintLayout con un Botón para cambiar a otra actividad. 

actividad_segundo.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"
    android:background="#09d639"
    tools:context=".SecondActivity">
  
    <Button
        android:id="@+id/btnSecond"
        android:layout_width="130dp"
        android:layout_height="70dp"
        android:background="#fff"
        android:onClick="goToMainActivity"
        android:text="@string/go_to_main_activity"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
  
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="AN GFG APP WAS MADE DURING TUTORIAL"
        android:textColor="@android:color/white"
        android:textSize="19sp"
        android:textStyle="bold"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/btnSecond" />
      
</androidx.constraintlayout.widget.ConstraintLayout>

Además, navegue hasta res/layout/activity_main y elimine todo el código predeterminado y pegue el siguiente código. actividad_principal.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=".SecondActivity">
  
    <Button
        android:id="@+id/btnFirst"
        android:layout_width="130dp"
        android:layout_height="70dp"
        android:onClick="goToSecondActivity"
        android:text="@string/go_to_second_activity"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:ignore="OnClick" />
      
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 5: Trabajando con los archivos anim

Consulte Cómo crear una carpeta Anim y un archivo de animación en Android Studio para crear la carpeta anim y el archivo de animación. Hemos creado dos archivos de animación y los nombramos fade_in y fade_out. Ahora, elimine todo el código predeterminado de fade_in y pegue el código a continuación. fade_in.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400"
    android:fromAlpha="0.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="1.0" />

fade_out.xml

<?xml version="1.0" encoding="utf-8"?>
<alpha 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="700"
    android:fillAfter="true"
    android:fromAlpha="1.0"
    android:interpolator="@android:anim/accelerate_interpolator"
    android:toAlpha="0.0" />

Paso 6: trabajar con el archivo MainActivity

Simplemente agregue el siguiente código en su clase MainActivity después del método onCreate() . Este es el código para ir a SecondActivity y estamos configurando la animación entre ellos.

public void goToSecondActivity (View view) {
        Intent intent = new Intent(MainActivity.this, SecondActivity.class);
        startActivity(intent);
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
    }

fun goToSecondActivity(view: View?) {
        val intent = Intent(this@MainActivity, SecondActivity::class.java)
        startActivity(intent)
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out)
    }

Paso 7: trabajar con el archivo SecondActivity

Además, agregue el siguiente código en su SecondActivity después del método onCreate() .

public void goToMainActivity (View view) {
        Intent intent = new Intent(SecondActivity.this, MainActivity.class);
        startActivity(intent);
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
    }

fun goToMainActivity(view: View?) {
        val intent = Intent(this@SecondActivity, MainActivity::class.java)
        startActivity(intent)
        overridePendingTransition(R.anim.fade_in, R.anim.fade_out)
    }

Producción:

Enlace GitHub: https://github.com/shivamparashar165/crossfade_android_anim