Animación transiciones entre activities






En esta ocasión veremos una animación que hay entre los activities.
  • alpha: Opacidad del View, desde 0 (transparente) hasta 1. Lo combinaremos con las demás animaciones para conseguir efectos vistosos.
  • scale: cambia el tamaño con respecto a un punto de referencia. Lo usaremos para simular efectos de zoom.
  • translate: desplazamiento
Recursos que utilizado

Desplazamiento hacia la izquierda

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

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="100%p"
    android:toXDelta="0"
    android:interpolator="@android:anim/linear_interpolator" />

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

<translate
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="0"
    android:toXDelta="-100%p"
    android:interpolator="@android:anim/linear_interpolator" />

en java debajo del startActiviy(X);
 overridePendingTransition(R.anim.left_in, R.anim.left_out);

por ejemplo
Intent i = new Intent(getApplicationContext(), ListarUnCircuito.class);       
startActivity(i);
overridePendingTransition(R.anim.left_in, R.anim.left_out);



Desplazamiento hacia la derecha
right_out.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="0"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXDelta="100%p" />

right_in.xml
<?xml version="1.0" encoding="utf-8"?>
<translate xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="500"
    android:fromXDelta="-100%p"
    android:interpolator="@android:anim/linear_interpolator"
    android:toXDelta="0" />



Zoom forward

zoom_forward_out.xml
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:zAdjustment="top" >
 
    <scale
        android:duration="600"
        android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale=".7"
        android:toYScale=".7" />
 
    <alpha
        android:duration="600"
        android:fromAlpha="1.0"
        android:toAlpha="0" />
 
</set>

zoom_forward_in.xml
?xml version="1.0" encoding="UTF-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fromXScale="1.5"
    android:fromYScale="1.5"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:pivotX="50%p"
    android:pivotY="50%p"
    android:toXScale="1.0"
    android:toYScale="1.0" />



Zoom back

zoom_back_out.xml
<?xml version="1.0" encoding="UTF-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:zAdjustment="top" >
 
    <scale       
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%p"
        android:pivotY="50%p"
        android:toXScale="0.7"
        android:toYScale="0.7"
        android:duration="600"/>
 
    <alpha       
        android:fromAlpha="1.0"
        android:toAlpha="0"
        android:duration="600"/>
 
</set>

zoom_back_in.xml
<?xml version="1.0" encoding="UTF-8"?>
<scale xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="600"
    android:fromXScale="0.7"
    android:fromYScale="0.7"
    android:interpolator="@android:anim/decelerate_interpolator"
    android:pivotX="50%p"
    android:pivotY="50%p"
    android:toXScale="1"
    android:toYScale="1" />



Fade-Desvanecer

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

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


Para poder acceder a las vistas/controles de un list view desde un Fragment, ya que arroja NullPointerException, o el otro error de que el evento setOnItemLongClickListener no responde), simplemente tienen que agregar una propiedad al list_row:

    android:descendantFocusability="blocksDescendants"

Con eso ya pueden manipular los eventos y sus vistas sin problema. (Gracias a: Liliana Loaiza Pulgarín)

18 comentarios:

  1. ¿Qué tal amigo?, eres la onda, te la sabes de más en Android.
    Me gustaría que hicieras un tutoria explicando este efectito, es que ultimamente he visto que Lollipop ya da efectos mucho más eleborados, no soy programador, y sé lo básico de Android y Java, no soy programador, peor soy apasionado de la apps, saludos, y de antemano GRACIAS....
    https://developer.android.com/training/material/animations.html#Touch

    ResponderEliminar
  2. Hola, he probado y todo sale perfecto, salvo una cosa. En modo "lanscape", la transición de derecha a izquierda es perfecta, pero la de izquierda a derecha arrastra una especie de barra blanca a la derecha del activiy. ¿a qué puede ser debido?

    ResponderEliminar
  3. ¡Hola!

    Estos efectos me gustaron y me ayudaron bastante, muchas gracias.

    Me tomé la libertad de combinarlos; es decir poner el "left" con el "zoomback", el "right" con el "left", etc. y se me dio bastante bien, no se si ya se te habría ocurrido.

    ¡Saludos!

    ResponderEliminar
    Respuestas
    1. buenísimo ramón, gracias por comentar..
      Si lo he prbado brevemente, quedan bastante bien

      Eliminar
    2. Gracias, si quedan bien jejeje... algo que te quiero sugerir es un botón de búsqueda en tu Blog.

      ¡Saludos!

      Eliminar
  4. Pues no se porque pero ami no me va ningun efecto. Lo he probado en la maquina virtual 4.1 y en mi android 5.1 y nada.

    ResponderEliminar
    Respuestas
    1. Acabo de comprobar que si me funciona pero solo aplicandolo desde un botón. Yo lo que quiero es que se cambie automático por ejemplo: Enciendes la aplicación, te sale una pantalla de bienvenida y a los pocos segundos se desvanece llevandote al Main Activity.

      Eliminar
    2. Vale ya he encontrado la solución para mi problema. Lo dejo por aquí por si ha alguien le interesa.

      import android.content.Intent;
      import android.os.Bundle;
      import android.os.Handler;
      import android.support.v7.app.AppCompatActivity;
      import android.view.View;

      import es.talki.presentacion.R;

      public class MainActivity extends AppCompatActivity {

      View v;

      @Override
      protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_first_screen);
      Handler handler = new Handler();
      handler.postDelayed(new Runnable() {
      public void run() {
      changetoapp(v);
      // Actions to do after 10 seconds
      }
      }, 2000);

      }

      public void changetoapp(View v){
      startActivity(new Intent(this, Main2Activity.class));
      overridePendingTransition(R.anim.fade_in, R.anim.fade_out);
      finish();
      }
      }

      El handler lo que hace es que se haga una espera de 2 segundos y luego pase a la siguiente activity.

      Eliminar
    3. Muchas gracias amigo, me sirvio mucho :D

      Eliminar
    4. Gracias, no todos los heroes llevan capa. ToT

      Eliminar
  5. Amigo Quisiera Que Hicieras Un Tutorial Que Muestre Un Boton De Entrada a la app

    ResponderEliminar
  6. Gracias me ha servido la animación, pero sabes como hacer que se vea el mismo efecto al apretar el botón de volver???

    ResponderEliminar