Cómo cambiar el tema de una app

1. Antes de comenzar

Material es un sistema de diseño creado por Google para ayudar a los desarrolladores a crear experiencias digitales de alta calidad para Android y otras plataformas. En todo el sistema de Material, se incluyen lineamientos de diseño visual, de movimiento y de interacción para tu app, pero este codelab se enfocará en cambiar el tema de color de tu app para Android.

El codelab usa la plantilla de app de actividad vacía, pero puedes usar la app para Android en la que estés trabajando. Si estás realizando este codelab como parte del curso Aspectos básicos de Android, puedes usar la app de Tip Time.

Requisitos previos

Comprender cómo crear una app para Android a partir de una plantilla de Android Studio
Comprender cómo ejecutar una app para Android en el emulador o en un dispositivo con Android Studio
Un dispositivo o emulador de Android que ejecute el nivel de API 28 (Android 9) o 29 (Android 10), o una versión posterior
Comprender cómo editar un archivo en formato XML

Qué aprenderás

Cómo seleccionar colores efectivos para tu app según los principios de Material Design
Cómo establecer colores como parte del tema de tu app
Cuáles son los componentes RGB de un color
Cómo aplicar un estilo a una View
Cómo cambiar la apariencia de una app con un tema
Cuál es la importancia del contraste de color

Requisitos

Una computadora con la versión estable más reciente de Android Studio instalada
Un navegador web y una conexión a Internet para acceder a las herramientas de color de Material

2. Diseño y color

Material Design

Material Design está inspirado en el mundo físico y en sus texturas, como el modo en que los objetos reflejan la luz y proyectan sombras. Se proporcionan lineamientos que te permitirán compilar la IU de tu app de manera legible, atractiva y coherente. Los temas de Material te permiten adaptar Material Design a tu app, con lineamientos para personalizar colores, tipografía y formas. Material Design incluye un tema de referencia integrado que se puede usar tal como está. Luego, podrás personalizarlo en la medida que quieras para que Material sea funcional a tu app.

Un poco de información sobre el color

El color está en todas partes, tanto en el mundo real como en el ámbito digital. Lo primero que debes saber es que no todas las personas ven el color de la misma manera, por lo que es importante elegir colores para tu app que permitan que los usuarios la utilicen de manera eficaz. Elegir colores con suficiente contraste es solo una parte de crear apps más accesibles.

Un color se puede representar con 3 números hexadecimales, #00-#FF (0-255), que representan sus componentes rojo, verde y azul (RGB). Cuanto más alto sea el número que represente a un componente, mayor será la cantidad de ese componente.

Ten en cuenta que también se puede definir un color, incluido un valor alfa #00-#FF, que represente la transparencia (#00 = 0% = completamente transparente, #FF = 100% = completamente opaco). Cuando se incluye, el valor alfa es el primero de 4 números hexadecimales (ARGB). Si no se incluye un valor alfa, se supone que es #FF = 100% opaco.

Sin embargo, no necesitas generar los números hexadecimales por tu cuenta. Hay herramientas disponibles para ayudarte a elegir colores, que generarán los números por ti.

