Para ter a melhor experiência de desenvolvimento com o Compose, faça o download e instale o Android Studio. Ele inclui muitos recursos de editor inteligente, como novos modelos de projeto e a visualização imediata da IU do Compose e das animações.
Siga as instruções para criar um novo projeto de app do Compose, configurar o Compose para um projeto de app já existente ou importar um app de exemplo criado no Compose.
Criar um novo app com suporte ao Compose
Se quiser criar um novo projeto, o Android Studio inclui modelos para isso que oferecem suporte ao Compose por padrão. Para criar um novo projeto com o 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 > New Project 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 o nível 21 da API ou mais recente.
- Clique em Finish.
Agora está tudo pronto para você começar a desenvolver um app usando o Jetpack Compose. Para saber o que é possível fazer com o kit de ferramentas, confira o tutorial do Jetpack Compose.
Configurar o Compose para um app existente
Para começar a usar o Compose, primeiro você precisa adicionar algumas configurações do build ao seu
projeto. Adicione a definição abaixo ao arquivo build.gradle
do seu app:
Groovy
android {
buildFeatures {
compose true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.4.2"
}
}
Kotlin
android {
buildFeatures {
compose = true
}
composeOptions {
kotlinCompilerExtensionVersion = "1.4.2"
}
}
Observe o seguinte:
- Definir a sinalização
compose
comotrue
no blocoBuildFeatures
do Android ativa a funcionalidade do Compose. - O controle de versões para a extensão do compilador do Kotlin definido no bloco
ComposeOptions
está vinculado ao controle de versões do Kotlin. Consulte o Mapa de compatibilidade e escolha uma versão da biblioteca que corresponda à versão do Kotlin do seu projeto.
Além disso, adicione a BoM do Compose e o subconjunto de dependências da biblioteca do Compose de que você precisa às suas dependências no bloco abaixo:
Groovy
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2023.01.00')
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3:material3-window-size-class'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.6.1'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}
Kotlin
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2023.01.00")
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation("androidx.compose.material3:material3")
// or Material Design 2
implementation("androidx.compose.material:material")
// or skip Material Design and build directly on top of foundational components
implementation("androidx.compose.foundation:foundation")
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation("androidx.compose.ui:ui")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
// UI Tests
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation("androidx.compose.material:material-icons-core")
// Optional - Add full set of material icons
implementation("androidx.compose.material:material-icons-extended")
// Optional - Add window size utils
implementation("androidx.compose.material3:material3-window-size-class")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.6.1")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.5.1")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
Testar os apps de exemplo do Jetpack Compose
A maneira mais rápida de testar os recursos do Jetpack Compose é testar apps de exemplo do Jetpack Compose (link em inglês) hospedados no GitHub. Para importar um projeto de app de exemplo 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 de cima do assistente Browse Samples, digite "compose".
- Selecione um dos apps de exemplo 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 exemplo no caminho especificado e abre o
projeto. Você pode inspecionar MainActivity.kt
em cada um dos exemplos para verificar as APIs Jetpack Compose, como animação de crossfade,
componentes personalizados, uso de tipografia e exibição de cores claras e escuras
na visualização no ambiente de desenvolvimento integrado.
Para usar o Jetpack Compose no Wear OS, consulte Configurar o Jetpack Compose no Wear OS.