Skip to content
Learni
View all tutorials
Développement Mobile

Comment développer des UIs avec Jetpack Compose en 2026

14 minINTERMEDIATE
AndroidKotlinJetpack Compose

Introduction

Jetpack Compose révolutionne le développement d'interfaces Android en remplaçant XML par du code déclaratif en Kotlin. Cette approche permet une meilleure maintenabilité, des animations fluides et une gestion d'état intuitive. En 2026, maîtriser Compose est essentiel pour tout développeur Android souhaitant livrer des applications performantes et modernes. Ce tutoriel intermédiaire vous guide à travers la création d'une application complète avec état, listes optimisées et navigation.

Prérequis

  • Android Studio Hedgehog ou supérieur
  • Connaissances de base en Kotlin
  • Gradle 8+ et Kotlin 1.9+
  • Un émulateur ou appareil physique Android

Configuration du projet

build.gradle.kts
plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
}

dependencies {
    implementation("androidx.compose.ui:ui:1.7.0")
    implementation("androidx.compose.material3:material3:1.3.0")
    implementation("androidx.navigation:navigation-compose:2.8.0")
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.0")
}

Ajoutez les dépendances Compose et Navigation dans le build.gradle du module. Assurez-vous d'activer le support Compose dans les options buildFeatures.

Premier Composable simple

MainActivity.kt
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp

@Composable
fun GreetingScreen(name: String) {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(
            text = "Bonjour $name !",
            style = MaterialTheme.typography.headlineMedium
        )
        Spacer(modifier = Modifier.height(8.dp))
        Button(onClick = { /* Action */ }) {
            Text("Cliquez ici")
        }
    }
}

Ce Composable affiche un texte et un bouton. Utilisez Column pour empiler les éléments verticalement et appliquez des modifiers pour le style.

Gestion d'état avec remember

CounterScreen.kt
import androidx.compose.runtime.*
import androidx.compose.material3.*

@Composable
fun CounterScreen() {
    var count by remember { mutableStateOf(0) }
    Column {
        Text("Compteur : $count")
        Button(onClick = { count++ }) {
            Text("Incrémenter")
        }
    }
}

remember et mutableStateOf permettent de conserver l'état lors des recompositions. Évitez les variables locales simples qui perdent leur valeur.

Liste performante avec LazyColumn

ItemListScreen.kt
import androidx.compose.foundation.lazy.*
import androidx.compose.material3.*

@Composable
fun ItemListScreen(items: List<String>) {
    LazyColumn {
        items(items) { item ->
            ListItem(
                headlineContent = { Text(item) }
            )
        }
    }
}

LazyColumn recycle les éléments affichés et charge uniquement ceux visibles. Utilisez itemsIndexed pour accéder à l'index.

Navigation entre écrans

AppNavigation.kt
import androidx.navigation.compose.*
import androidx.compose.runtime.*

@Composable
fun AppNavigation() {
    val navController = rememberNavController()
    NavHost(navController, startDestination = "home") {
        composable("home") { GreetingScreen("Utilisateur") }
        composable("list") { ItemListScreen(listOf("A", "B")) }
    }
}

NavHost et NavController gèrent la pile de navigation. Passez des arguments via des routes pour des données simples.

Bonnes pratiques

  • Séparez la logique métier dans des ViewModels
  • Utilisez des Composable stateless quand possible
  • Préférez des modifiers réutilisables
  • Testez les recompositions avec des previews
  • Gérez les thèmes avec MaterialTheme

Erreurs courantes à éviter

  • Oublier d'utiliser remember pour l'état local
  • Appeler des fonctions coûteuses dans les Composables
  • Ignorer la performance des LazyColumn avec des clés uniques
  • Modifier l'état directement sans ViewModel

Pour aller plus loin

Explorez les animations avancées, l'intégration avec Room et les tests UI. Découvrez nos formations Learni.