Creando un carrusel con MotionLayout

Carousel es un MotionHelper que nos ayuda a mover vistas en forma de carrusel fácilmente.

Tercer post sobre MotionLayout, puedes leer el primer articulo aquí:
Tinder MotionLayout , y el segundo aquí: Circular carousel with MotionLayout.

Este post tiene algo especial para mí, ya que voy a mostrarles uno de mis helpers favoritos de la librería. Y ademas, es donde he metido algunas lineas de código para agregar un feature que mas adelante les mostraré.

En este caso, vamos a ir armando paso a paso el siguiente carrusel:

Agregamos MotionLayout a nuestro proyecto

Primero agregamos nuestra versión de ConstraintLayout donde podremos utilizar el Carousel:

implementation ‘androidx.constraintlayout:constraintlayout:2.1.0-alpha2

Lo primero que vamos a hacer es agregar nuestras MaterialCardView a nuestro MotionLayout:

En todas nuestras MaterialCardViews tenemos la rotación sobre su mismo eje (android:rotation=”45” 45º, 55º, 65º, 75º), y la ubicación en la derecha de nuestro layout.

Conociendo Carousel helper

Ahora, vamos a agregar nuestro Carousel :

Vamos a repasar que referencias necesita nuestro Carousel para funcionar correctamente.

app:constraint_referenced_ids : Referencia a todos nuestras vistas que serán animadas en nuestras transiciones.

app:carousel_firstView : Referencia a nuestra primer vista donde comienza el carrusel.

app:carousel_previousState : id de nuestras constraintSet del estado previo.

app:carousel_nextState : id de nuestras constraintSet del siguiente estado.

app:forwardTransition : id de transición entre start -> next.

app:backwardTransition : id de transición entre start -> previous.

Creando nuestros Transitions

Vamos a nuestro archivo donde tenemos nuestro MotionScene y agregamos nuestras dos Transitions que necesita nuestro helper (fordward y backward).

Creamos nuestros ConstraintSet

Primero creamos nuestro ConstraintSet previous:

En nuestro ConstraintSet previous lo que hemos cambiado es la rotación de nuestras MaterialCardViews y a nuestra surface3 le cambiamos su alpha=0 .

Ahora creamos nuestro ConstraintSet start :

¿Por qué esta vacío el ConstraintSet start? 🤔

Porque no cambiaremos ningún atributo ni restricción de nuestras MaterialCardView que tenemos en nuestro MotionLayout, entonces, las transiciones tanto start -> next y start ->previous iniciaran con las restricciones y atributos que ya tienen en el layout💡.

Ahora si, nuestro ultimo ConstraintSet next :

En nuestro ConstraintSet next lo que hemos cambiado es la rotación de nuestras MaterialCardViews y a nuestra surface4 le cambiamos su alpha=1 .

MotionEditor

Y así es como se ve nuestra transición hacia adelante en el MotionEditor:

Nuestra transición hacia atras:

Lo ultimo para sumar, el Carousel adapter:

carousel.setAdapter(new Carousel.Adapter() {
        @Override
        public int count() {
            // Necesitamos devolver la cantidad de items que tenemos en el carrusel.
        }

        @Override
        public void populate(View view, int index) {
            // Necesitamos implementar esto para completar la vista en el índice indicado
        }

        @Override
        public void onNewItem(int index) {
             // Llamado cuando se establece un elemento
        }
    });

Veamos como resolvimos nuestro carousel de tarjetas y sus colores:

Este es nuestro resultado final:

Carrusel infinito

En esta ultima parte del post les voy a mostrar el feature que sume a este helper de MotionLayout.
He sumado la opción de que el carrusel pueda ser infinito (PR a ConstraintLayout ).
Como veras hasta el momento solo tenemos un carrusel que llega al final de sus items y no sigue “circulando”.
Entonces, solo con agregar app:carousel_infinite="true" (por defecto es false) a nuestro Carousel obtendremos este resultado:

Para finalizar, les comparto un repositorio de GitHub donde podrán ver el código de este ejemplo, también podrás ver otro Carousel y algunos ejemplos de diferentes combinaciones de MotionLayout.

Feliz de compartirles esto y saber que MotionLayout tienen algunas línea de código de mi autoría.

Gracias por su trabajo Nicolas Roard John Hoford.