Primeiros passos com o Jetpack Compose

O Jetpack Compose é o kit de ferramentas moderno para criar interfaces do Android, simplificando o desenvolvimento de apps que se adaptam a qualquer tamanho de tela.

• Visão geral: confira os recursos disponíveis para desenvolvedores do Compose.
• Tutorial: comece a usar o Compose criando uma interface básica.
• Guias rápidos: confira nossos guias rápidos e focados, criados para ajudar você a alcançar sua meta o mais rápido possível.

Base

• Trabalhando com o Compose: como a abordagem declarativa do Compose é diferente da abordagem baseada em visualização que você pode já ter usado no passado. Crie um modelo mental de como trabalhar com o Compose.
• Gerenciamento do estado: como definir e usar o estado no app Compose.
• Ciclo de vida de elementos combináveis: ciclo de vida de um elemento combinável e como o Compose determina se ele precisa ser redesenhado.
• Modificadores: use modificadores para aumentar ou decorar funções combináveis.
• Efeitos colaterais no Compose: maneiras de gerenciar efeitos colaterais.
• Fases do Jetpack Compose: as etapas pelas quais o Compose passa para renderizar a interface do app e como usar essas informações para escrever código eficiente.
• Camadas da arquitetura: as camadas arquitetônicas que compõem o Jetpack Compose e os princípios básicos que fundamentaram o design do Compose.
• Performance: evite as armadilhas comuns de programação que podem prejudicar o desempenho do app.
• Semântica no Compose: a árvore semântica, que organiza a UI de uma maneira que pode ser usada por serviços de acessibilidade e frameworks de teste.
• Dados com escopo local usando o CompositionLocal: use CompositionLocal para transmitir dados usando a composição.

Interface adaptável

• Criar apps adaptáveis: aprenda os princípios básicos da criação de layouts otimizados para qualquer tamanho de tela, incluindo smartphones, tablets, dispositivos dobráveis e muito mais.
• Aplique layouts comprovados: use layouts canônicos, como detalhes da lista e painel de suporte, para apps otimizados em telas grandes.
• Navegação adaptável: implemente padrões de navegação que se ajustam automaticamente ao espaço de exibição disponível.

Ambiente de desenvolvimento

• Android Studio com Compose: como configurar seu ambiente de desenvolvimento para usar o Compose.
• Ferramentas para Compose: novos recursos do Android Studio para oferecer suporte ao Compose.
• Kotlin para Compose: expressões específicas do Kotlin funcionam com o Compose.
• Comparar o Compose e ver métricas: como a migração para o Compose pode afetar o tamanho do APK e o desempenho do ambiente de execução do seu app.
• Lista de materiais: gerencie todas as dependências do Compose especificando apenas a versão da BoM.

Design

• Layouts: componentes de layout do Compose e como criar os seus próprios.
  • Conceitos básicos de layout: os elementos básicos para criar uma interface simples do app.
  • Componentes e layouts do Material Design: componentes e layouts do Material Design no Compose.
  • Layouts personalizados: controle o layout do app e crie um layout personalizado.
  • Linhas de alinhamento: crie guias de alinhamento personalizadas para alinhar e posicionar com precisão os elementos da interface.
  • Medições intrínsecas: como consultar informações sobre elementos filhos antes de medi-los, já que o Compose mede elementos da interface apenas uma vez por transmissão.
  • ConstraintLayout: use ConstraintLayout na sua interface do Compose.
• Sistemas de design: implemente um sistema de design e dê ao app uma aparência consistente.
  • Material Design 3: implemente o Material You com a implementação do Compose do Material Design 3.
  • Como migrar do Material 2 para o Material 3: migre seu app do Material Design 2 para o Material Design 3 no Compose.
  • Material Design 2: personalize a implementação do Material Design 2 (link em inglês) no Compose para que ela se adeque à marca do seu produto.
  • Sistemas de design personalizados: implemente um sistema de design personalizado no Compose e adapte as funções combináveis do Material Design para o novo sistema de design.
  • Anatomia de um tema: construções de nível baixo e APIs usadas por MaterialTheme e sistemas de design personalizados.
• Listas e grades: opções do Compose para gerenciar e mostrar listas e grades de dados.
• Texto: principais opções do Compose para exibir e editar texto.
• Gráficos: recursos do Compose para criar e trabalhar com gráficos personalizados.
• Animação: opções do Compose para animar elementos de interface.
• Gestos: crie uma interface do usuário do Compose que detecte e interaja com os gestos do usuário.
• Como gerenciar interações do usuário: como o Compose transforma entradas de baixo nível em interações de nível mais alto para que você possa personalizar a resposta dos componentes às ações do usuário.

Como adotar o Compose

• Migrar apps baseados em visualização: migre seu app baseado em visualização para o Compose.
  • Estratégia de migração: como introduzir o Compose de maneira segura e incremental na base de código.
  • APIs de interoperabilidade: APIs do Compose para ajudar você a combinar o Compose com uma interface baseada em visualização.
  • Outras considerações: temas, arquitetura, testes e outras considerações ao migrar seu app baseado em visualização para o Compose.
• Compose e outras bibliotecas: como usar bibliotecas baseadas em visualização no seu conteúdo do Compose.
• Arquitetura do Compose: implemente o padrão de fluxo unidirecional no Compose, implemente eventos e detentores de estado e trabalhe com ViewModel no Compose.
• Navegação: use NavController para integrar o componente Navigation à sua interface do Compose.
• Recursos: trabalhe com os recursos do app no código do Compose.
• Acessibilidade: atenda usuários com requisitos de acessibilidade.
• Testes: teste seu código do Compose.
  • Folha de referência de testes: uma referência rápida de APIs de teste úteis do Compose.

Outros recursos

• Começar a configurar
• Caminho de aprendizado organizado
• Diretrizes da API Compose
• Referência da API
• Codelabs
• Apps de amostra
• Vídeos

Recomendados para você

• Observação: o texto do link aparece quando o JavaScript está desativado.
• Dados com escopo local usando o CompositionLocal
• Outras considerações
• Anatomia de um tema no Compose