Démarrage rapide

Pour une expérience de développement optimale avec Compose, téléchargez et installez Android Studio. Celui-ci inclut de nombreuses fonctionnalités d'éditeur intelligentes, telles que de nouveaux modèles de projet et la possibilité de prévisualiser immédiatement votre UI et vos animations Compose.

Télécharger Android Studio

Suivez ces instructions pour créer un projet d'application Compose, configurer Compose pour un projet d'application existant ou importer une application exemple écrite dans Compose.

Créer une application compatible avec Compose

Android Studio inclut divers modèles de projet pour vous aider à démarrer un nouveau projet compatible par défaut avec Compose. Voici comment créer un projet dans lequel Compose est configuré correctement :

  1. Si vous vous trouvez dans la fenêtre Welcome to Android Studio (Bienvenue dans Android Studio), cliquez sur Start a new Android Studio project (Démarrer un nouveau projet Android Studio). Si vous avez déjà ouvert un projet Android Studio, sélectionnez File > New > New Project (Fichier > Nouveau > Nouveau projet) dans la barre de menu.
  2. Dans la fenêtre Select a Project Template (Sélectionner un modèle de projet), sélectionnez Empty Activity (Activité vide) et cliquez sur Next (Suivant).
  3. Dans la fenêtre Configure your project (Configurer votre projet), procédez comme suit :
    1. Définissez les paramètres Name, Package name (Nom, Nom du package) et Save location (Enregistrer l'emplacement) comme vous le faites d'habitude. Notez que, dans le menu déroulant Language (Langage), Kotlin est la seule option disponible, car Jetpack Compose ne fonctionne qu'avec les classes écrites en Kotlin.
    2. Dans le menu déroulant Minimum API level (Niveau d'API minimal), sélectionnez le niveau d'API 21 ou supérieur.
  4. Cliquez sur Finish (Terminer).

Vous êtes maintenant prêt à développer une application avec Jetpack Compose. Pour vous lancer et découvrir ce que vous pouvez faire avec le kit d'outils, suivez le tutoriel Jetpack Compose.

Configurer Compose pour une application existante

Commencez par configurer le compilateur Compose à l'aide de la classe Compose Plug-in Compiler Gradle.

Ajoutez ensuite la définition suivante au fichier build.gradle de votre application :

Groovy

android {
    buildFeatures {
        compose true
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }
}

Définir l'indicateur compose sur true dans le bloc BuildFeatures d'Android active la fonctionnalité Compose dans Android Studio.

Enfin, ajoutez la nomenclature Compose et le sous-ensemble de dépendances de la bibliothèque Compose. vous devez accéder à vos dépendances à partir du bloc suivant:

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2024.09.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.adaptive:adaptive'

    // Optional - Integration with activities
    implementation 'androidx.activity:activity-compose:1.9.2'
    // Optional - Integration with ViewModels
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
    // 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:2024.09.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.adaptive:adaptive")

    // Optional - Integration with activities
    implementation("androidx.activity:activity-compose:1.9.2")
    // Optional - Integration with ViewModels
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
    // Optional - Integration with LiveData
    implementation("androidx.compose.runtime:runtime-livedata")
    // Optional - Integration with RxJava
    implementation("androidx.compose.runtime:runtime-rxjava2")

}

Essayer des applications exemples Jetpack Compose

Le moyen le plus rapide de tester les fonctionnalités de Jetpack Compose est d'essayer les applications exemples Jetpack Compose hébergées sur GitHub. Pour importer un projet d'application exemple à partir d'Android Studio, procédez comme suit :

  1. Si vous vous trouvez dans la fenêtre Welcome to Android Studio (Bienvenue dans Android Studio), sélectionnez Import an Android code sample (Importer un exemple de code Android). Si vous avez déjà ouvert un projet Android Studio, sélectionnez File > New > Import Sample (Fichier > Nouveau > Importer un exemple) dans la barre de menu.
  2. Dans la barre de recherche en haut de l'assistant Browse Samples (Parcourir des exemples), saisissez "compose".
  3. Sélectionnez l'une des applications exemples Jetpack Compose dans les résultats de recherche, puis cliquez sur Next (Suivant).
  4. Modifiez les champs Application name (Nom de l'application) et Project location (Emplacement du projet) ou conservez les valeurs par défaut.
  5. Cliquez sur Finish (Terminer).

Android Studio télécharge l'application exemple dans le chemin d'accès que vous avez spécifié et ouvre le projet. Vous pouvez ensuite inspecter MainActivity.kt dans chacun des exemples pour voir les API Jetpack Compose, telles que l'animation de fondu enchaîné, les composants personnalisés, la typographie, et l'affichage des couleurs claires et sombres dans l'aperçu intégré à l'IDE.

Pour utiliser Jetpack Compose pour Wear OS, consultez Configurer Jetpack Compose sur Wear OS.