Jetpack Compose est un framework moderne développé par Google pour créer des interfaces utilisateur sur Android. Contrairement à l’approche traditionnelle avec XML, Jetpack Compose utilise Kotlin pour concevoir des interfaces déclaratives. Cela permet une approche plus réactive et un développement plus rapide, avec moins de code.

Dans cet article, nous allons voir comment créer une application Android de base avec Jetpack Compose.

---

1. Prérequis

Avant de commencer, assurez-vous que vous avez installé Android Studio avec les outils nécessaires pour le développement Android. Vous devez également utiliser une version récente d’Android Studio qui prend en charge Jetpack Compose (à partir de la version 4.0).

Voici les prérequis :

• Android Studio installé (version stable recommandée).
• Kotlin (Jetpack Compose est basé sur Kotlin).
• Un appareil Android ou un émulateur pour tester l’application.

---

2. Créer un nouveau projet Android avec Jetpack Compose

1. Ouvrir Android Studio et créer un nouveau projet :
   • Allez dans File > New > New Project.
   • Sélectionnez Empty Compose Activity dans les modèles proposés.
   • Donnez un nom à votre application et configurez les autres paramètres (nom du package, langue Kotlin, etc.).
   • Cliquez sur Finish pour créer le projet.
2. Une fois le projet créé, vous verrez qu’Android Studio a déjà configuré la structure de base pour Jetpack Compose, avec un fichier MainActivity.kt et des configurations dans le fichier build.gradle.

---

3. Configurer Jetpack Compose dans le fichier build.gradle

Assurez-vous que le fichier build.gradle (Module: app) est bien configuré pour utiliser Jetpack Compose. Ce fichier doit inclure les dépendances suivantes :

gradleCopierModifierplugins {
    id 'com.android.application'
    id 'kotlin-android'
    id 'kotlin-kapt'
}

android {
    compileSdk 33

    defaultConfig {
        applicationId "com.example.mycomposeapp"
        minSdk 21
        targetSdk 33
        versionCode 1
        versionName "1.0"
    }

    buildFeatures {
        compose true
    }

    composeOptions {
        kotlinCompilerExtensionVersion '1.4.0' // Remplacez par la version actuelle
        kotlinCompilerVersion '1.8.0' // Remplacez par la version actuelle
    }

    packagingOptions {
        pickFirst 'META-INF/*'
    }

    kotlinOptions {
        jvmTarget = "1.8"
    }
}

dependencies {
    implementation 'androidx.core:core-ktx:1.10.0'
    implementation 'androidx.compose.ui:ui:1.4.0'
    implementation 'androidx.compose.material:material:1.4.0'
    implementation 'androidx.compose.ui:ui-tooling-preview:1.4.0'
    debugImplementation 'androidx.compose.ui:ui-tooling:1.4.0'
    implementation 'androidx.lifecycle:lifecycle-runtime-ktx:2.5.1'
    implementation 'androidx.activity:activity-compose:1.7.0'
}

---

4. Comprendre la structure de base de Jetpack Compose

Jetpack Compose utilise une approche déclarative pour construire des interfaces utilisateur. Cela signifie que vous déclarez simplement ce que vous voulez afficher, et Jetpack Compose s’occupe du reste. Le principal composant de Jetpack Compose est un Composant (ou @Composable).

Examinons la structure du projet et les composants principaux :

MainActivity.kt

kotlinCopierModifierpackage com.example.mycomposeapp

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.tooling.preview.Preview
import com.example.mycomposeapp.ui.theme.MyComposeAppTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeAppTheme {
                // Utilisation de la fonction Composable pour construire l'interface
                Greeting("Android")
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    // Interface utilisateur déclarative
    Column {
        Text(text = "Hello, $name!")
        Button(onClick = { /* Action */ }) {
            Text("Click me")
        }
    }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    MyComposeAppTheme {
        Greeting("Android")
    }
}

Explication du code :

• @Composable : C’est une annotation spéciale qui transforme une fonction en un composant que vous pouvez afficher à l’écran. Par exemple, la fonction Greeting est un composant composable qui affiche un texte et un bouton.
• setContent { ... } : Cette fonction définit le contenu de l’activité. C’est ici que vous déclarez les composants à afficher, comme Greeting("Android").
• Column : Un layout qui place les éléments enfants verticalement. Il peut être utilisé pour organiser d’autres composants.
• Text : Affiche une chaîne de texte à l’écran.
• Button : Crée un bouton sur lequel l’utilisateur peut cliquer. À l’intérieur du bouton, vous pouvez ajouter un composant Text pour afficher du texte sur le bouton.
• @Preview : Cette annotation permet d’afficher un aperçu de l’interface utilisateur dans Android Studio sans avoir à lancer l’application. C’est très utile pour voir à quoi ressemble l’UI pendant le développement.

---

5. Ajouter des interactions utilisateur

Jetpack Compose simplifie l’ajout d’interactions. Par exemple, vous pouvez facilement gérer des événements de clic sur des boutons.

Voici un exemple où nous ajoutons une variable d’état pour afficher un message lorsque le bouton est cliqué :

kotlinCopierModifierimport androidx.compose.runtime.*

@Composable
fun Greeting(name: String) {
    var clicked by remember { mutableStateOf(false) }

    Column {
        Text(text = if (clicked) "You clicked the button!" else "Hello, $name!")
        Button(onClick = { clicked = !clicked }) {
            Text("Click me")
        }
    }
}

Dans cet exemple, nous utilisons la fonction remember pour stocker l’état local de la variable clicked, qui change chaque fois que le bouton est cliqué.

---

6. Personnaliser l’apparence avec Material Design

Jetpack Compose utilise par défaut les composants Material Design. Vous pouvez personnaliser facilement l’apparence des composants avec différents thèmes et styles.

Voici un exemple où nous modifions l’apparence du bouton et du texte :

kotlinCopierModifierimport androidx.compose.material3.*

@Composable
fun CustomButton() {
    Button(onClick = { /* Action */ }, colors = ButtonDefaults.buttonColors(containerColor = MaterialTheme.colorScheme.primary)) {
        Text("Styled Button")
    }
}

Dans cet exemple, nous utilisons ButtonDefaults.buttonColors pour personnaliser les couleurs du bouton.

---

7. Tester l’application

Une fois votre code prêt, vous pouvez tester l’application sur un émulateur ou un appareil Android réel :

1. Emulateur : Allez dans Tools > AVD Manager pour créer et lancer un émulateur Android.
2. Appareil réel : Connectez votre appareil via USB et activez le mode Débogage USB dans les options de développeur.

Cliquez sur Run dans Android Studio pour installer l’application et voir le résultat sur votre appareil ou émulateur.

---

8. Conclusion

Jetpack Compose simplifie considérablement le développement d’applications Android en permettant aux développeurs de créer des interfaces utilisateur de manière déclarative et réactive. Dans cet article, nous avons vu les bases de Jetpack Compose, y compris la création de composants @Composable, l’utilisation de layouts comme Column, et l’ajout d’interactions utilisateur. Avec Jetpack Compose, vous pouvez créer des applications Android élégantes et réactives avec moins de code et une meilleure expérience de développement.