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 interface 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 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
Primeiro, configure o compilador do Compose usando o plug-in do Gradle do compilador do Compose.
Em seguida, adicione a seguinte definição ao arquivo build.gradle do app:
Groovy
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
Definir a flag compose como true no bloco BuildFeatures
do Android ativa a funcionalidade do Compose no Android Studio.
Por fim, 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:2024.10.01')
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.adaptive:adaptive'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.9.2'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
// 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:2024.10.01")
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.adaptive:adaptive")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.9.2")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
// 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.
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Como navegar com o Compose
- Como testar o layout do Compose
- Reagir ao foco