Cómo hacer animaciones en Android: Elementos de UI

Hola a todos, en éste tutorial voy a enseñarles cómo hacer animaciones en Android, para los elementos de UI de una forma sencilla. En muchas ocasiones, como desarrolladores para móviles requerimos crear animaciones como parte de los requerimentos del cliente, y en ocasiones éstos efectos pueden ser un dolor de cabeza, ya que la animación puede contener muchas más líneas de código que el mismo elemento de UI.

Para facilitar la tarea de crear animaciones sobre elementos de UI tenemos una biblioteca disponible en Github llamada Android UI libraries de Ramotion, con la cual podemos realizar animaciones complejas para UI. Su uso está definido a través de una licencia MIT.

Creación de animaciones para elementos de UI

A través de la biblioteca Android UI libraries, podemos crear una diversidad de elementos de UI, los cuáles podemos implementar directamente dentro de nuestra aplicación. Éstos elementos se encuentran en lenguaje Java para Android.

Algunos de los efectos disponibles, así como algunas de las transiciones ofrecidas por Ramotion, son las siguientes:

Garland View

Las Garland View son transiciones agradables entre múltiples listas de contenidos. Es compatible con versiones de Android 4.4 en adelante.

Compilación

compile 'com.ramotion.garlandview:garland-view:0.3.3'

Ejemplo de uso: https://github.com/Ramotion/garland-view-android

Folding Cell

Podemos expandir contenido de una celda con animación, tal y como se despliega una carpeta contenedora. Su compatibilidad es con versiones de Android 4.0 y superiores.

Compilación

'com.ramotion.foldingcell:folding-cell:1.2.3'

Implementación

1- Creamos un elemento FoldingCell con algunos hijos FrameLayout:

<com.ramotion.foldingcell.FoldingCell
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/folding_cell"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <FrameLayout
            android:id="@+id/cell_content_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_dark"
            android:visibility="gone">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="250dp" />
        </FrameLayout>

        <FrameLayout
            android:id="@+id/cell_title_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="100dp"
                android:background="@android:color/holo_blue_dark" />
        </FrameLayout>

</com.ramotion.foldingcell.FoldingCell>

2- En el elemento raíz del FoldingCell agregamos

android:clipChildren="false"
android:clipToPadding="false"

3- Agregamos el OnClickListener para disparar la animación sobre el elemento.

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

    // get our folding cell
    final FoldingCell fc = (FoldingCell) findViewById(R.id.folding_cell);

    // attach click listener to folding cell
    fc.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            fc.toggle(false);
        }
    });
}

Prueba de funcionamiento

El funcionamiento en vivo del FoldingCell, lo podemos ver desde la aplicación demo, o bien podemos implementarla directamente en nuestro proyecto. Además en la documentación podemos personalizar nuestro elemento. La visualización debe similar a la siguiente:

Otros elementos de UI

Ramotion contiene otros elementos de UI, fáciles de personalizar y altamente adaptables a tu proyecto, cubriendo así las espectativas de tu cliente o del desarrollo que estés realizando.

En otro tutorial os mostraré algunos elementos adicionales de UI que podrían beneficiarte en tu proyecto. Los contenidos que publicamos buscamos que sean con licencia MIT para que puedas tener derechos amplios para el objeto de tu desarrollo.

Lecturas y tutoriales recomendados para Android

Síguenos, y aprende Kotlin por medio de nuestros tutoriales. Aquí te damos algunas recomendaciones para aprender Kotlin que podrían ser de tu interés.

Tutorial de Arrays en Kotlin

Creación de entidades en Kotlin

Solicitud http con Retrofit, Reactivex y Dagger en Kotlin