Animaciones entre Activities

«-¿Cómo hago para animar el cambio de clase? -¿Cómo creo animaciones entre Intents? -¿Cómo….?» No paro de recibir e-mails, privados en Twitter y Facebook preguntándomelo. Querido programador, hoy vengo a calmar tu ansia, y a enseñarte a crear animaciones entre Activities de manera sencilla utilizando una librería. ¿Empezamos?

Para este ejemplo crearás un nuevo proyecto en Android Studio, un proyecto sencillo que constará de 2 (o quizás 3) Activities.

Crea el proyecto seleccionando una Activity vacía, ya que para el ejemplo no vamos a centrarnos en la apariencia. En la siguiente pantalla dale un nombre al proyecto y un nombre al paquete. En lenguaje asegurate de tener seleccionada la opción «JAVA».

Una vez el proyecto esté preparado para empezar a escribir en él, deberás añadir la siguiente línea al archivo build.gradle(app):

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

De manera que te debería quedar así:

Por otro lado, en el archivo build.gradle(Project), deberás añadir la dependencia de jetpack.io en «allprojects». Para ello copia y pega la siguiente línea en el sitio indicado:

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

Debería quedarte así:

Bien, ahora puedes volver al archivo build.gradle(app) y pulsar en «Sync now» arriba a la derecha. Para que el proyecto descargue las nuevas dependencias que le acabas de añadir.

Ahora sí, ya lo tienes todo listo para empezar a escribir. Primero de todo, en nuestro activity vamos a necesitar un botón. Será el botón mágico que mostrará una segunda Activity. Así que para crearlo, vas a abrir el archivo «activity_main.xml» y vas a añadir debajo del «TextView» el siguiente código:

<Button
        android:id="@+id/btn_abrir"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Abrir Activity"
        app:layout_constraintEnd_toEndOf="@+id/textView"
        app:layout_constraintStart_toStartOf="@+id/textView"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

Esto generará un botón en tu interfaz y lo situará justo debajo del textview que viene por defecto. Debería de quedarte así:

Ya tienes el botón que abrirá el nuevo activity, ahora solo falta crear el segundo activity. Para ello debes ir al menú «File>New>Activity>Basic Activity», seguidamente verás una ventana igual a la que viste al crear el primer Activity. Aquí en principio no se debería tocar nada, solo dar clic en «Finish».

Bien, ya tienes el primer Activity con el botón y el segundo Activity creado. Ahora toca darle función a ese botón.

Antes de nada, es importante que para utilizar la librería que has añadido previamente, hagas un import en la parte superior del archivo. Añade la siguiente línea después del último Import que tengas:

import static maes.tech.intentanim.CustomIntent.customType;

En el archivo MainActivity.java tendrás que crear diferentes variables y objetos:

    Intent i;
    private Button _btn_abrir;
    private String animacion_1 = "left-to-right";
    private String animacion_2 = "right-to-left";
    private String animacion_3 = "bottom-to-up";
    private String animacion_4 = "up-to-bottom";
    private String animacion_5 = "fadein-to-fadeout";
    private String animacion_6 = "rotateout-to-rotatein";

Como ves, simplemente declaras un Intent que te permitirá pasar de un Activity a otro, el botón «_btn_abrir» para que puedas darle función al botón, y una lista de 6 Strings que te servirán para seleccionar un tipo de animación u otra.

En el método onCreate de MainActivity copia y pega lo siguiente:

 i = new Intent(MainActivity.this, Main2Activity.class);

        _btn_abrir = findViewById(R.id.btn_abrir);
        _btn_abrir.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(i);
                customType(MainActivity.this,animacion_1);
            }
        });

Voy a repasar línea por línea las funciones. Primero de todo se da el valor a «i», creando el Intent y pasándole como primer parámetro el Context de nuestro Activity actual, y como segundo parámetro el Activity que se abrirá.

En la segunda línea, asignamos el botón de nuestra interfaz a la variable «_btn_abrir» para poder manipularlo. Seguidamente creamos el método «.setOnClickListener()», con el que controlaremos el evento que se produce al pulsarlo.

Una vez ya dentro del onClick(), con «startActivity(i)» se iniciaría la transición, pero tú añadiras la función «customType()», que es propia de la librería que has importado al principio. A esta función hay que pasarle 2 parámetros, el primero es el Contexto del activity actual, y el segundo será una de las 6 variables tipo String que has declarado al principio del archivo.

Prueba a compilar el código y verás el resultado. Si has utilizado «animacion_1» en la función customType() deberías ver algo parecido a esto:

Como habrás podido apreciar, en mi segundo Activity aparece la «flechita» para volver atrás. ¿Por qué a tí no te sale? Esto es debido a que, cuando creabas el segundo Activity, había una opción para determinar si el Activity que estás creando es «hijo» de alguno ya creado. La opción en concreto es «Hierarchical Parent». Puedes repetir el proceso de crear un nuevo Activity, y márcale el Activity «Padre» pulsando en los 3 puntitos que aparecen al lado derecho.

¿Que te ha parecido este artículo sobre animaciones entre Activities? Si te ayudado no dudes en compartirlo, y si tienes alguna duda puedes dejarme un comentario más abajo o escribirme en Twitter @mscdroidlabs

Te dejo el código del MainActivity completo:

package es.mscdroidlabs.animacionesintents;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import static maes.tech.intentanim.CustomIntent.customType;

public class MainActivity extends AppCompatActivity {

    Intent i;
    private Button _btn_abrir;
    private String animacion_1 = "left-to-right";
    private String animacion_2 = "right-to-left";
    private String animacion_3 = "bottom-to-up";
    private String animacion_4 = "up-to-bottom";
    private String animacion_5 = "fadein-to-fadeout";
    private String animacion_6 = "rotateout-to-rotatein";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        i = new Intent(MainActivity.this, Main3Activity.class);

        _btn_abrir = findViewById(R.id.btn_abrir);
        _btn_abrir.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                startActivity(i);
                customType(MainActivity.this,animacion_1);
            }
        });
    }
}

Mario Camí

Desarrollador de aplicaciones Android. Amante de todo lo Open Source, de los videojuegos y nuevas tecnologías. En mi tiempo libre comparto todo lo aprendido y lo que aprendo en el desarrollo de Android a modo de artículo en el blog. La información nos hará libres!

También te podría gustar...