Para ter a melhor experiência de desenvolvimento com o Jetpack Compose, faça o download e instale o Android Studio. Ela inclui muitos recursos de editor inteligente, como novos modelos de projeto e a visualização imediata da IU do Compose e das animações.
Depois de instalar o Android Studio, siga as instruções abaixo para testar um app de exemplo do Jetpack Compose, criar um novo projeto de app no Jetpack Compose ou adicionar compatibilidade com o Jetpack Compose a um projeto de app já existente.
Testar os apps de amostra do Jetpack Compose
Depois de executar a versão mais recente do Android Studio, a maneira mais rápida de testar os recursos do Jetpack Compose é com os Apps de amostra do Jetpack Compose, hospedados no GitHub (link em inglês). Para importar um projeto de app de amostra do Android Studio, faça o seguinte:
- Se você estiver na janela Welcome to Android Studio, selecione Import an Android code sample. Caso você já tenha um projeto aberto no Android Studio, selecione File > New > Import Sample na barra de menus.
- Na barra de pesquisa perto da parte superior do assistente Browse Samples, digite "compose".
- Selecione um dos aplicativos de amostra do Jetpack Compose nos resultados da pesquisa e clique em Next.
- Mude o Application name e o Project location ou mantenha os valores padrão.
- Clique em Finish.
O Android Studio faz o download do app de amostra para o caminho especificado e abre o projeto. Você pode inspecionar MainActivity.kt
em cada uma das amostras para ver as APIs Jetpack Compose, como animação de fading cruzado,
componentes personalizados, uso de tipografia e exibição de cores claras e escuras
na visualização no ambiente de desenvolvimento integrado.
Criar um novo app compatível com o Jetpack Compose
Caso você queira, o Android Studio inclui modelos para ajudar a iniciar um novo projeto que inclua compatibilidade com o Jetpack Compose por padrão. Para criar um novo projeto que inclua o Jetpack Compose, faça o seguinte:
- Se estiver na janela Welcome to Android Studio clique em Start a new Android Studio project. Caso você já tenha um projeto aberto no Android Studio, selecione File > New > Import Sample na barra de menus.
- Na janela Select a Project Template selecione Empty Compose Activity e clique em Next.
- Na janela Configure your project, faça o seguinte:
- Defina Name, Package name e Save location como você faria normalmente.
- No menu suspenso Language, Kotlin é a única opção disponível porque o Jetpack Compose só funciona com classes criadas em Kotlin.
- No menu suspenso Minimum API level, selecione a API de nível 21 ou uma versão mais recente.
- Clique em Finish.
- Confira se o arquivo
build.gradle
do projeto está configurado corretamente, conforme descrito em Adicionar dependências do toolkit do Jetpack Compose.
Agora está tudo pronto para você começar a desenvolver um app usando o Jetpack Compose. Para ajudar você a começar a aprender sobre o que é possível fazer com o toolkit, veja o tutorial do Jetpack Compose.
Para usar o Jetpack Compose no Wear OS, consulte Configurar o Jetpack Compose no Wear OS.
Adicionar dependências do toolkit do Jetpack Compose
Inclua dependências do toolkit do Jetpack Compose no arquivo build.gradle
do app,
como mostrado abaixo.
Groovy
dependencies { implementation 'androidx.compose.ui:ui:1.1.1' // Tooling support (Previews, etc.) implementation 'androidx.compose.ui:ui-tooling:1.1.1' // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.) implementation 'androidx.compose.foundation:foundation:1.1.1' // Material Design implementation 'androidx.compose.material:material:1.1.1' // Material design icons implementation 'androidx.compose.material:material-icons-core:1.1.1' implementation 'androidx.compose.material:material-icons-extended:1.1.1' // Integration with activities implementation 'androidx.activity:activity-compose:1.4.0' // Integration with ViewModels implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.4.1' // Integration with observables implementation 'androidx.compose.runtime:runtime-livedata:1.1.1' implementation 'androidx.compose.runtime:runtime-rxjava2:1.1.1' // UI Tests androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.1.1' }
Kotlin
dependencies { implementation("androidx.compose.ui:ui:1.1.1") // Tooling support (Previews, etc.) implementation("androidx.compose.ui:ui-tooling:1.1.1") // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.) implementation("androidx.compose.foundation:foundation:1.1.1") // Material Design implementation("androidx.compose.material:material:1.1.1") // Material design icons implementation("androidx.compose.material:material-icons-core:1.1.1") implementation("androidx.compose.material:material-icons-extended:1.1.1") // Integration with observables implementation("androidx.compose.runtime:runtime-livedata:1.1.1") implementation("androidx.compose.runtime:runtime-rxjava2:1.1.1") // UI Tests androidTestImplementation("androidx.compose.ui:ui-test-junit4:1.1.1") }
Adicionar o Jetpack Compose a um projeto já existente
Caso queira usar o Jetpack Compose em um projeto já existente, defina o projeto com as configurações e dependências necessárias. Para ver mais informações, consulte Como adicionar o Jetpack Compose ao app.