Ejemplo con Layout Animation Y Android

Hola que tal, en esta ocasión quiero compartir un pequeño ejemplo sobre como Animar fácilmente vistas en un layout usando Android. Este pequeño ejemplo esta basado en el articulo que publico Chet Haase en Androide Dev Bites. En realidad el ejemplo es muy sencillo y tratare de explicarlo lo mejor posible extendiendo un poco mas para hacerlo un poco mas atractivo. Con esto espero poder hacer una serie de artículos acerca de animaciones en Android.

Con la entrada de la android API versión 11 (Android 3.0) la clase LayoutTransition nos permite ejecutar animaciones cuando haya algun cambio en el layout de un contenedor. Como puede ser un LinearLayout, RelativeLayout, etc.

Muy bien vayamos al ejemplo. Lo primero que tenemos es un simple layout con dos botones y un contenedor. El contenido de nuestro main_layout xml es como el que sigue:

Es muy simple, nuestro main layout es LinearLayout con orientación vertical. Luego un botón para agregar una vista (Add View), un botón para remover una vista (Remove View) y al final otro LinearLayout el cual tomara el resto de la pantalla para el también con orientación vertical. El punto interesante en este ultimo contenedor es la propiedad android:animateLayoutChanges="true"; esta propiedad es la que nos dirá que cada vez que haya un cambio en este layout estos cambios deberán de animarse. Por defecto solo los cambios de entrada y salida de vistas serán animadas pero eso lo arreglaremos mas tarde.

Ahora si en nuestra actividad principal


public class MainActivity extends Activity {
LinearLayout container = null;
private static LayoutParams mParams = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
   ViewGroup.LayoutParams.WRAP_CONTENT);
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
container = (LinearLayout) findViewById(R.id.layout_container);
}
public void btnAddViewClicked(View view){
 Button btn = new Button(view.getContext());
 btn.setLayoutParams(mParams); btn.setText("Useless Button");
container.addView(btn,0);
}
public void btnRemoveViewClicked(View view){
if (container != null && container.getChildCount() > 0){
container.removeViewAt(
(int)(Math.random()  * (container.getChildCount())) 
);
}else{
Toast.makeText(view.getContext(), "No views to remove", Toast.LENGTH_LONG).show();
}
}
}

Lo primero que haremos en onCreate sera establecer nuestro xml como el contenido y luego vamos a retraer el contenedor que definimos para almacenarlo en la variable container. Este objeto container ya tiene las animaciones establecidas. Luego los dos métodos para agregar y eliminar vistas, como lo definimos en nuestro xml cuando el botón Add View es presionado el metodo btnAddViewClicked se ejecuta; en este método lo que haremos sera crear un nuevo botón  asignarle las propiedades y el texto correspondiente y luego agregarlo al contenedor con el método container.addView.

De la misma manera el método btnRemoveViewClicked sera ejecutado cuando el botón Remove View es presionado; este método lo único que se encarga es de remover una vista del contenedor de una posición alternativa si el contenedor ni tiene ninguna vista asociada (esto es su childCount no es mayor que 4) simplemente mostramos un mensaje con Toast.

Y eso es todo como pueden ver no tenemos ningún código extra sobre animaciones, efectos, etc. El sistema se encargara de hacer las animaciones automáticamente al momento de que se agreguen y remuevan vistas. Como pueden ver es un ejemplo muy sencillo pero nos ayudara a darle un poco mas de presentación a nuestras aplicaciones.

Aquí abajo les dejo una muestra de como se comporta la aplicación y en un post futuro veremos como extender esta aplicación para hacerla mas dinámica. Como siempre pueden obtener el codigo fuente de este y otros proyectos visitando mi perfil de github.

P.S estoy extrayendo el vídeo para que vean como se ve pero aun estoy probando distintas apps para screencast. En cuanto lo tenga actualizo el post. (No creo que sea de mucha ayuda si subo fotos :P). Saludos

Update: Aqui les dejo el video, no muy buena calidad pero pasa.