Migra temas de XML a Material 3 en Compose

Si implementas Compose en una app existente, deberás migrar tus temas XML de Material para usar MaterialTheme en los componentes de Compose. Eso significa que el tema de tu app tendrá dos fuentes de confianza: un tema basado en View y otro basado en Compose. Si decides realizar cambios en tu diseño, deberás hacerlos en varios lugares. Una vez que tu app se haya migrado por completo a Compose, quita el tema XML.

Puedes usar la herramienta Material Theme Builder para migrar colores.

Cuando comiences la migración de XML a Compose, migra el tema a Material 3 Compose.

Glosario

Término	Definición
`MaterialTheme`	Es la función de componibilidad que proporciona temas (colores, tipografía, formas) a los componentes de la IU de Compose.
`Shape`	Objeto de Compose que se usa para definir formas de componentes personalizadas para un `MaterialTheme`.
`Typography`	Es un objeto de Compose que se usa para definir estilos de texto personalizados (familias de fuentes, tamaños y pesos) para un `MaterialTheme`.
`Color`	Es un objeto de Compose que se usa para definir esquemas de colores personalizados para `MaterialTheme`.
Tema XML	Es el sistema de temas de Android definido en archivos XML que usa el sistema de View.

Limitaciones

Antes de migrar, ten en cuenta las siguientes limitaciones:

Esta guía solo se enfoca en la migración a Material 3. Para migrar desde sistemas de diseño alternativos, consulta Material 2 o Sistemas de diseño personalizados en Compose.
El objetivo final es completar la migración a Compose, lo que permitirá quitar el tema de XML. En esta guía, se explica cómo migrar, pero no se explica cómo quitar finalmente el tema XML.

Paso 1: Evalúa el sistema de diseño

Identifica qué sistema de diseño se usa en el proyecto de XML View. Analiza la ruta de migración y los pasos necesarios para migrar el sistema de diseño existente a Material 3 en Compose.

Paso 2: Identifica los archivos fuente del tema

Identifica y ubica todos los recursos y archivos XML necesarios para la aplicación de temas: esquemas de color claro y oscuro, temas, formas, dimensiones, tipografía, estilos y otros archivos relevantes.

Los recursos, como las cadenas, se pueden reutilizar tal como están y no es necesario migrarlos.

Paso 3: Migra los colores

Migra los esquemas de colores claro y oscuro de XML a sus equivalentes en Material 3 Compose.

Paso 4: Migra formas y tipografía personalizadas

Si tu app usa formas personalizadas, haz lo siguiente:
1. En tu código de Compose, define un objeto Shape para replicar tus definiciones de forma en XML.
2. Proporciona este objeto Shape a tu MaterialTheme.
  
  Para obtener más detalles, consulta formas.
Si tu app usa tipografía personalizada, haz lo siguiente:
1. En tu código de Compose, define un objeto Typography para replicar tus estilos de texto y definiciones de fuentes en XML.
2. Proporciona este objeto Typography a tu MaterialTheme.
  
  Para obtener más detalles, consulta Tipografía.

Paso 5: Valida la migración del tema

Siempre usa los valores de tema existentes del tema XML original como fuente de verdad para el nuevo tema de Material en Compose. Nunca inventes valores de tema nuevos durante la migración para mantener la coherencia de la marca y evitar regresiones visuales.

Verifica que todos los valores nuevos del tema de Compose coincidan con los valores XML existentes. No codifiques de forma rígida ningún valor migrado.