Usar o Android Studio com o Jetpack Compose

O Jetpack Compose é um toolkit moderno para criação de IU nativa no Android. Ele tem como base o modelo de programação declarativa. Assim, é possível simplesmente descrever a aparência da IU, e o Compose cuidará do restante. A IU é atualizada automaticamente à medida que o estado do app muda. Por ser criado em Kotlin, o Jetpack Compose é completamente interoperável com a linguagem de programação Java e tem acesso direto a todas as APIs do Android e do Jetpack. Como ele é compatível com o toolkit de IU já existente, você pode mesclar e combinar visualizações clássicas e novas. Além disso, ele foi projetado com o Material e com animações desde o início.

Para ter a melhor experiência de desenvolvimento com o Jetpack Compose, faça o download da versão canário mais recente do pré-lançamento do Android Studio. Isso porque, ao usar o Android Studio para desenvolver seu app com o Jetpack Compose, você pode aproveitar os recursos do editor inteligente, como os modelos em New Project e a visualização imediata da IU do Compose.

Faça o download do Android Studio Canary

Depois de instalar o Android Studio, siga as instruções abaixo para testar um app de amostra 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:
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.
Clique em Finish.
Verifique se o arquivo build.gradle do projeto está configurado corretamente, conforme descrito em Configurar o Gradle.

Agora você está pronto para 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.

Adicionar o Jetpack Compose a um projeto já existente

Caso queira usar o Jetpack Compose em um projeto já existente, defina seu projeto com as configurações e dependências necessárias.

Configurar o Kotlin

Confira se você está usando o Kotlin 1.4.30 ou uma versão mais recente no projeto:

plugins {
  id 'org.jetbrains.kotlin.android' version '1.4.30'
}

Configurar o Gradle

Você precisa definir o nível mínimo da API do seu app como 21 ou mais recente e ativar o Jetpack Compose no arquivo build.gradle do app, como mostrado abaixo. Defina também a versão do plug-in do compilador Kotlin.

android {
    defaultConfig {
        ...
        minSdkVersion 21
    }

    buildFeatures {
        // Enables Jetpack Compose for this module
        compose true
    }
    ...

    // Set both the Java and Kotlin compilers to target Java 8.

    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.0.0-beta01'
    }
}

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.

dependencies {
    implementation 'androidx.compose.ui:ui:1.0.0-beta01'
    // Tooling support (Previews, etc.)
    implementation 'androidx.compose.ui:ui-tooling:1.0.0-beta01'
    // Foundation (Border, Background, Box, Image, Scroll, shapes, animations, etc.)
    implementation 'androidx.compose.foundation:foundation:1.0.0-beta01'
    // Material Design
    implementation 'androidx.compose.material:material:1.0.0-beta01'
    // Material design icons
    implementation 'androidx.compose.material:material-icons-core:1.0.0-beta01'
    implementation 'androidx.compose.material:material-icons-extended:1.0.0-beta01'
    // Integration with activities
    implementation 'androidx.activity:activity-compose:1.3.0-alpha03'
    // Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:1.0.0-alpha02'
    // Integration with observables
    implementation 'androidx.compose.runtime:runtime-livedata:1.0.0-beta01'
    implementation 'androidx.compose.runtime:runtime-rxjava2:1.0.0-beta01'

    // UI Tests
    androidTestImplementation 'androidx.compose.ui:ui-test-junit4:1.0.0-beta01'
}