Como adicionar o Jetpack Compose ao app

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

Configurar seu ambiente de desenvolvimento

Instalar a versão correta do Android Studio

Para ter a melhor experiência de desenvolvimento com o Jetpack Compose, faça o download do Android Studio e configure o Plug-in do Android para Gradle correspondente à versão do Android Studio:

buildscript {
    ...
    dependencies {
        classpath "com.android.tools.build:gradle:7.4.1"
        ...
    }
}

Configurar o Kotlin

Confira se você está usando o Kotlin 1.8.10 no projeto:

plugins {
    id 'kotlin-android'
}

Configurar o Gradle

Você precisa definir o nível mínimo da API do seu app como 21 ou mais recente, ativar o Jetpack Compose no arquivo build.gradle do app e adicionar as dependências da biblioteca, conforme mostrado no guia Início rápido.

Reutilizar o tema de visualização no Compose

Se você acabou de adicionar o Compose ao seu projeto, talvez queira que ele herde os temas disponíveis no sistema de visualização, em vez de reescrever seu próprio tema do Material Design no Compose desde o início.

Se você está usando a biblioteca MDC no seu app Android, a biblioteca MDC Compose Theme Adapter (link em inglês) permite que você reutilize com facilidade, nos seus elementos combináveis, as cores, tipografias e formas presentes nos temas existentes baseados na visualização. Isso é possível com a API MdcTheme.

Se você estiver usando temas XML do AppCompat, use o AppCompat Compose Theme Adapter, que contém a API AppCompatTheme.

Inclua a dependência necessária no arquivo build.gradle do app, conforme mostrado abaixo:

dependencies {
    // When using a MDC theme
    implementation "com.google.android.material:compose-theme-adapter:1.1.16"

    // When using a AppCompat theme
    implementation "com.google.accompanist:accompanist-appcompat-theme:0.28.0"
}

Começar a migrar para o Compose

Consulte o guia Estratégia de migração para orientações sobre como iniciar a migração para o Compose. Aprenda a introduzir o Compose de maneira segura e incremental na base de código.

Para mais informações sobre a ComposeView e outras APIs de interoperabilidade, consulte o Guia das APIs de interoperabilidade. Para saber mais sobre outras APIs de recursos no Compose, confira o guia Recursos no Compose.

Testar a IU do Compose em conjunto com visualizações

Após migrar partes do seu app para o Compose, os testes são essenciais para garantir que não haja nenhuma falha.

Quando uma atividade ou um fragmento usa o Compose, em vez de utilizar a ActivityScenarioRule, você precisa usar a createAndroidComposeRule, que integra a ActivityScenarioRule com uma ComposeTestRule que possibilita testar o código do Compose e da visualização ao mesmo tempo.

class MyActivityTest {
    @Rule
    @JvmField
    val composeTestRule = createAndroidComposeRule<MyActivity>()

    @Test
    fun testGreeting() {
        val greeting = InstrumentationRegistry.getInstrumentation()
            .targetContext.resources.getString(R.string.greeting)

        composeTestRule.onNodeWithText(greeting).assertIsDisplayed()
    }
}
AddingComposeToYourAppSnippets.kt

Consulte o guia Como testar o layout do Compose para saber mais sobre testes e a interoperabilidade com o Espresso.

Se você usa o componente de navegação no app, confira a seção "Interoperabilidade" do guia "Como navegar com o Compose".

Próximas etapas

Confira mais informações sobre o Compose no índice de documentação. Há diferentes abordagens para adotar o Compose no app. Saiba mais sobre isso no guia Como adotar o Compose no seu app, que também tem links para outros guias, incluindo Como integrar o Compose à arquitetura de app que você já usa e Como integrar o Compose à IU já existente.