Migrar temas XML para o Material 3 no Compose

Ao introduzir o Compose em um app já existente, é necessário migrar os temas XML do Material para usar MaterialTheme em componentes do Compose. Isso significa que os temas do seu app vão ter duas fontes da verdade: o tema baseado na visualização e o tema do Compose. Qualquer mudança no estilo precisa ser feita em vários lugares. Depois que o app for totalmente migrado para o Compose, remova a estilização XML.

Use a ferramenta Material Theme Builder para migrar cores.

Ao iniciar a migração do XML para o Compose, migre a estilização para a estilização do Material 3 Compose.

Glossário

Termo	Definição
MaterialTheme	A função combinável que fornece temas (cores, tipografia, formas) aos componentes da interface do Compose.
Shape	Um objeto do Compose usado para definir formas de componentes personalizados para um MaterialTheme.
Typography	Um objeto do Compose usado para definir estilos de texto personalizados (famílias de fontes, tamanhos, pesos) para um MaterialTheme.
Color	Um objeto do Compose usado para definir esquemas de cores personalizados para MaterialTheme.
Tema XML	O sistema de temas do Android definido em arquivos XML, usado pelo sistema de visualização.

Limitações

Antes de migrar, esteja ciente das seguintes limitações:

• Este guia se concentra apenas na migração para o Material 3. Para migrar de sistemas de design alternativos, consulte Material 2 ou Sistemas de design personalizados no Compose.
• O objetivo final é uma migração completa para o Compose, que permite a remoção da inclusão de temas XML. Este guia explica como migrar, mas não explica como remover o tema XML.

Etapa 1: avaliar o sistema de design

Identifique qual sistema de design é usado no projeto XML View. Analise o caminho de migração e as etapas necessárias para migrar o sistema de design existente para o Material 3 no Compose.

Etapa 2: identificar os arquivos de origem do tema

Identifique e localize todos os recursos e arquivos XML necessários para a estilização: esquemas de cores claros e escuros, temas, formas, dimensões, tipografia, estilos e outros arquivos relevantes.

Recursos como strings podem ser reutilizados como estão e não precisam ser migrados.

Etapa 3: migrar cores

Migre os esquemas de cores claras e escuras do XML para os equivalentes no Material 3 Compose.

Etapa 4: migrar formas e tipografia personalizadas

• Se o app usa formas personalizadas:

  1. No código do Compose, defina um objeto Shape para replicar as definições de forma XML.

  2. Forneça esse objeto Shape ao seu MaterialTheme.

     Para mais detalhes, consulte formas.

• Se o app usa tipografia personalizada:

  1. No seu código do Compose, defina um objeto Typography para replicar os estilos de texto e as definições de fontes do XML.

  2. Forneça esse objeto Typography ao seu MaterialTheme.

     Para mais detalhes, consulte tipografia.

Etapa 5: validar a migração do tema

Sempre use os valores de tema atuais do tema XML original como a fonte de verdade para o novo tema Material no Compose Nunca invente novos valores de tema durante a migração para manter a consistência da marca e evitar regressões visuais.

Verifique se todos os novos valores de tema do Compose correspondem aos valores XML atuais. Não codifique valores migrados.