En El Androide Libre escribimos muchos artículos dirigidos a los desarrolladores, aquellos que hacen que el ecosistema Android sea cada vez más y más completo.

Y en muchas ocasiones hablamos de diseño y Material Design, pero entendemos que el diseño es suficientemente importante como para dedicarle tiempo. Por ello, os traemos esta sección que nos pretenderá introducir conceptos básicos sobre el diseño y cómo deben aplicarse.

De esta forma, podremos ver cómo aplicar determinados aspectos de la guía que es Material Design, así como entender por qué algunas aplicaciones sacan el mejor partido de la misma.

Comprende el diseño Android mediante 4 conceptos

En esta sección, vamos a recorrer los principales aspectos sobre el diseño en Android utilizando la idea de Material Design, de modo que recorreremos los siguientes conceptos:

  • Superficies
  • Diseño de contenido
  • Movimiento y animaciones
  • Diseño adaptativo

Abordaremos con un artículo cada una de estas secciones, los cuales iremos publicando, pero para ello antes deberemos recordar algunos conceptos básicos.

Los fundamentos de Material Design aplicado a Android

Para poder recorrer los anteriores conceptos, deberemos antes recordar algunos de los fundamentos y conceptos básicos del diseño en Android.

En primer lugar, es clave tener claro la unidad de medida que vamos a utilizar por delante del resto a la hora de ejecutar los diseños, porque debemos ser capaces de optimizar nuestro diseño para cualquier tipo de pantalla. 

Para ello, debemos tener en cuenta que utilizaremos los famosos dpi, que son los píxeles independientes de densidad. Esta unidad presenta como ventaja el que podremos gestionar diferentes tipos de pantalla y sobre todo evitar tener los iconos distorsionados, como podemos ver en el anterior ejemplo. Para ello, deberemos definir bien nuestras imágenes en los diferentes tipos de pantallas (hdpi, xhdpi…).

Además, desde Android 5.0 (API 21), podemos utilizar incluso una particular imagen vectorizada, para evitar este tipo de problemas. Pero como es desde esta versión de Android, deberemos pensar si queremos ser o no compatibles con las anteriores, o cómo gestionarlo.

También debemos tener en cuenta que no todos nuestros drawables serán imágenes tal cual, sino que muchas de ellas irán definidas con ficheros XML, como por ejemplo serán aquellos que admitan diferentes estados. En este caso, no sólo necesitaremos una imagen en varias versiones, sino varias de ellas, y que las mismas tengan sentido visual.

Clarificado esto, deberemos tener en cuenta que a la hora de montar nuestro diseño, utilizaremos elementos View, los cuales presentan 3 elementos en común: content, padding y margin, donde el espacio que ocupa nuestra vista estará formado por el content y el padding (el cual será un espaciado que pertenece a la vista), y el margin hará alusión al espaciado entre elementos.

 

Una vez tenemos claras las vistas, debemos analizar cuáles son los principales patrones de diseño utilizados en Android, entre los cuales destacan:

  • FrameLayout: Este layout nos permite establecer vistas por capas.
  • LinearLayout: En este caso, podremos ir incluyendo elementos en línea (horizontal o vertical)
  • RelativeLayout: Nos permitirá elegir la posición respecto a otros elementos o el propio elemento padre.
  • ScrollView: Esta vista simplemente nos permite poder hacer scroll con el dedo.
  • ViewPager: Es una de las más utilizadas, pues nos permite ver páginas deslizando el dedo. Además, se suele utilizar mucho en conjunto con ScrollView.
  • GridLayout: Este layout nos permite mostrar una tabla.
  • ListView: Este es sin duda uno de los elementos más utilizados, pues nos permite gestionar listas de elementos semejantes de manera sencilla.
  • Toolbar/App bar: Este elemento es la barra que aparece en la parte superior de la pantalla de la mayoría de las aplicaciones.
  • Tabs: Otra forma de navegar por contenidos es mediante pestañas, incluidas en la Toolbar.
  • Navigation Drawer: Sin duda, uno de los más utilizados, consistente en el panel que se desliza desde la izquierda normalmente para ver las diferentes secciones.
  • Lista-> Detalles: Tener una pantalla que sea una lista, que al hacer click con el dedo nos lleve a los detalles es uno de los comportamientos más esperados.
  • Multipanel: Cuando llegaron las tablets, Android tuvo que empezar a pensar en cómo reutilizar las pantallas para seccionar el contenido cuando tengamos espacio (como ocurre en las tablets). Por eso es normal ver comportamientos que en el móvil podamos ir de una pantalla A a otra B, pero ver ambas a la vez en una tablet.

Con estos conceptos cerramos por hoy, para en el siguiente artículo entrar de lleno con las superficies. ¿Te resulta interesante esta sección?