Cómo migrar temas de XML a Compose

Es probable que una app existente tenga una gran cantidad de temas y estilos para Views. Si implementas Compose en una app existente, necesitarás migrar el tema para usar MaterialTheme en cualquier pantalla 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 estilo, deberás hacerlos en varios lugares.

Si migras la app a Compose, deberás crear una versión de Compose del tema existente. Sin embargo, cuanto antes lo hagas en el proceso de migración, mayor será el tiempo que tendrás que mantener temas de XML y Compose, que pueden representar una carga de mantenimiento.

Adaptador de temas de Material

Si usas un tema Theme.MaterialComponents.* de la biblioteca de MDC-Android en tu app, la biblioteca del Adaptador de Temas de Material te permite volver a usar fácilmente el color, la tipografía y la forma del tema de Material 2 de tu tema de XML actual basado en Views en tus elementos componibles.

Usa el elemento componible MdcTheme:

import com.google.accompanist.themeadapter.material.MdcTheme

class MdcThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Use MdcTheme instead of M2 MaterialTheme
        // Colors, typography, and shapes have been read from the
        // View-based theme used in this Activity
        setContent {
            MdcTheme {
                // Your app-level composable here
            }
        }
    }
}

Consulta la documentación de la biblioteca del Adaptador de temas de Material para obtener más información.

Adaptador de temas de Material 3

Si usas un tema Theme.Material3.* de la biblioteca de MDC-Android en tu app, la biblioteca del Adaptador de Temas de Material 3 te permite volver a usar fácilmente el color, la tipografía y la forma del tema de Material 3 de tu tema de XML actual basado en Views en tus elementos componibles.

Usa el elemento componible Mdc3Theme:

import com.google.accompanist.themeadapter.material3.Mdc3Theme

class Mdc3ThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // Use Mdc3Theme instead of M3 MaterialTheme
        // Color scheme, typography, and shapes have been read from the
        // View-based theme used in this Activity
        setContent {
            Mdc3Theme {
                // Your app-level composable here
            }
        }
    }
}

Consulta la documentación de la biblioteca del Adaptador de temas de Material 3 para obtener más información.

Adaptador de temas de AppCompat

La biblioteca del Adaptador de temas de AppCompat te permite volver a usar fácilmente temas de XML de AppCompat para la creación de temas en Jetpack Compose. Crea un MaterialTheme de M2 con los valores de color y tipografía del tema del contexto.

Usa el elemento componible AppCompatTheme:

import com.google.accompanist.themeadapter.appcompat.AppCompatTheme

class AppCompatThemeExample : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            // Colors and typography have been read from the
            // View-based theme used in this Activity
            // Shapes are the default for M2 as this didn't exist in M1
            AppCompatTheme {
                // Your app-level composable here
            }
        }
    }
}

Consulta la documentación de la biblioteca del Adaptador de temas de AppCompat para obtener más información.

Atributos de temas personalizados

Todas las bibliotecas anteriores del adaptador de temas de Accompanist usan la biblioteca del Adaptador de temas de Core, que contiene una lógica común para diversas conversiones de recurso XML a Compose. Estas utilidades de recursos se pueden usar para analizar atributos de temas personalizados.

Consulta la documentación de la biblioteca del Adaptador de temas de Core para obtener más información.

Estilos de componentes predeterminados

Las bibliotecas del adaptador de temas de Accompanist no leen ningún estilo de widget predeterminado definido por temas. Eso se debe a que Compose no tiene el concepto de elementos componibles predeterminados.

Consulta Sistemas de diseño personalizado en Compose para obtener más información.

Superposiciones de temas

Cuando migres pantallas basadas en View a Compose, presta atención a los usos del atributo android:theme. Es probable que necesites un nuevo MaterialTheme en esa parte del árbol de IU de Compose.