Algunos ejemplos que puedes haber visto en el archivo colors.xml de tu app para Android son 100% negro (R=#00, G=#00, B=#00) y 100% blanco (R=#FF, G=#FF, B=#FF):

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

3. Temas

Un estilo puede especificar atributos para una View, como el color y el tamaño de fuente, el color de fondo y mucho más.

Un tema es una colección de estilos que se aplican a toda una app, actividad o jerarquía de vistas, no solo a una View individual. Cuando aplicas un tema a una app, una actividad, una vista o un grupo de vistas, el tema se aplica a ese elemento y a todos sus elementos secundarios. Los temas también pueden aplicar estilos a elementos que no forman parte de la vista, como la barra de estado y el fondo de la ventana.

Cómo crear un proyecto de actividad vacía

Si utilizas tu propia app, puedes omitir esta sección. Si necesitas una app con la que trabajar, sigue estos pasos para crear una app de actividad vacía.

Abre Android Studio.
Crea un nuevo proyecto de Kotlin con la plantilla Empty Activity.
Asígnale el nombre "TipTime". Si no realizarás ningún otro codelab, puedes mantener el nombre predeterminado ("My Application").
Selecciona, como mínimo, un nivel de API 19 (KitKat).
Cuando Android Studio termine de crear la app, abre activity_main.xml (app > res > layout > activity_main.xml).
Si es necesario, cambia a la vista Code.
Reemplaza todo el texto con este XML:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>

Abre strings.xml (app > res > values > strings.xml).
Reemplaza todo el texto con este XML:

<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>

Ejecuta la app, que debería tener el siguiente aspecto.

La app incluye una TextView y un Button de modo que puedas ver cómo se muestran las opciones de color en una app para Android real. En los próximos pasos, cambiaremos el color del botón por el color principal del tema.

Cómo obtener información sobre los colores de los temas

Cada parte de la IU de las apps para Android usa un color diferente. Con el propósito de ayudarte a usar el color de manera significativa y aplicarlo con coherencia en toda tu app, el sistema de temas agrupa los colores en 12 atributos nombrados relacionados con el color para usar texto, íconos y otros elementos. No necesitas especificarlos a todos en el tema, sino que elegirás el color principal y el secundario, así como los colores para el texto y los íconos dibujados con esos colores.

Los colores "On" se usan para el texto y los íconos dibujados en las diferentes superficies.

#	Nombre	Atributo de tema
1	Principal	`colorPrimary`
2	Variante principal	`colorPrimaryVariant`
3	Secundario	`colorSecondary`
4	Variante secundaria	`colorSecondaryVariant`
5	Fondo	`colorBackground`
6	Superficie	`colorSurface`
7	Error	`colorError`
8	On principal	`colorOnPrimary`
9	On secundario	`colorOnSecondary`
10	On de fondo	`colorOnBackground`
11	On de superficie	`colorOnSurface`
12	On de error	`colorOnError`

Echa un vistazo a los colores definidos en el tema predeterminado.

En Android Studio, abre themes.xml (app > res > values > themes > themes.xml).
Observa el nombre del tema, Theme.TipTime, que se basa en el nombre de tu app.

<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

Ten en cuenta que la línea de XML también especifica un tema principal, Theme.MaterialComponents.DayNight.DarkActionBar. DayNight es un tema predefinido en la biblioteca de componentes de Material. DarkActionBar significa que la barra de acciones utiliza un color oscuro. Así como una clase hereda atributos de la clase superior, un tema hereda atributos del tema superior.

Revisa los elementos del archivo y observa que los nombres son similares a los del diagrama anterior: colorPrimary, colorSecondary, etcétera.

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryVariant">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

No todos los atributos del tema de color están definidos. Los colores que no estén definidos heredarán el color del tema superior.

También observa que Android Studio dibuja una pequeña muestra del color en el margen izquierdo.
Por último, ten en cuenta que los colores se especifican como recursos de color; por ejemplo, @color/purple_500, en lugar de usar directamente un valor RGB.
Abre colors.xml (app > res > values > colors.xml). Verás los valores hexadecimales para cada recurso de color. Recuerda que el valor #FF inicial es el valor alfa y significa que el color es 100% opaco.

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

4. Elige colores de temas para la app

Ahora que tienes una idea de los atributos del tema, es hora de elegir algunos colores. La forma más sencilla de hacerlo es con la herramienta Color Tool, una app basada en la Web proporcionada por el equipo de Material. La herramienta ofrece una paleta de colores predefinidos y te permite ver fácilmente cómo se ven cuando se usan en diferentes elementos de la IU.

Elige algunos colores

Comienza por seleccionar un color Principal (colorPrimary), por ejemplo, Green 900 (verde 900). La herramienta de color mostrará cómo se vería con una simulación de la app y seleccionará las variantes Light (claro) y Dark (oscuro).
Presiona la sección Secundario y elige el color secundario (colorSecondary) que quieras, por ejemplo, Light Blue 700 (azul claro 700). La herramienta de color mostrará cómo se vería con una simulación de la app y, nuevamente, seleccionará las variantes Light (claro) y Dark (oscuro).
Ten en cuenta que la simulación de la app incluye 6 "pantallas" diferentes. Presiona las flechas que aparecen en la parte superior de la simulación y observa cómo lucen las opciones de color que seleccionaste en las diferentes pantallas.
La herramienta de color también tiene una pestaña Accessibility que te informará si los colores son lo suficientemente claros como para leerlos cuando se usan con texto en blanco o negro. Una parte de hacer que la app sea más accesible es garantizar que el contraste de color sea lo suficientemente alto: 4.5:1 o mayor para texto pequeño y 3.0:1 o menor para texto más grande. Obtén más información sobre el contraste de color.
Para primaryColorVariant y secondaryColorVariant, puedes elegir la variante clara u oscura sugerida.

Cómo agregar colores a tu app

La definición de recursos para colores facilita la reutilización uniforme de los mismos colores en diferentes partes de tu app.

En Android Studio, abre colors.xml (app > res > values > colors.xml).
Una vez definidos los colores existentes, define un recurso de color llamado green con el valor seleccionado anteriormente, #1B5E20.

<color name="green">#1B5E20</color>

Continúa definiendo los recursos para los otros colores. La mayoría proviene de la herramienta de color. Ten en cuenta que los valores de green_light y blue_light son diferentes de los que muestra la herramienta. Los usarás en un paso más adelante.

`green`	`#1B5E20`
`green_dark`	`#003300`
`green_light`	`#A5D6A7`
`blue`	`#0288D1`
`blue_dark`	`#005B9F`
`blue_light`	`#81D4FA`

Ya existen recursos de color definidos para el blanco y el negro, por lo que no necesitas definirlos.

El archivo colors.xml de tu app ahora debería verse así:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

Cómo usar los colores en tu tema

Ahora que tienes los nombres de los colores que seleccionaste, es hora de usarlos en el tema.

Abre themes.xml (app > res > values > themes > themes.xml)
Cambia colorPrimary por el color principal que seleccionaste, @color/green.
Cambia colorPrimaryVariant por @color/green_dark.
Cambia colorSecondary por @color/blue.
Cambia colorSecondaryVariant por @color/blue_dark.
Comprueba que Text on P y Text on S sigan siendo blanco (#FFFFFF) y negro (#000000). Si usas la herramienta de color por tu cuenta y seleccionas otros colores, es posible que debas definir recursos de colores adicionales.

Cuando termines, el tema debería verse así:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Ejecuta tu app en el emulador o en un dispositivo y observa cómo se ve con el tema nuevo.

5. Tema oscuro

La plantilla de app incluyó un tema claro predeterminado y también una variante con un tema oscuro. Un tema oscuro utiliza colores más oscuros y discretos. Además:

Puede reducir significativamente el consumo de energía (según la tecnología de pantalla del dispositivo).
Mejora la visibilidad para los usuarios con visión reducida y los usuarios sensibles a la luz intensa.
Facilita el uso de los dispositivos en entornos con poca luz.

Elige colores para el tema oscuro

Es necesario que los colores de un tema oscuro sean legibles. Los temas oscuros usan un color de superficie oscuro con acentuación de color limitada. Para garantizar la legibilidad, los colores primarios suelen ser versiones menos saturadas de los colores principales del tema claro.

Se recomienda el uso de tonos más claros (200 a 50) en un tema oscuro, en lugar del tema de color predeterminado (tonos saturados de 900 a 500), para proporcionar mayor flexibilidad y usabilidad. Antes, seleccionaste verde 200 y azul claro 200 como colores claros. En tu app, deberás usar los colores claros como colores principales y los colores primarios como las variantes.

Actualiza la versión oscura de tu tema

Abre themes.xml (night). En el panel Project, selecciona Android y ve a app > res > values > themes > themes.xml (night).

Cambia colorPrimary por la variante del color primario que seleccionaste (@color/green_light).
Cambia colorPrimaryVariant por @color/green.
Cambia colorSecondary por @color/blue_light.
Cambia colorSecondaryVariant por @color/blue_light. Ten en cuenta que colorSecondaryVariant podría ser del mismo color que colorSecondary.

Cuando termines, tu archivo themes.xml (night) debería verse así:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Aquí, los colores originales definidos en colors.xml (por ejemplo, purple_200) ya no se utilizan, por lo que puedes borrarlos.

Prueba el tema oscuro

Para ver cómo se ve tu tema en modo oscuro, habilita el modo oscuro en tu dispositivo.

Para el nivel de API 28 (Android 9)

Vuelve a ejecutar tu app.
Ve a la app de Configuración.
En la sección Batería, busca Ahorro de batería.

Presiona Activar ahora.

Sigue los pasos que se indican a continuación.

Para el nivel de API 29 (Android 10) o versiones posteriores

Vuelve a ejecutar tu app.
Ve a la app de Configuración.
En la sección Pantalla, busca el interruptor Tema oscuro.

Cambia el interruptor Tema oscuro a la posición de encendido. El dispositivo cambiará al modo nocturno.

Para cualquiera de las APIs

Regresa a tu app y observa las diferencias.

El cambio más obvio es el fondo oscuro con texto claro, en lugar del fondo claro con texto oscuro. Además, los colores utilizados para los botones son menos vibrantes en el tema oscuro que en el tema claro.

¡Felicitaciones! Creaste un nuevo tema para la app, con un tema claro y uno oscuro, de manera satisfactoria.

6. Código de solución

Este codelab está enfocado en la personalización de colores para el tema, pero existen muchos atributos que puedes personalizar en tu tema, como texto, forma y estilo de botones, entre otros. Consulta este artículo para ver otras maneras de personalizar el tema de una app. Diseños de Android: Atributos comunes del tema.

A continuación, se muestra el código de solución para este codelab.

colors.xml (app > res > values > colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

values/themes.xml (app > res > values > themes > themes.xml)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

values-night/themes.xml (app > res > values > themes > themes.xml (night))

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

7. Resumen

Usa la herramienta Color Tool de Material para seleccionar colores para el tema de tu app.
O bien, puedes usar el generador de paletas de Material para seleccionar una paleta de colores.
Declara recursos de color en el archivo colors.xml para que sea más fácil volver a usarlos.
El tema oscuro puede reducir el consumo de energía y facilitar la lectura de tu app cuando hay poca luz.