Démarrage rapide

Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

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 Compose Activity (Activité Compose 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

Pour commencer à utiliser Compose, vous devez d'abord ajouter des configurations de compilation à votre projet. Ajoutez la définition suivante au fichier build.gradle de votre application :

Groovy

android {
    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Kotlin

android {
    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.3.2"
    }
}

Quelques remarques :

  • Définir l'indicateur compose sur true dans le bloc BuildFeatures d'Android active la fonctionnalité Compose.
  • La gestion des versions d'extension du compilateur Kotlin définie dans le bloc ComposeOptions est liée à la gestion des versions Kotlin. Consultez la carte de compatibilité et choisissez la version de la bibliothèque correspondant à la version Kotlin de votre projet.

De plus, ajoutez la nomenclature Compose et le sous-ensemble des dépendances des bibliothèques Compose nécessaires à vos dépendances à partir du bloc ci-dessous :

Groovy

dependencies {

    def composeBom = platform('androidx.compose:compose-bom:2022.12.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.12.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")

}

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.

Utiliser la nomenclature

La nomenclature de Compose vous permet de gérer toutes les versions de votre bibliothèque Compose en ne spécifiant que la version de la nomenclature. La nomenclature elle-même contient des liens vers les versions stables des différentes bibliothèques Compose, de manière à ce qu'elles fonctionnent correctement ensemble. Lorsque vous utilisez la nomenclature dans votre application, vous n'avez pas besoin d'ajouter de versions aux dépendances des bibliothèques Compose elles-mêmes. Lorsque vous mettez à jour la version de la nomenclature, toutes les bibliothèques que vous utilisez sont automatiquement mises à jour vers leur nouvelle version.

Pour savoir quelle version d'une bibliothèque Compose correspond à quelle version de la nomenclature, consultez la section Correspondance entre les versions de la nomenclature et des bibliothèques.

Pourquoi la bibliothèque de compilateur Compose n'est-elle pas incluse dans la nomenclature ?

L'extension du compilateur Kotlin Compose (androidx.compose.compiler) n'est pas associée aux versions des bibliothèques Compose. Au lieu de cela, elle est associée aux versions du plug-in du compilateur Kotlin et publiée à une fréquence différente des autres éléments de Compose. Veillez donc à utiliser une version compatible avec votre version de Kotlin. Vous trouverez la version de Kotlin qui correspond à chaque version du plug-in sur la carte de compatibilité entre Compose et Kotlin.

Comment utiliser une version de bibliothèque différente de celle désignée dans la nomenclature ?

Dans la section des dépendances build.gradle, conservez l'importation de la plate-forme de nomenclature. Sur l'importation des dépendances de bibliothèque, spécifiez la version souhaitée. Par exemple, voici comment déclarer des dépendances pour utiliser une version alpha de Material 3 quelle que soit la version désignée dans la nomenclature :

dependencies {
    // Import the Compose BOM
    implementation platform('androidx.compose:compose-bom:2022.12.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'
}

La nomenclature ajoute-t-elle automatiquement toutes les bibliothèques Compose à mon application ?

Non. Pour ajouter et utiliser des bibliothèques Compose dans votre application, vous devez déclarer chaque bibliothèque en tant que ligne de dépendance distincte dans le fichier Gradle de votre module (au niveau de l'application ; généralement app/build.gradle).

Utiliser la nomenclature garantit la compatibilité de toutes les bibliothèques Compose de votre application. Cependant, la nomenclature n'ajoute pas ces bibliothèques Compose à votre application.

À l'avenir, les versions des bibliothèques Compose seront gérées indépendamment les unes des autres. Cela qui signifie que les numéros de version commenceront à être incrémentés à leur propre rythme. Les dernières versions stables de chaque bibliothèque sont testées et garanties pour fonctionner correctement ensemble. Toutefois, il peut être difficile de trouver la dernière version stable de chaque bibliothèque. La nomenclature vous aide à utiliser automatiquement cette dernière version.

Suis-je obligé d'utiliser la nomenclature ?

Non. Vous pouvez toujours choisir d'ajouter manuellement chaque version de dépendance. Nous vous recommandons cependant d'utiliser la nomenclature, car il sera ainsi plus facile d'utiliser en même temps toutes les dernières versions stables.

La nomenclature fonctionne-t-elle avec les catalogues de versions ?

Oui. Vous pouvez inclure la nomenclature elle-même dans le catalogue de versions et omettre les autres versions des bibliothèques Compose :

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

N'oubliez pas d'importer la nomenclature dans le build.gradle de votre module :

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

    // import Compose dependencies as usual
}

Comment signaler un problème avec la nomenclature ou envoyer des commentaires à son sujet ?

Vous pouvez signaler les problèmes dans notre Issue Tracker.

Correspondance entre les versions de la nomenclature et des bibliothèques

Groupe de bibliothèques Version en 2022.10.00 Version en 2022.11.00 Version en 2022.12.00 Version en 2023.01.00
androidx.compose.animation:animation 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.animation:animation-core 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.animation:animation-graphics 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.foundation:foundation 1.3.0 1.3.1 1.3.1 1.3.1
androidx.compose.foundation:foundation-layout 1.3.0 1.3.1 1.3.1 1.3.1
androidx.compose.material:material 1.3.0 1.3.1 1.3.1 1.3.1
androidx.compose.material:material-icons-core 1.3.0 1.3.1 1.3.1 1.3.1
androidx.compose.material:material-icons-extended 1.3.0 1.3.1 1.3.1 1.3.1
androidx.compose.material:material-ripple 1.3.0 1.3.1 1.3.1 1.3.1
androidx.compose.material3:material3 1.0.0 1.0.1 1.0.1 1.0.1
androidx.compose.material3:material3-window-size-class 1.0.0 1.0.1 1.0.1 1.0.1
androidx.compose.runtime:runtime 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.runtime:runtime-livedata 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.runtime:runtime-rxjava2 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.runtime:runtime-rxjava3 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.runtime:runtime-saveable 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-geometry 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-graphics 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-test 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-test-junit4 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-test-manifest 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-text 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-text-google-fonts 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-tooling 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-tooling-data 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-tooling-preview 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-unit 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-util 1.3.0 1.3.1 1.3.2 1.3.3
androidx.compose.ui:ui-viewbinding 1.3.0 1.3.1 1.3.2 1.3.3