1. Antes de comenzar
En este codelab, actualizarás la app de inicio, una calculadora de propinas, para usar las nuevas funciones de Material Design 3 que permiten que la interfaz de usuario de una aplicación tenga un tema dinámico basado en el fondo de pantalla del usuario. A continuación, se incluyen algunas capturas de pantalla de la aplicación con el color dinámico aplicado. También examinarás algunas situaciones adicionales que te permitirán controlar cómo se aplican los colores.
Requisitos previos
Los desarrolladores deben
- Conocimiento de los conceptos básicos de temas en Android
- Sentirse a gusto con la modificación del tema de una app
Qué aprenderás
- Cómo diferenciar entre los componentes de Material existentes y los temas de Material 3
- Cómo actualizar un tema a Material 3
- Cómo crear temas con nuestras herramientas y aplicarlos
- Cómo se relacionan los atributos del tema
Requisitos
- Una computadora que tenga Android Studio instalado
- Código de la aplicación de Tip Time https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Descripción general de la app de partida
La app de Tip Time es una calculadora de propinas con opciones para personalizar la propina. Es una de las apps de ejemplo de nuestro curso de capacitación Aspectos básicos de Android en Kotlin.
3. Actualiza las dependencias de Gradle
Antes de actualizar el tema real y aplicar el color dinámico, se deben realizar algunos cambios en el archivo build.gradle de tu aplicación.
En la sección de dependencias, asegúrate de que la biblioteca de Material sea 1.5.0-alpha04 o posterior:
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
En la sección android, cambia compileSdkVersion y targetSdkVersion.
hasta el 31 o una fecha posterior:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
En estas instrucciones, se supone que la app tiene dependencias relativamente recientes. En el caso de una app que aún no usa Material o una versión menos reciente, consulta las instrucciones en la documentación de introducción de los componentes de Material Design para Android.
En todos los lugares donde hayas creado tus temas, cambia las referencias de Theme.MaterialComponents.* a Theme.Material3.*. Algunos estilos aún no tienen un estilo nuevo en el espacio de nombres Material3, pero la mayoría de los componentes seguirán heredando el nuevo diseño una vez que el tema principal se actualice a Theme.Material3.*. A continuación, podemos ver que los botones ahora adoptan el nuevo tema redondeado.
En el archivo de temas que se muestra a continuación, lo único que se cambió es el tema principal. Reemplazaremos por completo este tema en un momento. Algunos de los atributos de color quedaron obsoletos y algunos de los estilos personalizados que creamos ahora son estándar en Material 3, pero queríamos que tuvieras
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- 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>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. Información sobre los temas de color y los roles de color
El sistema de color de Material 3 usa un enfoque organizado para aplicar colores a tu IU. Aún se usan varios atributos de Theme.AppCompat. Sin embargo, se agregaron más atributos en Theme.MaterialComponents.* y aún más en Theme.Material3.*, por lo que es importante examinar todas las pantallas de tu app para asegurarte de que no se filtren propiedades no implementadas desde el tema base.
Información sobre los roles de color
Hay más de veinte atributos relacionados con el color en un tema de Material 3. Esto puede parecer abrumador al principio, pero, en realidad, hay algunos colores clave que se combinan con los mismos 4 o 5 roles de color para crear colores derivados.
Estos grupos de colores son los siguientes:
- Color principal de tu app
- Secundario: Es el color secundario de tu app.
- Terciario, ya sea un tercer color que complementa los colores primario y secundario
- Error, se usa para texto y diálogos de error
- Fondo
- Surface, SurfaceVariant y Surface Inverse
Los roles son los siguientes para los colores primario, secundario, terciario y de error:
<color base> | El color base |
on<base color> | El color de los íconos y el texto que aparecen en el color base |
Contenedor de <color base> | Derivado del color base, se usa para botones, diálogos, etcétera. |
en<color base>Container | El color de los íconos y el texto del contenedor |
Por ejemplo, un botón de acción flotante con diseño predeterminado en Material 3 usa Primary como color base, por lo que usa primaryContainer para el color de fondo del botón y onPrimaryContainer para su contenido.
Cuando personalices un tema de forma manual, debes verificar, como mínimo, que el atributo on<base color> de cada color base que cambies siga siendo legible.
Lo ideal sería ajustar todos los roles de un grupo de color al mismo tiempo para garantizar que no haya artefactos desde la base hasta tu app.
Los colores base de fondo y superficie suelen tener dos roles: el color base en sí y on<base color> para los íconos o el texto que aparecen sobre él.
5. Cómo crear un tema de Material 3 con Material Theme Builder
Material Theme Builder facilita la creación de un esquema de colores personalizado, el uso de su exportación de código integrada para migrar al sistema de color de M3 y el aprovechamiento del color dinámico. Más información en material.io/material-theme-builder
El tema de la app de Tip Time contiene varios diseños para los componentes, pero la mayoría de los diseños son predeterminados en los temas de Material 3. Los únicos dos colores clave que nos deben preocupar son el primario y el secundario.
Estos corresponden a un color principal verde (código hexadecimal #1B5E20) y un color secundario azul (código hexadecimal #0288D1).
Puedes ingresar esos colores en Material Theme Builder y exportar un tema completo (suponiendo que haya un vínculo a una descripción general completa en otro lugar).
Ten en cuenta que los colores que ingreses pueden cambiar de tono para adaptarse al algoritmo de generación de colores y garantizar que sean complementarios y legibles.
A continuación, se muestra un subconjunto de los valores que se generan cuando ingresas colores personalizados.
6. Cómo trabajar con archivos de exportación de Material Theme Builder
El archivo de exportación contiene directorios values y values-night con sus propios archivos themes.xml, que corresponden a los temas claro y oscuro. Todos los colores se definen en values/colors.xml.
Los archivos se pueden copiar tal como están, pero deberás cambiar el nombre del tema en AndroidManifest.xml o en los archivos del tema para que coincidan. El nombre predeterminado de las herramientas es AppTheme.
Reinicia la app, que se verá casi exactamente igual. Un cambio notable son los elementos Switch y RadioButtons, cuyos estados seleccionados ahora se tematizan con tonos del color principal en lugar de colores secundarios. En aplicaciones más grandes, es posible que debas volver a revisar algunos diseños.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. Cómo agregar color dinámico
Con un tema de Material 3 adecuado en uso, podemos hacer que la IU sea dinámica con algunas pequeñas adiciones.
La API de Dynamic Colors te permite aplicar colores dinámicos a todas las actividades
en una app, actividades individuales o en Views o Fragments individuales Para
esta app, aplicaremos el color dinámico de forma global.
Crea un archivo de clase de aplicación
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Debemos hacer referencia a este archivo recién creado en el manifiesto de Android:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
En los sistemas Android 12 y versiones posteriores, se examina el fondo de pantalla del usuario para el esquema predeterminado con el objetivo de generar varias paletas tonales. Los valores de estas paletas se usan para crear un ThemeOverlay.
La clase DynamicColors registra un ActivityLifecycleCallbacks que intercepta en ActivityPreCreated para aplicar la superposición del tema dinámico creado por el sistema o uno que hayas proporcionado.
8. Cómo aplicar una superposición de tema personalizada
Nuestras herramientas pueden exportar superposiciones de temas, pero también puedes crearlas de forma manual si anulas una pequeña cantidad de atributos.
Una superposición de tema está diseñada para usarse junto con otro tema y solo proporciona los valores que se cambiarán sobre el tema base.
Supongamos que, por algún motivo, tal vez por la marca, necesitamos que los tonos del color principal sean sombras de rojo. Podríamos hacerlo con los siguientes archivos y atributos.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
Para el código anterior, Android 12 aplicará un tema claro dinámico y superpondrá tus cambios sobre él. Como alternativa, puedes usar cualquier ThemeOverlay válido como elemento superior, incluido cualquiera de los siguientes:
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Para usar esta superposición de tema en lugar del valor predeterminado de Material, cambia la llamada a DynamicColors.applyToActivitiesIfAvailable por lo siguiente:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Cómo agregar color dinámico a atributos personalizados
Hasta ahora, anulamos propiedades que ya existen en un tema de Material 3. Tenemos otro caso posible en el color dinámico en el que podemos tener uno o más atributos personalizados que deben asignarse.
Cuando una app habilita el color dinámico, obtiene acceso a 5 paletas tonales: tres paletas de acento y dos paletas neutras con los siguientes roles aproximados:
system_accent1 | Tonos de color principal |
system_accent2 | Tonos de color secundarios |
system_accent3 | Tonos de color terciarios |
system_neutral1 | Fondos y superficies neutros |
system_neutral2 | Superficies y contornos neutros |
Cada paleta tiene una cantidad de pasos tonales que van desde el blanco
a negro: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1,000.
Cuando diseñes una IU para el color dinámico, debes pensar menos en el color específico y más en la relación del tono y la luminancia de ese componente con otros elementos del sistema de diseño.
Supongamos que quieres que los íconos se adapten al tema con la paleta de color secundario y agregaste un atributo para teñir los íconos con la siguiente entrada en attrs.xml.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
La superposición del tema podría verse de la siguiente manera:
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
Cuando vuelvas a instalar la app y cambies el fondo de pantalla, la app detectará esa paleta secundaria.
Estas paletas son específicas de Android 12 (API 31), por lo que deberás colocar los archivos pertinentes en carpetas con el sufijo -v31, a menos que tu app tenga un SDK mínimo establecido en 31 o una versión posterior.
10. Resumen
En este codelab, pudiste hacer lo siguiente:
- Agrega dependencias para actualizar tu tema a Material 3.
- Comprende los nuevos grupos y roles de color.
- Comprende cómo migrar de un tema estático a un color dinámico.
- Comprende cómo usar las superposiciones de temas y el color dinámico para los atributos de temas personalizados.