Início rápido

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

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.

Instalar o Android Studio

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:

  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 > New Project 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. No menu suspenso Language, Kotlin é a única opção disponível, porque o Jetpack Compose só funciona com classes criadas em Kotlin.
    2. No menu suspenso Minimum API level, selecione o nível 21 da API ou mais recente.
  4. 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 como true no bloco BuildFeatures 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:

  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 de cima do assistente Browse Samples, digite "compose".
  3. Selecione um dos apps de exemplo 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 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.