Material 3 na web e no Android: como experimentar e personalizar o m3 kit

SayNoob_TYT — Mon, 02 Nov 2026 03:52:44 +0000

Sou SayNoob_TYT, responsável pelo m3 kit, um starter demonstrativo independente para explorar Material 3 na web e no Android. O código completo está disponível sob licença MIT. Este post foi preparado e publicado com um assistente de IA, com minha autorização.

A ideia é oferecer uma base concreta para estudar cores, temas e interações antes de adaptar a interface ao seu próprio produto. Não é uma biblioteca oficial da Google nem um sistema completo com backend.

Experimente antes de instalar

A demo web permite testar tema claro/escuro, laboratório de cores e a galeria de interações. A galeria usa dados fictícios: serve para observar o comportamento da interface, não para gerenciar um negócio.

Um detalhe da versão 1.0.1 é a seleção conectada: dentro de um grupo de botões, o fundo colorido se desloca até a opção selecionada. Há também ripple no ponto de interação. No Android, o exemplo fica em Explorar → Seleção conectada.

Rodando a versão web

Depois de clonar o repositório, use Node 20.19+ ou 22.12+ e npm:

git clone https://github.com/in3zalo-gk/material-you-starter-kit.git
cd material-you-starter-kit/web
npm ci
npm run dev

Comece pelo exemplo mínimo em /examples/minimal.html, servido pelo ambiente local. Evite abrir os arquivos de desenvolvimento diretamente por file://. Para gerar os arquivos de hospedagem estática, execute npm run build; o resultado fica em web/dist/.

Personalizando as cores

O laboratório web usa Material Color Utilities e permite exportar tokens CSS. Um caminho prático é escolher uma paleta, exportar os tokens e revisar os componentes nos dois temas antes de adicionar telas. Também há extração de cores de imagem processada localmente e idiomas pt/en/es.

A interface web usa CSS próprio. A versão Android é uma implementação separada com Compose Material 3, não o mesmo código renderizado nas duas plataformas.

Experimentando no Android

Abra a pasta android/ no Android Studio. O ambiente documentado usa JDK 17, SDK 36 e Gradle 8.13. Com essas ferramentas configuradas, o comando é:

gradle -p android assembleDebug lintDebug

Há tema sistema/claro/escuro, Dynamic Color e um exemplo mínimo separado em android/example. Os APKs da release são demonstrações assinadas com chave debug, não builds de produção para a Play Store.

Usando como contexto para um assistente de código

Você pode fornecer o README e um exemplo mínimo à sua ferramenta de IA e pedir uma mudança pequena de cada vez. Por exemplo: adaptar uma tela preservando os tokens de cor e os estados de foco, depois revisar o resultado no navegador. Isso é uma forma de trabalhar com o código, não uma integração de IA embutida no kit. Revise o diff e teste as alterações antes de incorporar ao seu projeto.

Onde ele se encaixa e onde não

É uma base para protótipos e estudo de temas e interações, com exemplos web e Android disponíveis para modificar. A licença MIT também permite uso comercial, respeitando seus termos. Não existe uma edição paga escondendo o código completo.

Por outro lado, o starter não cobre todo o catálogo Material 3 e não inclui login, pagamentos ou serviços remotos. Algumas APIs Android exigem opt-in experimental. Testes automatizados não substituem avaliação de acessibilidade com seu conteúdo, TalkBack e dispositivos reais.

Código, documentação e instruções: github.com/in3zalo-gk/material-you-starter-kit.

Se você experimentar, feedback sobre os exemplos mínimos e a clareza das instruções é especialmente útil. Qual parte costuma dar mais trabalho ao começar uma interface Material 3: cores, temas ou comportamento dos componentes?