Início rápido

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.3.2"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Alguns detalhes a serem observados:

  • Definir a sinalização compose como true no bloco BuildFeatures do Android ativa a funcionalidade do Compose.
  • O controle de versões da 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:2022.10.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.5.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:2022.10.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.5.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 amostra 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.

Como usar a Lista de materiais

A Lista de materiais (BoM) do Compose permite gerenciar todas as versões da biblioteca do Compose especificando apenas a versão da BoM. A BoM tem links para as versões estáveis das diferentes bibliotecas do Compose de maneira que elas funcionem bem juntas. Ao usar a BoM no app, não é necessário adicionar qualquer versão às dependências da biblioteca do Compose. Quando você atualiza a versão da BoM, todas as bibliotecas que você está usando são atualizadas de forma automática para as novas versões.

Para descobrir quais versões da biblioteca do Compose estão mapeadas para uma versão específica da BoM, confira Usar a BoM para mapear versões de bibliotecas.

Por que a biblioteca Compose Compiler não está inclusa na BoM?

A extensão do compilador Kotlin do Compose (androidx.compose.compiler) não está vinculada às versões da biblioteca do Compose. Em vez disso, ela está vinculada a versões do plug-in do compilador Kotlin, que foram lançadas em uma cadência separada do Compose. Portanto, use uma versão compatível com a versão do Kotlin. Você pode encontrar a versão do Kotlin que mapeia cada versão do plug-in no Mapa de compatibilidade do Compose para Kotlin.

Como usar uma versão de biblioteca diferente da que é designada na BoM?

Na seção de dependências do build.gradle, mantenha a importação da plataforma BoM. Na importação das dependências da biblioteca, especifique a versão preferida. Por exemplo, veja como declarar dependências se você quer usar uma versão Alfa do Material 3, independente da versão designada na BoM:

dependencies {
    // Import the Compose BOM
    implementation platform('androidx.compose:compose-bom:2022.10.00')

    // Override Material Design 3 library version with a pre-release version
    implementation 'androidx.compose.material3:material3:1.1.0-alpha01'

    // Import other Compose libraries without version numbers
    // ..
    implementation 'androidx.compose.foundation:foundation'
}

A BoM adiciona de forma automática todas as bibliotecas do Compose ao meu app?

Não. Para adicionar e usar bibliotecas do Compose no seu app, é necessário declarar cada biblioteca como uma linha de dependência separada no arquivo Gradle do módulo no nível do app, geralmente em app/build.gradle.

O uso da BoM garante que as versões de qualquer biblioteca do Compose no seu app sejam compatíveis, mas ela não adiciona essas bibliotecas ao seu app.

A partir de agora, as bibliotecas do Compose vão ser criadas de maneira independente, o que significa que os números de versão vão começar a ser incrementados no próprio ritmo. As versões mais estáveis de cada biblioteca são testadas, e é garantido que elas vão funcionar bem juntas. No entanto, encontrar as versões estáveis mais recentes de cada biblioteca pode ser difícil. Por isso, a BoM ajuda você a usar essas versões de forma automática.

O uso da BoM é obrigatório?

Não. Você ainda pode adicionar cada versão de dependência manualmente. No entanto, recomendamos a BoM, porque ela facilita o uso de todas as versões estáveis mais recentes ao mesmo tempo.

A BoM funciona com o catálogos de versões?

Sim. É possível incluir a BoM no catálogo de versões e omitir as outras versões de biblioteca do Compose:

[libraries]
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "androidxComposeBom" }
androidx-compose-foundation = { group = "androidx.compose.foundation", name = "foundation" }

Não se esqueça de importar a BoM no build.gradle do módulo:

dependencies {
    val composeBom = platform(libs.androidx.compose.bom)
    implementation(composeBom)
    androidTestImplementation(composeBom)

    // import Compose dependencies as usual
}

Como posso informar um problema ou enviar feedback sobre a BoM?

Você pode registrar problemas no nosso Issue Tracker.

Usar a BoM para mapear versões de bibliotecas

Grupo de bibliotecas Versão em 2022.10.00
androidx.compose.animation:animation 1.3.0
androidx.compose.animation:animation-core 1.3.0
androidx.compose.animation:animation-graphics 1.3.0
androidx.compose.foundation:foundation 1.3.0
androidx.compose.foundation:foundation-layout 1.3.0
androidx.compose.material:material 1.3.0
androidx.compose.material:material-icons-core 1.3.0
androidx.compose.material:material-icons-extended 1.3.0
androidx.compose.material:material-ripple 1.3.0
androidx.compose.material3:material3 1.0.0
androidx.compose.material3:material3-window-size-class 1.0.0
androidx.compose.runtime:runtime 1.3.0
androidx.compose.runtime:runtime-livedata 1.3.0
androidx.compose.runtime:runtime-rxjava2 1.3.0
androidx.compose.runtime:runtime-rxjava3 1.3.0
androidx.compose.runtime:runtime-saveable 1.3.0
androidx.compose.ui:ui 1.3.0
androidx.compose.ui:ui-geometry 1.3.0
androidx.compose.ui:ui-graphics 1.3.0
androidx.compose.ui:ui-test 1.3.0
androidx.compose.ui:ui-test-junit4 1.3.0
androidx.compose.ui:ui-test-manifest 1.3.0
androidx.compose.ui:ui-text 1.3.0
androidx.compose.ui:ui-text-google-fonts 1.3.0
androidx.compose.ui:ui-tooling 1.3.0
androidx.compose.ui:ui-tooling-data 1.3.0
androidx.compose.ui:ui-tooling-preview 1.3.0
androidx.compose.ui:ui-unit 1.3.0
androidx.compose.ui:ui-util 1.3.0
androidx.compose.ui:ui-viewbinding 1.3.0