Usar o Android Studio com o Jetpack Compose

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.

Instalar o Android Studio

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:

  1. 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.
  2. Na barra de pesquisa perto da parte superior do assistente Browse Samples, digite "compose".
  3. Selecione um dos aplicativos de amostra do Jetpack Compose nos resultados da pesquisa e clique em Next.
  4. Mude o Application name e o Project location ou mantenha os valores padrão.
  5. 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:

  1. 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.
  2. Na janela Select a Project Template selecione Empty Compose Activity e clique em Next.
  3. Na janela Configure your project, faça o seguinte:
    1. Defina Name, Package name e Save location como você faria normalmente.
    2. No menu suspenso Language, Kotlin é a única opção disponível porque o Jetpack Compose só funciona com classes criadas em Kotlin.
    3. No menu suspenso Minimum API level, selecione a API de nível 21 ou uma versão mais recente.
  4. Clique em Finish.
  5. 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.