Diseño de material Android: Estilos

En el desarrollo de aplicaciones móviles a menudo pasamos mucho tiempo tratando de estilizar nuestras aplicaciones para que la interfaz sea agradable para el usuario y fácil de programar. Hoy, esta condición ha cambiado gracias a la creación de un lenguaje visual que resume los principios básicos de la buena innovación en el diseño, ahorrando mucho tiempo en el desarrollo de los estilos, estamos hablando de Material Design.

 

Material Design es un lenguaje de diseño que proporciona orden, especificaciones claras y colores e imágenes llamativos a la interfaz de usuario de las animaciones de las aplicaciones de Android.

 

Para darle un sentido más amplio, podemos ver el material design como un conjunto de reglas muy claras para poner en práctica diseños e interfaces muy llamativos y de gran calidad.

 

Cada vez son más las aplicaciones que están incorporando esta filosofía a sus interfaces, y no es de extrañar que la tendencia hoy en día se deba a los excelentes resultados que proporciona y por supuesto, como usuarios, nos gusta mucho.

 

Este concepto fue pensado principalmente para la versión actual de Android, Lollipop, pero también se ha utilizado en sitios web, teniendo una buena aceptación por parte de los usuarios.

 

Lo más interesante del Material Design en Android es que, a pesar de estar disponible desde la API nivel 21, se puede integrar en los niveles inferiores gracias a la librería de soporte ** appcompat_v7 **. Entonces, si comenzamos un nuevo proyecto o actualizamos la interfaz de nuestra aplicación de Android, debemos agregar la biblioteca * build.gradle * a nuestro ** Android Studio **.

 

[prism:javascript] dependencies { compile fileTree(dir: 'libs', include: ['*.jar']) compile 'com.android.support:appcompat-v7:21.0.3' } [/prism:javascript]

 

De esta manera podemos comenzar nuestra actualización de diseño del material.

 

Primero, cabe señalar que en la * API 21 *, las remodelaciones de Android aplican estilos, por lo que debemos crear un archivo de estilo para este nivel. Este archivo estará en el directorio * valores-21 *, así:

 

Luego se crea el estilo base de la aplicación, en este caso usamos la referencia ** AppCompat **, le daremos un estilo * Light * sin * ActionBar * (ha sido reemplazado por * toolBar * y su implementación es diferente).

 

En el directorio de valores, abra y modifique el archivo * styles.xml *

[prism:javascript] [/prism:javascript]

Para aplicar este tema, debemos cambiar el tema de la aplicación base parental creado por defecto [prism: javascript] [/ prism: javascript]

 

Debe verificar que el tema de Android de la aplicación en AndroidManifest.xml tenga el valor: [prism: javascript] android: theme = "@ style / AppTheme" [/ prism: javascript]

 

Uno de los principales elementos de diseño del material es el ** color **, para el que existe documentación especial que explica en detalle cómo utilizarlo.

 

Básicamente tenemos tres colores:

colorPrimary
colorAccent
colorPrimaryOscuro

 

** colorPrimary ** será nuestro * toolBar * color y color principal de nuestra aplicación, el ** colorAccent ** se utilizará para componentes como * botón de acción, controles deslizantes, interruptores o textos de enlace * o más que deban ser resaltado.

 

** colorPrimaryDark ** es el color de la barra de notificaciones y se utilizará solo para dispositivos que tengan Android Lollipop, ya que a partir de esta versión es cuando se puede modificar el color.

 

Conociendo estos conceptos, ¡pongamos color en nuestros materiales! [prisma: javascript] [/ prisma: javascript]

 

Y el archivo colors.xml

 

[prisma: javascript] # 529ac8 # CE1483 # 0c85bb [/ prisma: javascript]

 

De esta forma preparamos nuestros equipos con un estilo de diseño totalmente orientado.

 

Como se mencionó anteriormente, el * API nivel 21 * es especial, por lo que bajo el directorio * valores-21 * debemos realizar cambios especiales en el archivo * styles.xml *

 

[prisma: javascript] [/ prisma: javascript]

 

Primero, se toma como * "padre" * el tema creado anteriormente y se cambian los nombres de los elementos asociados de cada color; debe agregar * "android" * antes del nombre del color, es la forma de llamar a estos colores en el nivel * 21 *.

 

Entonces solo queda agregar una barra de herramientas, botones, texto y todos los materiales que necesitamos en nuestra aplicación.

 

Como ves, es muy sencillo implementar un tema básico en nuestras aplicaciones de Android para crear interfaces que tengan el material design.

 

Muchas empresas que desarrollan aplicaciones móviles están actualizando sus aplicaciones con esta metodología de diseño, Material Design es una de las grandes mejoras que trae el Android de nivel 21: un nuevo diseño fresco que reemplaza al altamente equipado * Holo *, que ha logrado sentar las bases para las pautas de diseño de Android. Pero es hora de dar nueva vida a las interfaces de usuario de móviles y tabletas que utilizan este sistema operativo.