Definición de la paleta de colores de la aplicación

Uno de los principios que se definen en Material Design es el uso del color. Google propone usar colores vivos y alegres. En la Web de Material Design se nos proponen algunas paletas de ejemplo [1].

Cada aplicación ha de definir su propia paleta de colores que la diferencie del resto de aplicaciones. Incluso la barra de estado de Android cambiará para que combine con los colores de nuestra aplicación. Puedes observar en la imagen inferior cómo ha cambiado el uso del color en la aplicación Gmail. A la izquierda se muestra en una versión 4.x y a la derecha tras la aplicación de Material Design. Esta aplicación ha decidido usar una tonalidad de naranja como color primario o característico. Observa como la barra de estado también se muestra en un color similar algo más oscuro.

Por lo tanto, si tu aplicación va a seguir las especificaciones de Material Design, lo primero que has de hacer es escoger la paleta de colores que va a utilizar. Este color puedes seleccionarlo entre la paleta de ejemplo antes comentada, aunque si la empresa para que realizas la aplicación tiene un color de marca, lo ideal es que escojas este color.

Practica: Definir la paleta de colores de la aplicación

1.     Para definir los colores de nuestra aplicación vamos a utilizar la herramienta que encontrarás en: https://www.materialpalette.com/

2.     Es muy sencilla de manejar, escoge primero el color primario para tu aplicación y a continuación el color de resalte o acentuación. Observa como a la derecha aparece una previsualización de una aplicación que utilizara estos colores. Aunque esta aplicación solo nos permite seleccionar el color primario (primary color) y el de resalte (accent color), realmente puedes configurar hasta 8 colores en la paleta de tu aplicación.  Dark primary color y light primary color son colores derivados del primario. El resto se utilizan para textos e iconos y no es recomendable modificar.

3.     Puedes realizar varias pruebas hasta obtener unos colores de tu gusto.

4.     Cuando los tengas, puedes pulsar en DOWNLOAD y selecciona XML, para descargarte un fichero de recursos Android donde se definen estos colores.

5.     Como solo vamos a cambiar tres valores, va a ser más sencillo que abras el fichero res / values / colors.xml de la aplicación y reemplaces lo tres valores definidos, con los valores en hexadecimal que has seleccionado. Estos valores pueden ser diferentes a los que se muestran a continuación:

<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#8BC34A</color>
</resources>

6.     Si abres el fichero res / values / styles.xml podrás observar como estos tres colores son utilizados para configurar los colores del tema aplicado por defecto a tu aplicación:

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    …

El resto de colores de la paleta no son definidos dado que se utilizarán los colores por defecto.

7.     Si abres el fichero AndroidManifest.xml podrás observar como este tema es asignado a la aplicación.

<manifest …>
    <application
        …
        android:theme="@style/AppTheme">
    …

8.    Todavía no podremos ejecutar la aplicación. Has de esperar a terminar el próximo apartado.