Vous êtes probablement impatient ou impatiente de découvrir comment Jetpack Compose fonctionne. Cependant, avant de vous lancer dans un projet Android existant et de copier-coller machinalement du code utilisant Jetpack Compose, il est important de savoir qu'il faut d’abord importer plusieurs bibliothèques.
Créez un projet Android utilisant Jetpack Compose
Prenez connaissance des dépendances nécessaires à votre projet
En effet, Jetpack Compose se compose de plusieurs dépendances Gradle. On distingue par exemple :
compose.compiler;compose.runtime;compose.ui;compose.foundation;compose.materialoucompose.material3;compose.animation.
Ces diverses dépendances évoluent selon des calendriers de versions distincts. Toutefois, pour éviter de spécifier chaque version de chaque dépendance, nous avons le BoM Compose à disposition.
Créez un nouveau projet
Si vous avez déjà créé un projet dans l’environnement de développement Android Studio, voici un simple rappel des étapes clés à suivre. Si vous n’avez pas encore créé de projet, je vous recommande de parcourir le chapitre Créez le projet et prenez en main l’environnement du cours "Développez votre première application Android". Voici un récapitulatif.
Utilisez une version récente d’Android Studio.
Cliquez sur File - New - New Project.
Dans la catégoriePhone and Tablet, cliquez surEmpty Activity.
Après avoir cliqué surNext, vous êtes invité à nommer votre projet. Dans le cadre du projet fil rouge, appelez-le “BestPodcast”.
Vérifiez que votre projet utilise les dernières versions de Jetpack Compose. Pour savoir comment faire, vous pouvez valider chaque étape de la section suivante “Intégrez Jetpack Compose à un projet existant utilisant XML et Kotlin ou Java”.
Intégrez Jetpack Compose à un projet existant utilisant XML et Kotlin ou Java
Mais si vous souhaitez intégrer Jetpack Compose à un projet existant utilisant XML et Kotlin, sachez que c’est possible et qu’Android supporte d’ailleurs très bien l’usage des deux technologies dans un même projet.
1. Pour cela, utilisez une version récente d’Android Studio.
2. Dans le fichierbuild.gradle.kts de votre module d’application, au sein du blocandroid {}, ajoutez la version de la dépendancecompose.compiler.
android{
// Début du code à rajouter
composeOptions {
kotlinCompilerExtensionVersion = "1.5.14"
}
// Fin du code à rajouter
}3. Restez dans le fichierbuild.gradle.ktsde votre module et activez la fonctionnalitécomposeau sein du blocbuildFeatures.
android{
// Début du code à rajouter
buildFeatures {
compose = true // activer Compose
}
// Fin du code à rajouter
}4. Dans le fichierbuild.gradle.ktsde votre module, au sein du blocdependencies {}, ajoutez les dépendances suivantes.
Si vous n’utilisez pas leGradle Build Catalog , suivez l’option 1. Si, au contraire vous souhaitez l’utiliser, passez directement à l’option 2.
Option 1 | Option 2 |
| |
5. Ensuite dans le fichierlibs.versions.toml , ajoutez les déclarations de dépendances et versions suivantes :
[versions]
# début du code à vérifier dans cette section
activityCompose = "1.9.0"
composeBom = "2024.06.00"
lifecyleViewModelCompose = "2.8.0"
# fin
[libraries]
# début du code à vérifier dans cette section
androidx-activity-compose = { group = "androidx.activity", name = "activity-compose", version.ref = "activityCompose" }
androidx-compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
androidx-ui-tooling-preview = { group = "androidx.compose.ui", name = "ui-tooling-preview" }
androidx-ui-test-manifest = { group = "androidx.compose.ui", name = "ui-test-manifest" }
androidx-ui-test-junit4 = { group = "androidx.compose.ui", name = "ui-test-junit4" }
androidx-material-icons = { group = "androidx.compose.material", name = "material-icons-extended"}
androidx-lifecycle-viewmodel-compose = { group = "androidx.lifecycle:", name = "lifecycle-viewmodel-compose", version.ref ="lifecyleViewModelCompose"}
# fin6. Veillez à ce que la version de Kotlin de votre projet soit bien compatible avec la version du Compose Compiler. Par exemple, pour utiliser la version 1.5.14 du Compiler comme ci-dessus, il faut utiliser la version 1.9.24 de Kotlin. Dans le fichierbuild.gradle.ktsde votre projet (et non plus du module), vous devez avoir quelque chose comme ça pour les deux options.
Option 1 | Option 2 |
| |
Dans le fichier toml du module, ajoutez ce code :
[versions]
# début du code à vérifier dans cette section
agp = "8.4.2"
kotlin = "1.9.24"
# fin
[plugins]
# début du code à vérifier dans cette section
android-application = { id = "com.android.application", version.ref = "agp" }
jetbrains-kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }
# fin6. Synchronisez les dépendances du projet en cliquant sur le boutonSync nowqui apparaît en haut.
7. Démarrez l’application afin de vérifier que tout fonctionne.
Pour la version 2024.06.00 de Jetpack Compose que nous avons spécifiée dans les dépendances, les versions de
compileSdkVersionettargetSdkVersiondoivent être au moins égales à la version 34.
android {
/*...*/
compileSdk = 34
defaultConfig {
targetSdk = 34
}
/*...*/
}Les versions de Gradle et du plugin Android Gradle doivent être supérieures ou égales à 8.1.0 pour prendre en charge cette version de Jetpack Compose. Pour cela, vérifiez la version vers laquelle pointe l’url
distributionUrldéfinie dans le fichiergradle-wrapper.properties. Elle doit être au minimum comme ceci.
distributionUrl=https\://services.gradle.org/distributions/gradle-8.1-all.zipVoici la vidéo qui vous montre les étapes principales pour créer un projet Android avecGradle Build Catalog (option 2) et comment intégrer Jetpack Compose au sein d’un projet existant, dont la configuration des dépendances est faite avec des fichiers .gradle(variante de l’option 1).
Observez la structure de l’activité principale
Maintenant que votre projet "BestPoscast" est créé, observons la structure de l’activité principale qui a été générée par défaut par Android Studio.
Voici à quoi ressemble cette activité :
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
enableEdgeToEdge()
setContent {
BestPodcastTheme {
Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
Greeting(
name = "Android",
modifier = Modifier.padding(innerPadding)
)
}
}
}
}
}L’élément clé ici est le type de l’activité :ComponentActivity. Grâce à cette activité, nous allons pouvoir initier notre interface via la fonction setContent(). Cette fonction remplace la fonctionsetContentView()utilisée dans la boîte à outils d'interface utilisateur (UI toolkit) originale, qui lie le fichier XML représentant notre vue à notre activité. Voici ce que ça donne avec le UI toolkit traditionnel.
class OldMainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main_original)
}Avant de continuer, sachez que Jetpack Compose privilégie une architecture à activité unique et sans fragments car cela simplifie la gestion de l'état et de la navigation, améliore les performances et facilite les tests.
Cependant, Jetpack Compose offre également des API pour s'intégrer dans une application préexistante utilisant XML et Kotlin ou Java, avec plusieurs activités et fragments.
À vous de jouer !
Contexte
Vous savez maintenant comment initier un projet Jetpack Compose et à quoi ressemble une activité utilisant Jetpack Compose. Il est temps de mettre tout ça en pratique.
Consignes
Créez un nouveau projet utilisant Jetpack Compose que vous appellerez par exemple “BestPodcast”.
Validez que les versions des dépendances utilisées sont bien les dernières. En particulier la version du langage Kotlin, la dépendance au Compose Compiler et celle du BoM Compose.
Lancez l’application créée par défaut sur votre téléphone Android ou sur un émulateur.
Livrables
Votre projet sur Android Studio doit être conforme aux consignes ci-dessus.
En résumé
Pour intégrer Jetpack Compose à votre projet, il est nécessaire d'ajouter plusieurs bibliothèques dans les dépendances.
La version de Jetpack Compose implique des versions minimales de Kotlin, de Gradle et du SDK de Android.
En utilisant l'activité
ComponentActivity, vous pouvez créer une activité exclusivement basée sur Jetpack Compose.La fonction
setContentest utilisée pour établir la racine de l'écran.
Maintenant que votre projet est prêt et que nous avons compris comment créer une activité permettant d’inclure du code Jetpack Compose, il est temps de découvrir votre premier composant et de comprendre les spécificités de Jetpack Compose.
