Diseñando aplicaciones Android con Material Design (II)

Volvemos a la carga con esta sección dedicada a los desarrolladores y los diseñadores. En la anterior entrega de esta sección, vimos conceptos básicos sobre el diseño en Android.

En este caso, vamos a tratar uno de los conceptos más importantes de Material Design: las superficies.

El elemento clave de Material Design: las superficies

Todos sabemos lo que es una superficie, pero este concepto podría parecer no aplicable en el caso del diseño. Pero desde la llegada de Material Design, donde Google intenta que su diseño se base en las características principales de los materiales, este concepto cobra suma importancia.

Tal es así, que todos nuestros diseños estarán montados por diferentes superficies, las cuales pueden estar al mismo nivel de profundidad o a diferentes niveles.

De hecho, jugar con las profundidades debe permitirnos ser capaces de llamar la atención del usuario cuando lo requiramos. De este modo, una superficie que esté más cerca del usuario debería llamarle más la atención que otra que esté más alejada. Sobra decir que si tenemos demasiadas superficies elevadas, entonces el usuario perderá el foco de atención.

En la imagen anterior, podríamos observar como el botón flotante rosa estaría por encima de todo, por lo que el usuario sería lo primero que miraría, seguido de la barra superior, y por último el contenido.

Para jugar con la profundidad, utilizaremos la propiedad android:elevation:

Cuanto mayor sea este valor, más cerca estará del usuario, como era de esperar.

El botón flotante: la superficie más elevada

Como anteriormente hemos comentado, siempre que una pantalla contenga un botón flotante, ésta será la superficie por encima del resto, no pudiendo haber ninguna a su nivel.

Es más, su elevación debería ser normalmente de 6dp, tal como podemos ver en el ejemplo. Por ahora no vamos a entrar en qué color debe llevar dicho botón, cosa que veremos más adelante.

Además para ello necesitaremos utilizar la clase AppCompatActivity en lugar de Activity  si además queremos ser compatibles con versiones anteriores a Android 5.0.

Para poder utilizar estos elementos, necesitaremos actualizar nuestras dependencias incluyendo el paquete com.android.support:appcompat-v7:22.2.0 y com.android.support:design:22.2.0.

Reacción de las superficies al tocarlas

Aparte de todo esto, las superficies también tienen que ser sensibles al contacto con el usuario. Para ello, podemos jugar con animar tanto el propio elemento que forme la superficie, así como expander un poco más incluyendo su padding.

Todo ello lo lograremos jugando con las animaciones, de tal forma que podremos por ejemplo añadir un efecto onda en un botón flotante, o simplemente otro tipo de animación. Para ello utilizaremos selectores y otra serie de atributos como android:stateListAnimator. Todos ellos nos permitirán configurar este tipo de comportamientos en base a las animaciones que nosotros mismos tengamos creadas en Android.

Además, en Android podemos ver otra serie de animaciones típicas en determinadas aplicaciones. Una es el caso de la típica barra superior que es más alta de lo normal, que al hacer scroll hacia abajo se estrella considerablemente, tal como podemos ver en el ejemplo anterior. Para este tipo de comportamiento deberemos utilizar un layout específico: el CoordinatorLayout, el cual nos permite gestionar este tipo de comportamientos, o incluso mantener fijo el alto de la barra en caso de que quisiéramos, por ejemplo, utilizar una imagen fija.

Y con esto cerramos el tema de las superficies, donde simplemente comentamos los fundamentos de qué son las superficies y cómo gestionarlas. El siguiente paso se centrará en cómo gestionar el contenido que vamos a incluir dentro de cada superficie.