Kotlin Android Activity Transition Animation Examples

Ejemplos de animaciones de transición de actividades Android paso a paso tanto en Kotlin como en Java.

Para crear una aplicación moderna, es posible que desee utilizar animaciones de transición en su actividad. Android Framework proporciona la capacidad de inducir transiciones animadas elegantes al abrir o salir de una actividad. En este artículo queremos ver cómo incluir dichas transiciones.

Ejemplo 1: Kotlin Android - Transiciones de actividad sin ninguna librería

Veamos un ejemplo de cómo crear transiciones animadas sin usar una librería de terceros.

Paso 1: Dependencias

No se necesita ninguna dependencia de terceros.

Paso 2: Animaciones

El siguiente paso es escribir estas animaciones en XML e incluirlas en un directorio de recursos llamado anim. Si dicho directorio no existe en tu aplicación, entonces créalo.

Después de crear el directorio anim añadiremos los siguientes archivos de animación en ellos:

slide_down.xml

Luego añadimos el siguiente código:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    <translate
        android:duration="50"
        android:fromYDelta="0%p"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toYDelta="100%p" />

</set>

slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="-100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

deslizar_en_la_derecha.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="100%p" android:toXDelta="0"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="-100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>

<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate android:fromXDelta="0" android:toXDelta="100%p"
        android:duration="@android:integer/config_mediumAnimTime"/>
</set>

slide_up.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:duration="100"
        android:fromYDelta="100%"
        android:interpolator="@android:anim/accelerate_interpolator"
        android:toXDelta="0" />

</set>

Paso 3: Estilos

En el tercer paso tenemos que aplicar las animaciones a las actividades. Sin embargo, esto se hace de forma declarativa a nivel de tema en lugar de a nivel de actividad

Así que en el archivo styles.xml crear un estilo como sigue:

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

Luego aplícalo al tema de la siguiente manera:

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

Aquí está el styles.xml completo:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowAnimationStyle">@style/CustomActivityAnimation</item>
    </style>

    <style name="CustomActivityAnimation" parent="@android:style/Animation.Activity">
        <item name="android:activityOpenEnterAnimation">@anim/slide_in_right</item>
        <item name="android:activityOpenExitAnimation">@anim/slide_out_left</item>
        <item name="android:activityCloseEnterAnimation">@anim/slide_in_left</item>
        <item name="android:activityCloseExitAnimation">@anim/slide_out_right</item>
    </style>

</resources>

Paso 4: Actividades

Tendremos tres actividades:

ActividadA
ActividadB
ActividadC

ActividadA.kt

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityA : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_a)
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }
}

ActividadB

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityB : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_b)
    }

    fun intentC(view: View?) {
        startActivity(Intent(this, ActivityC::class.java))
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }
}

ActividadC

package info.camposha.activity_transitions

import android.content.Intent
import android.os.Bundle
import android.view.View
import androidx.appcompat.app.AppCompatActivity

class ActivityC : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_c)
    }

    fun intentA(view: View?) {
        startActivity(Intent(this, ActivityA::class.java))
    }

    fun intentB(view: View?) {
        startActivity(Intent(this, ActivityB::class.java))
    }
}

Ese es todo el código kotlin que escribimos.

Paso 5: Diseños

Encuentra los códigos de los layouts en la descarga del código fuente.

Paso 6: Ejecutar

Ejecuta el proyecto y obtendrás lo siguiente:

Ejemplo de Transiciones de Actividad](https://github.com/Oclemy/ActivityTransitions/raw/master/MsActivityTransition.gif)

Paso 7: Descarga

Descargue el código fuente desde aquí.

Ejemplos con Bibliotecas

Para hacer tu aplicación más moderna, puedes incluir animaciones de transición entre actividades. Hay diferentes maneras de hacerlo y en este artículo queremos examinarlas.

(a). Usar la librería de animación Intent

Esta librería es de lo más sencilla. Puedes incluir fácilmente diferentes tipos de animaciones en tus actividades.

Paso 1: Instalación

Empieza por instalar la librería. Está alojada en jitpack:

allprojects {
    repositories {
        ...
        maven { url 'https://jitpack.io' }
    }
}

Luego agrega la declaración de implementación como una dependencia:

implementation 'com.github.hajiyevelnur92:intentanimation:1.0'

Paso 2: Código

Aquí está el código:

import static maes.tech.intentanim.CustomIntent.customType;
//MainActivity or any activity name
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //.....//

        //here is library
        customType(MainActivity.this,"here is animation name");
}
   //Here are the animations
*left-to-right
*right-to-left
*bottom-to-up
*up-to-bottom
*fadein-to-fadeout
*rotateout-to-rotatein

Enlaces

Descargue el código completo aquí.

(b). Transiciones con Bungee

Bungee es una librería ligera para Android que permite realizar animaciones de transición de actividades.

Esta solución soporta un SDK mínimo de 16 (Android Jellybean 4.1).

Bungee tiene 15 animaciones de transición de actividad diferentes:

dividir
encoger
tarjeta
entrar y salir
deslizar a la izquierda
deslizar a la derecha
deslizar hacia arriba
deslizar hacia abajo
deslizar a la izquierda
deslizar a la derecha
zoom
desvanecer
girar
diagonal
molino de viento

Puedes descargar la aplicación de demostración aquí para comprobarla en acción.

Paso 1: Instalarlo

Para instalarlo empieza registrando jitpack como url de repositorio maven en el build.gradle de tu carpeta de proyecto:

allprojects {
        repositories {
            ...
            maven { url 'https://jitpack.io' }
        }
    }

Luego en el build.gradle de tu carpeta de aplicaciones declara la dependencia como una declaración de implementación:

dependencies {
            implementation 'com.github.Binary-Finery:Bungee:3.0'
    }

Paso 2: Escribir el código

Sólo se necesita una línea de código para utilizar Bungee. Por ejemplo en este caso se dispara una animación de zoom:

startActivity(new Intent(context, TargetActivity.class));
Bungee.zoom(context);  //fire the zoom animation

O digamos que quieres disparar la animación cuando se presiona el botón de retroceso:

@Override
public void onBackPressed(){
  super.onBackPressed();
  Bungee.slideLeft(context); //fire the slide left animation
}

Aquí están todos los métodos disponibles:

Bungee.split(context);
Bungee.shrink(content);
Bungee.card(context);
Bungee.inAndOut(context);
Bungee.swipeLeft(context);
Bungee.swiperRight(context);
Bungee.slideLeft(context);
Bungee.slideRight(context);
Bungee.slideDown(context);
Bungee.slideUp(context);
Bungee.fade(context);
Bungee.zoom(context);
Bungee.windmill(context);
Bungee.diagonal(context);
Bungee.spin(context);

Ejecutar

Ejecuta el proyecto.

Referencia

Aquí están los enlaces de referencia:

---

Ejemplo 1: Kotlin Android - Transiciones de actividad sin ninguna librería​

Paso 1: Dependencias​

Paso 2: Animaciones​

Paso 3: Estilos​

Paso 4: Actividades​

Paso 5: Diseños​

Paso 6: Ejecutar​

Ejemplo de Transiciones de Actividad](https://github.com/Oclemy/ActivityTransitions/raw/master/MsActivityTransition.gif)​

Paso 7: Descarga​

Ejemplos con Bibliotecas

(a). Usar la librería de animación Intent​

Paso 1: Instalación​

Paso 2: Código​

Enlaces​

(b). Transiciones con Bungee​

Paso 1: Instalarlo​

Paso 2: Escribir el código​

Ejecutar​

Referencia​