roinsi2025 09-46, ‘TP Android Compose | Cours Menu TP Android Compose ¥ Sommaire * Introduction * Fonctionnement de Android + Sécurité ‘* Moteur de rendu * Principe de Compose + Multipiateforme © cre: «Premier lancement et découverte + Llarchitecture d'un projet Compose + Les dossiers * Les textes + Le fichier AndroidManifest * Personnalis: n de I'applicat * Afaire: + Afaire 2: + Linterface * Imbrication des composants * Une disposition en « grille » * Les animations + Le material design * Définir notre layout / composant + Afaire + Taille et style du texte + Les ressources * Les ressources alternatives -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil Sommaire 1170roinsi2025 09-46, ‘TP Android Compose | Cours © Les images * Les interactions + Les Toast * Les Snackbars + Rendre un bouton cliquable Afaire * Les dialogues * Conditionner I'affichage d'un élément + Structure, organisation d'un code avec plusieurs Screens + Exemple de Screen * Le scaffold + A faire * Les données « MVVM : Model View ViewModel + Larecomposition + Evol n de la structure * Quelques libraires a ajouter ‘© Création du ViewModel * Création de la View + Lastructure du composant * Structure du composant + Les données + La TopAppBar * Le bouton flottant * Laliste + Afaire + Découper plus finement / améliorer laffichage * Organisation du code + Base du composant Afaire « A faire suite * Vous souhaitez aller plus loin ? + Afaire -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hilroinsi2025 09-46, ‘TP Android Compose | Cours * Les permissions * Ajouter la librairie © Utiliser la librai + Afaire + Afaire * Slides Android Base Introduction Dans ce TP, nous allons découvrir Android Compose, la nouvelle fagon de créer des interfaces pour Android. Nous allons y découvrir les bases de Compose, comment créer des interfaces, comment gérer les états, et comment interagir avec les utilisateurs. Llobjectif est de vous donner les clefs pour réaliser le projet final de ce cours : Une application Android qui dialogue avec un périphérique Bluetooth (BLE). Note importante Lapplication que nous réalisons dans ce TP est une application « fictive », elle est la pour vous faire pratiquer Compose. Elle ne sera pas celle a restituer. Cependant, ne la perdez pas, elle vous sera utile comme « projet de référence » pour votre réalisation. Elle va surtout nous servir 4 comprendre comment fonctionne Compose, et comment I'utiliser pour réaliser des interfaces. -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hilsoins12025 09-46 ‘TP Android Compose | Cours hitpsleous.brosseas.ovhplandroidlcomposetandroid-base. html 4770roinsi2025 09-46 ‘TP Android Compose | Cours Fonctionnement de Android Android est une plateforme mobile développée par Google. Elle repose sur un noyau Linux et est globalement utilis¢e pour des smartphones et des tablettes. D'un point de vue sécurité et performance, Android est une plateforme trés intéressante. Elle est également tres populaire, ce qui en fait une plateforme de choix pour le développement d'applications mobiles. Android repose sur plusieurs éléments : + Kotlin : Kotlin est un langage plus récent qui est devenu le langage de prédilection pour le développement Android. * Gradle : Gradle est un outil de build qui permet de compiler, de packager et de déployer les applications Android. + Android SDK : L'Android SDK est un ensemble d'outils et de bibliothéques qui permettent de développer des applications Android. * Play Services : Play Services est un ensemble de services qui permettent d'ajouter des fonctionnalités 4 une application Android. + Compose : Compose est une bibliothéque qui permet de créer des interfaces pour Android. + Jetpack : Jetpack est un ensemble de bibliotheques qui permettent de faciliter le développement d'applications Android. + View : Les Views sont les éléments de base qui permettent de créer des interfaces pour Android (ancien systéme). hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html 570‘010312026 09:46 TP Anois Compose | Cours Android étant relativement ancien, beaucoup d'éléments reposent sur du XML. Cependant, récemment, Google a annoncé Compose, une nouvelle fagon de créer des interfaces pour Android. C'est celle-ci que nous allons découvrir dans ce TP. Sécurité Lors de l'installation d'une application Android. Techniquement, l'application est isolée des autres applications + Utilisation de permissions pour accéder a des ressources. * Isolation des applications (sandbox). + Sécurité des données (chiffrement, etc.). + Permissions pour accéder a des ressources (caméra, contacts, localisation, etc). Signature Lors de installation d'une application, Android vérifie que l'application est signée par un certificat valide. Cela permet de garantir que l'application n'a pas été modifiée depuis sa publication. Cette signature est également utilisée pour identifier I'application et pour gérer les mises a jour. Elle est de type RSA et est stockée dans le fichier APK. Moteur de rendu Depuis l'arrivée de Compose, Android ul les interfaces. Ce moteur nommé « Skia » est un moteur de rendu 2D qui est utilisé par de nombreux projets (Chrome, Firefox, etc.). ise un nouveau moteur de rendu pour afficher Il est trés performant et permet de créer des interfaces fluides et réactives. Il est également trés flexible et permet de créer des interfaces complexes. Principe de Compose + Déclaratif : Compose est un framework déclaratif. Cela signifie que vous décrivez ce que vous voulez afficher, et Compose se charge de mettre a jour I'interface en fonction des changements. + Composable : Compose repose sur le concept de composable. Un composable est une fonction qui prend des parametres et qui retourne un élément de "interface. -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 670‘010312026 09:46 TP Anois Compose | Cours + Observation : Compose permet dobserver des données et de mettre a jour I'interface en fonction des changements. Performances Seul les composants qui ont changé sont mis a jour, ce qui permet d’optimiser les performances. Multiplateforme Avec Compose, il est également possible de créer des interfaces pour d'autres plateformes (Web, Desktop, iOS.). Plusieurs approches sont possibles : Trois termes a retenir : + Compos: a librairie de Google pour Android > Interface déclarative. + KMM : Kotlin Multiplatform (Jetbrains) > Logique métier partagée. + CMP : Compose Multiplatform (Jetbrains) > Interface partagée. Création du projet Pour la création du projet, rien de spécial a prévoir. II s'agit ici de suivre le processus de création d'une application comme habituellement. Pour ca nous allons utiliser « Android Studio » qui est I'IDE a utiliser pour créer une application Android. Lors de la création, Android Studio va nous poser plusieurs questions, nous allons donc choisir : + Template : Empty Compose Activity + Language : Kotlin * SDK Min. : SDK 26. (ou plus) Je vous laisse suivre les étapes de création d'un nouveau projet. -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 710‘TP Android Compose | Cours Mais quelques petites remarques * Le choix du package est trés important. Comme nous avons vu ensemble en cours, le « Package » doit étre unique. En effet deux applications ne peuvent pas avoir le mém. * Choisir un min SDK qui correspond aux cibles des mobiles souhaités. (Si vous étes en Fran ou dans un autre pays, il conviendra de faire le bon choix). hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html‘101032026 08-48 ‘TP Androké Compose | Cours + Kotlin est maintenant le langage a choisir, Java et Kotlin cohabite sans probleme vous n’aurez done aucun probleme de compatibilité. L'émulateur Comme vu ensemble pendant le cours, 'émulateur va nous permettre de tester « simplement » notre application avec des performances suffisantes dans les cas simples. La création de celui-ci est intégrée 4 Android Studio. Dans Android Studio la partie émulateur s'appelle Device Manager et est disponible dans le menu. tools -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hilsoinsi2025 09-46, ‘TP Android Compose | Cours un Tools ~~ VCS Tasks & Contexts IDE Scripting Console Generate JavaDoc... Create Command-line Launcher... XML Actions Markdown Converter JShell Console... Kotlin Groovy Console Cling > % SDK Manager we Resource Manager Troubleshoot Device Connections App Links Assistant Firebase = Layout Inspector AGP Upgrade Assistant... hitpsileours brosseau,soins12025 00-46 ‘TP Android Compose | Cours Pour le choix du type de devices vous étes libres... Mais le mieux est de choisir un « template de mobile » assez représentatif de ce que I'on trouve chez les clients. Un bon choix est par exemple un « Pixel 6a » avec Android Oreo. TIP Le Logo Playstore présent sur la ligne d'un simulateur indique que celui-ci est équipé des Play Services. Bien que dans notre cas ca ne change pas grand-chose. Cependant, je vous invite vivement 8 choisir un émulateur avec les Play Services, car celui-ci sera trés proche d'un vrai t8léphone trouvable dans le commerce. Maintenant que votre émulateur est créé, nous allons pouvoir lancer l'application « Run > Run App ». Premier lancement et découverte Pour débuter (et avant de tout retravailler), je vous laisse compiler et lancer une premiere fois l'application proposée par Google. Dans mon cas I'application est sur la droite. Analysons le code hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html 170‘TP Android Compose | Cours ‘soins12025 09-46 art era reas Pernt Drees Cun oct Sa teCUNesue yet Ose MCL uch ees Modifier paddingCinnerPadding) eet ou (name: String, modifier: Modifier = Modifier) { aces cra difier ackground = trve) O4 cee Ici, nous avons + Notre Mainactivity qui est la premiére activité lancée. Elle contient un setcontent qui va afficher notre interface. * Greeting qui est un composent. Un composant est une partie de I'interface. Ici, nous avons un composant qui affiche un texte. * GreetingPreview qui est une fonction qui a pour but de prévisualiser notre composant Greeting (une preview qui évite de lancer I'application a chaque fois pour voir le rendu). Note Si vous avez des erreurs, il est possible que votre installation d'Android Studio ne soit pas correcte. Je vous invite & vérifier que vous avez bien installé les composants nécessaires. hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html taroto1032025 09:46 TP Anois Compose | Cours L'architecture d'un projet Compose Les dossiers Un projet Android est composé de plusieurs dossiers : + app : C'est le dossier principal de l'application. Il contient le code source, les ressources, les fichiers de configuration, ete. + build : C'est le dossier ou sont stockés les fichiers générés par Gradle lors de la compilation de I'application. * grade : C'est le dossier oll sont stockés les fichiers de configuration de Gradle. + res :Clest le dossier ott sont stockées les ressources de l'application (images, fichiers XML, etc). Nous avons dans ce dossier plusieurs sous-dossiers : = drawable : C'est le dossier oul sont stockées les images. + layout : C'est le dossier ott sont stockés les fichiers XML qui définissent I'interface de l'application. * mipmap : C'est le dossier ol sont stockées les icénes de |'application. + values : C'est le dossier ol sont stockés les fichiers XML qui définissent les valeurs de I'application (couleurs, dimensions, etc). Les textes Android est un systéme d'exploitation pensé pour étre internationalisé. C'est pourquoi il est important de séparer les textes de I'interface de I'application. Pour cela, Android utilise des fichiers XML qui contiennent les textes de l'application. Ces fichiers sont stockés dans le dossier res/values . Avant de continuer, je vous invite & ouvrir le fichier strings.xnl qui se trouve dans le dossier res/values pour y observer les textes de l'application. Le fichier AndroidManifest Pour rappel le fichier manifest va nous permettre d'exposer « de la configuration » relative a votre application sur le téléphone, cette configuration est trés large : -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 413170‘010312026 09:46 TP Anois Compose | Cours + Le nom de votre application. + Les activity accessibles. + Llicéne de votre application. + Les services de votre application. + Les paramétrages spécifiques de vos activités (Orientation, theme, comportement...) Personnalisation de |'application A faire: + Editer le fichier androidManifest.xml . + Changer le nom de votre application (attention a bien utiliser la mécanique it8n ). + Regarder l'ensemble des paramétres spécifier dans le XML + Tester a nouveau votre application TIP Petit raccourci pratique d'Android Studio. Si vous appuyez deux fois sur la touche shiftshift Android Studio vous proposera de chercher des actions / fichiers / menus dans l'ensemble de votre projet. Afaire 2: Changer l'icéne de l'application en utilisant les outils fournis par Google dans Android Studio « Image asset » : -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 14170‘TP Androld Compose | Cours Ot ett ec ice ea elec ea ciay Parent Sample Data Directory rag (le Po Sma Praca Peres ces ter cy Gone es anne reel Poe ae (oer aay rier) Orne sere tai Cer racds Tec Vector Asset PO Rede) Cony POC uur eet) CaaS Cd OP es oi Cones eu Pretec eas Cem are I Cae) Oe OCs PE eluryd le eo eee] le COPE meg Picts eoeeiy Ucn a Otte eeu gay Ce et erences Poe acy Crea crac CUCU Guy ReeC eee ct cs Rreriatecsac Couto] Coe rc mcs Crue Onn Une fois fait, regarder les modifications dans votre projet. Notamment + Le fichier AndroidManifest.xml est-ce que celui-ci a été modifié ? * Si oui, quel(s) élément(s) sont différents ? * Sinon, pouvez-vous me dire pourquoi ? Liinterface hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html‘010312026 09:46 TP Anois Compose | Cours Compose repose sur l'utilisation du code pour définir interface que l'utilisateur va voir. Elle reprend les principes de la programmation en composant qui est largement utilisée dans le développement web. Nous avons a notre disposition un ensemble de composants « fonctionnels » qui vont nous permettre de créer les éléments de notre interface : + Text : Un composant qui permet d'afficher du texte. + sutton : Un composant qui permet diafficher un bouton. * switch : Un composant qui permet d'afficher un toggle (un bouton qui peut étre activé ou désactivé) + Image : Un composant qui permet diafficher une image. + LazyColumn : Un composant qui permet d'afficher une liste. * Scaffold : Un composant qui permet de créer une structure de base pour notre application (barre de navigation, etc.). + TopAppBar : Un composant qui permet de créer une barre de navigation en haut de application. + card : Un composant qui permet de créer une carte. + Icongutton : Un composant qui permet de créer un bouton avec une icéne. + Etc... (lly ena beaucoup plus, mais nous allons nous arréter [a pour I'instant). Nous avons également des composants qui sont la pour définir la structure de notre application : + colunn : Un composant qui permet de créer une colonne. + Row : Un composant qui permet de créer une ligne. + Box : Un composant qui permet de créer une boite. + spacer : Un composant qui permet de créer un espace entre deux éléments. Les composants sont des fonctions que nous allons pouvoir appeler dans notre code. lls seront appelés au bon moment en fonction de conditions que nous allons définir. Les composants seront imbriquables les uns dans les autres, ce qui nous permettra de créer des interfaces complexe. Par exemple : kottin 1 Column) { 2 Text ("Texte 1") 3 Text ("Texte 2") ‘ntps:fcours,brosseau.ovhiplandroiaicompose/android-base. hil 16170roinsi2025 09-46 ‘TP Android Compose | Cours 5 Text ("Texte 3") Ce code va nous permettre d'afficher trois textes les uns en dessous des autres. Et si nous souhaitons afficher les textes les uns a coté des autres ? || suffit de changer le composant Colunn par Row . kottin Row) { Text("Texte 1") 3 Text("Texte 2") 4 Text("Texte 3") Nous pouvons également imbriquer les Colonnes et les Lignes : kotin 1 Column() { 2 Row() { 3 Text("Texte 1") 4 Text("Texte 2") 5 Text(“Texte 3") 6 } 7 Row() { 8 Text("Texte 4") Text("Texte 5") 18 6") 11 y Rn} Cet exemple est la pour vous montrer la puissance de Compose. Compose a été pensé pour étre simple et modulaire, par exemple pour un bouton le principe est le méme : kotiin Button(onClick = { /* Code appelé lors du clique sur le bouton */ }) ( Text ("Mon bouton") Ici nous voyons que le composant Button prend en paramétre une action (un code qui sera appelé lors du clique sur le bouton) et un composant Text qui sera affiché dans le bouton. Pratique ! Et si nous souhaitons un bouton avec un loader ? Et bien c'est simple il -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 17110roinsi2025 09-46, ‘TP Android Compose | Cours suffit de changer le composant Text par un composant CircularProgressIndicator (qui est un loader). kotiin Button(onClick = { /* Code appelé lors du clique sur le bouton */ }) ¢ CircularProgressIndicator() Et évidemment, nous allons pouvoir créer nos propres composants... Mais nous verrons a plus tard. Imbrication des composants Avec Compose, tout est composant. Cela signifie que nous allons pouvoir imbriquer les composants les uns dans les autres pour créer des interfaces complexes. kottin Column ¢ 2 Button(onClick = { /* Action */ }) ( 3 Text ("Cliquez ici") 4 } 5 Spacer(modifier = Modifier.weight(1*)) 6 Text("Un texte”) Comment lire le code ci-dessus ? + Nous avons un composant Column qui contient trois composants : un composant Button , un Composant spacer et un composant Text . + Le composant sutton est un bouton qui affiche le texte « Cliquez ici » et qui appelle une action lorsqu'l est clique. + Le composant spacer est un espace qui prend tout I'espace disponible. + Le composant Text est un texte qui affiche le texte « Un texte ». Une disposition en « grille » Nous construisons done des grilles de composants. -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 18170roinsi2025 08-46 ‘TP Android Compose | Cours eorees peor Column Row Box Et n'oubliez pas Tout est imbriquable, vous pouvez donc imbriquer des column dans des ow ,des Row dans des colunn , ete. Les animations Sans entrer dans les détails, réaliser des animations avec Compose est trés simple. Nous avons & notre disposition plusieurs composants qui vont nous permettre de réaliser des animations : ketlin 1 var counter by remember { mutablestateoF(@) } 2 3 Column { 4 Button(onClick = { counter++ }) { Text ("Action") 6 , 7 8 Animatedvisibility(visible = counter > 0) { 9 Text ("Visible") te > 1 2 AnimatedContent (targetState = count) { targetstate -> 3 Text (text = "Count: $targetstate”) 4 y 15 + Dans cet exemple, nous avons un compteur qui va étre incrémenté lors du clique sur le bouton. Lorsque le compteur est supérieur a 0, le texte « Visible » va apparaitre avec une -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 19170roinsi2025 09-46, ‘TP Android Compose | Cours animation. Et le texte « Count: $targetState » va étre mis a jour avec une animation. C'est pour vous Je vous laisse tester, et garder ce genre de code pour votre projet final. Les animations sont un plus pour une application, elles permettent de rendre l'application plus dynamique et plus agréable a utiliser. Le material design En plus des composants proposés par Compose, nous avons également accas aux composants de Material Design. Le projet que vous avez créé utilise déja le Material Design en version 3. Les composants proposés sont préts a l'emploi, ils intégrent toutes les bonnes pratiques définies par Google. Documentation de Material Design Ce TP est guidé, vous n'avez pas a « apprendre la documentation », par contre je vous invite a la parcourir pour voir les options / fonctionnements, votre compréhension en sera grandement facilitée. Définir notre layout / composant Maintenant que nous avons vu, les bases du fonctionnement de compose (et que vous avez observé le code de I'application de base), nous allons pouvoir commencer a définir notre propre layout. Dans un premier temps, nous allons modifier le composant Greeting pour qu'il affiche « autre chose ». Il va devenir en quelque sorte notre composant principal ( hone ). A faire Nous allons modifier notre composant Greeting pour qu'il resemble a ceci -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 20170roinsi2025 02-46 ‘TP Android Compose | Cours Cae Hello Android! Prototyper l'idée Pour cette premiere fois, nous allons prototyper I'idée ensemble, dans un premier temps tester en utilisant le code suivant @Composable fun Greeting(name: String) { Column { Button(onclick = { /* Action */ }) { Text ("Cliquez ici") hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html 21170toinsi2025 09-46 ‘TP Android Compose | Cours © } 7 Spacer (modifier = Modifier.weight(1f)) 7 S Text("Un texte") ~ } wy Spacer? kottin 1 Spacer(modifier = Modifier.weight(1#)) Un espace qui prend tout I'espace disponible. weight est un pourcentage. Ici nous avons un poids de 1, donc il prend tout I'espace disponible. Centrer nos éléments Plusieurs solutions : * horizontalAlignment = Alignment.CenterHorizontally surla Column . © textAlign = TextAlign.center surle Text . A\ Attention, cela ne fonctionne que si votre Text fait la largeur de I'écran. ketlin 1 Column( 2 horizontalAlignment = Alignment .centerHorizontally 3 rf 4 Spacer (modifier = Modifier.weight(1F)) 5 Text ("Un texte”) + Ajouter un padding Pour ajouter un padding a un composant, nous allons utiliser le Modifier.padding : keotlin 1 Column( 2 horizontalAlignment = Alignment.CenterHiorizontally, 3 modifier = Modifier.padding(16.dp) 4 rf Spacer(modifier = Modifier weight (1*)) ‘ntps:fcours,brosseau.ovhiplandroiaicompose/android-base. hil 22170roinsi2025 09-46 ‘TP Android Compose | Cours Text("Un texte”) Mettre deux boutons céte a cote Pour mettre deux boutons céte a céte, nous allons utiliser un row dans notre column : kotlin 1 @Composable 2 fun Greeting(name: String) { 3 Column( 4 horizontalAlignnent = Alignnent.CenterHorizontally, 5 modifier = Modifier. padding(16.dp) 6 ¢ 7 Row { 8 Button(onClick = { /* Action */ }) { 9 Text ("Cliquez ici") te } ua Spacer (modifier = Modifier.width(16.dp)) 2 Button(onClick = { /* Action */ }) { 3 Text ("Cliquez 18") 4 } 15 + 16 Spacer (modifier = Modifier.weight(1#)) v Text("Un texte”) 18 } 1s + C'est a vous Avec les éléments que nous avons vus ensemble, je vous laisse créer un composant Hone pour qu'il ressemble a l'image ci-dessus. Pour cette premiere fois, je vais vous donner le code complet (profitez-en, ce ne sera pas toujours le cas) : kottin 1 @Composable 2 fun Home(){ 3 Column( 4 modifier = Modifier.padding(innerPadding) 5 rf 6 Spacer(modifier = Modifier.weight(1f)) ‘ntps:fcours,brosseau.ovhiplandroiaicompose/android-base. hil 23170roinsi2025 09-46 18 30 Arrétons-nous un instant, que constatez-vous dans le code que vous avez copié-collé ‘TP Android Compose | Cours modifier = Modifier. fillMaxwidth(), horizontalarrangement = Arrangement.Center, verticalAlignnent = Alignment .centerVertically Greeting( name = “Android”, Spacer(modifier ~ Modifier.weight(1f)) Row { Button(onClick = { /*T0D0*/ }) { Text("Button 1") Spacer(modifier = Modifier.weight(1f)) Button(onClick = { /*TODO*/ }) { Text ("Button 2") @Preview(showBackground = true) fun HomePreview() { sans trop réfléchir @Q... + @Conposable au-dessus de la fonction, indique 'emplacement d'un composant. + @Preview(showBackground = true) permet de réaliser une preview de votre composant sans la lancer sur un téléphone (pratique, testons). -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 2470‘010312026 09:46 TP Anois Compose | Cours Je vous laisse mettre en place le code. Et valider que celui-ci s'affiche correctement dans la partie preview. L'agencement En compose, nous parlons de Modifier . Les modifiers ont des méthodes pour modifier les composants (taille, couleur, etc.). Ils sont chainables et varient en fonction du composant. kotlin 1 Text( 2 text = "Hello World", 3 modifier = Modifier 4 -padding(16.dp) 5 «background (Color Blue) 6 sborder(1.dp, Color.Black) a) Exemple les dimensions ketlin 1 Modifier. fillMaxwidth() // Rempli la largeur 2 Modifier. fillMaxHeight() // Rempli la hauteur 3 Modifier. fillMaxSize() // Rempli la taille Exemple le padding keotlin 1 Modifier.padding(16.dp) // Ajoute un padding de 16dp 2 Modifier.padding(16.dp, 8.dp) // Ajoute un padding de 16dp en largeur et 8dp en rr D » Taille et style du texte ketlin 1 Text(text = content, fontWeight = Fontheight.Light, fontSize = 10.sp) -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 25170roinsi2025 09-46 ‘TP Android Compose | Cours Les ressources Les ressources sont un élément important d'une application Android. Elles peuvent étre de plusieurs types * drawable : Les images. * miap : Les icénes. * values : Les valeurs (couleurs, textes, dimensions, etc.). Internationalisation Je ne le répéterai jamais assez, I'internationalisation est un élément important d'une application. Android Studio propose un outil pour gérer les traductions de votre application. Extraire les textes de votre application est donc un un incontournable. Android Studio vous guide pour cela C'est a vous Je vous laisse extraire les différents textes de votre application Les ressources alternatives Les ressources alternatives sont des ressources qui sont utilisées en fonction de la configuration de l'appareil. Par exemple, si l'appareil est en mode sombre, les ressources alternatives seront utilisées. Voici une liste non exhaustive des configurations qui peuvent étre utilisées hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html 26170roinsi2025 09-46, ‘TP Android Compose | Cours Taille de I'écran Langue. Rotation de I'écran (Paysage / Portrait). DPI Theme sombre Version d’Android ete. Cette création de ressource est réalisable directement depuis Android Studio Rn eee eo oa nC) TSC fortis ECL Te NL airy rena Pyrat UN Rg G c+ Cla ener Ao eons C/C++ He: Refactor RR ns STA ice UL Ct gm meal eal ae ai ee aa axo DTW Ce Run ‘All Tests! with C rm ae Te Geer ult la Eterna hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html 2nrm0roinsi2025 09-46 ‘TP Android Compose | Cours cy Cron Vous pouvez tout redét Llensemble des ressources ( res ) est redéfinissable sans écrire de code. Par exemple si vous souhaitez redéfinir des dans différentes conditions il suffit de : hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html 2270soins12025 02-46 ‘TP Androld Compose | Cours values-it strings.xml values-land dimens.xml strings.xml values-night themes.xml A faire Nous allons tester ensemble ce fonctionnement grace aux textes que vous avez extraits : + Ajouter la langue it (Italien) a votre application. * Traduire votre fichier strings.xm1 en italien. + Lancer votre application et changer la langue de votre téléphone pour voir le résultat. Les images Nous avons dans notre application un dossier drawable qui contient les images de ‘application. Nous allons maintenant ajouter une image & notre application. Je vous laisse chercher le logo de I'ESEO, et I'ajouter a votre application (un glisser- déposer dans le dossier drawable suffit). A faire Placer l'image dans le dossier res/drawable/ . Puis ajouter le au-dessus de votre Text qui est actuellement au centre de votre colunn kottin 1 Image( 2 painter = painterResource(R.drawable.nom_image), 3 contentDescription = "Une image", 4 modifier = Modifier. size(128.dp) hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html 22170roinsi2025 09-46, ‘TP Android Compose | Cours AX 8.drawable.nom_image est un exemple, vous devez remplacer nom_image parle nom de votre image. A, Les interactions Avant de continuer... Les callbacks avec Kotlin Un callback est une fonction qui est passée en paramétre d'une autre fonction. kottin 1 fun dosomething(callback: () -> unit) { 2 calback() 2} Fonctionne dans le code, mais également dans vos composants Compose. kottin 1 @Composable 2 fun MyButton(onclick: () -> Unit) { 3 sutton(onClick = onClick) { 4 Text ("Cliquez ici") 5 y 6} Intéragir avec l'utilisateur est un élément clé d'une application. Sur Android, au-dela dés onClick que nous avons vu, nous avons également accés a d'autres interactions : + Toast : Un message qui s'affiche a I'écran. + Snackbar : Un message qui s'affiche en bas de I'écran. + Dialog : Une fenétre qui s'affiche a I'écran. Les Toast Nous avons une acti code, celui-ci est presque vide. Je vous propose de la modifier, en premier lieu nous é qui pour I'instant ne fait pas grand-chose. Si vous regardez le allons ajouter un message au lancement de celle-ci. Un message simple sur Android s'appelle un Toast : -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 30170roinsi2025 09-46 ‘TP Android Compose | Cours LUT UTS ere e Ajouter un toast directement dans le setContent de votre Mainactivity : Vous pouvez utiliser la completion de votre IDE, toast puis tab. TIP Les toasts sont rapides et simples a mettre en place. Cependant, ils ne sont pas trés beaux. C'est pour ¢a que nous les utiliserons principalement que pour « les informations de tests ou sans grandes importances ». Le code a ajouter : kot // Récupération du context 2 val context = LocalContext. current { Toast.makeText (context, "Je suis un Toast", Toast.LENGTH_LONG). show(); Evidemment, le texte du toast est a internationaliser. Les Snackbars Les snackbars sont des messages qui s'affichent en bas de I'écran. IIs sont plus beaux que les toasts et permettent d'ajouter des actions. hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. html 31170roinsi2025 09-46 ‘TP Android Compose | Cours Vous devez lancer le scan Documentation : [https://developer.android.com/develop/ui/compose/components/snackbar] Des durées d'affichage différentes Plusieurs options s'offre @ vous : © Snackbar. LENGTH_SHORT © Snackbar. LENGTH_LONG © Snackbar. LENGTH_INDEFINITE Rendre un bouton cliquable Pour rendre un bouton cliquable, nous allons utiliser le paramétre onClick kot Button(onClick = { /* Action */ }) { 2 Text ("Cliquez ici") * onClick : L'act Na réaliser lors du clique sur le bouton. Ici, nous avons une action vide (en commentaire /* Action */ ). Nous allons maintenant ajouter une action qui va afficher un toast. hitpsieous.brosseas.ovhiplandroidlcomposetandroid-base. htmlroinsi2025 09-46, ‘TP Android Compose | Cours A faire Je vous laisse modifier le code pour afficher le toast uniquement lors du clique sur le bouton. Les dialogues Les dialogues sont des fenétres qui s'affichent a I'écran. lls permettent de demander une confirmation a l'utilisateur, de lui demander de saisir des informations, etc. Elles sont trés utilisées dans les applications mobiles, car elles sont tres rapides 4 mettre en place : Vousnune u 2 3 4 as 16 v7 18 19 2e 21 22 23 24 kattin val context = LocalContext.current AlertDialog( onDismissRequest = { /* Action */ }, title = { Text("Titre") }, text = { Text("Contenu") }, confirmButton = { Button( onclick = { Toast.makeText(context, "Clic sur le bouton", Toast. LENGTH_LONG) 4 Text ("Confirmer") hb dismissButton = { Button( onClick = { Toast.makeText (context, "Clic sur le bouton", Toast.LENGTH_LONG) rf Text ("Annuler") —‘———D » onDismissRequest ‘ L'action a réaliser lors de la fermeture de la fenétre. -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil 33170roinsi2025 09-46, ‘TP Android Compose | Cours + title : Le titre de la fenétre. + text : Le contenu de la fenétre. + confirmButton : Le bouton de confirmation. + dismisssutton : Le bouton de fermeture. A faire Je vous laisse mettre ce dialogue dans le setcontent de votre Mainactivity . Lancer votre application et tester le dialogue. Normalement, vous devriez voir une fenétre s'afficher avec un titre, un contenu et deux boutons. Conditionner l'affichage d'un élément Le dialogue est un bon exemple pour conditionner l'affichage d'un élément. En effet, il est possible de conditioner l'affichage d'un élément en fonction d'une condition. ketlin 1 var showDialog by remember { mutableStateof(false) } 2 3 if (showDialog) { 4 // Afficher le Dialog 5} 7 Button(onClick - { showDialog - true }) { Text("Afficher le Dialog") Dans cet exemple, nous avons une variable showbialog qui est initialisée 4 false . Lorsque l'utilisateur clique sur le bouton, la variable showbialog passe true et le dialogue s'affiche. MutableState La variable showoialog est une variable d'état. Cela signifie que Compose va observer cette Variable et mettre a jour l'interface en fonction des changements. A faire -ntps:ifcours brosseau.ovhiplandroiaicompose/android-base. hil arr‘010312026 09:46 TP Anois Compose | Cours Modifier votre code pour que le dialogue ne s'affiche que si 'utilisateur clique sur le logo de 'ESEO. Rendre un logo cliquable ? Pour rendre un logo cliquable, il suffit d'ajouter un clickable sur le composant Inage . kotlin 1 Image’ 2 painter = painterResource(R.drawable.logo_eseo),, 3 contentDescription = "Logo £SE0", 4 nodifier Modifier.size(128.dp).clickable ( 5 /* Retion */ Bien que pratique, cette méthode n'est pas la plus propre. En effet, d'un point de vue de laccéssibilité, il est préférable d'utiliser un bouton. Les régles de Google N'oubliez pas, Google propose des régles pour vous aider dans le développement. Exemple pour les dialogues : + La documentation Structure, organisation d'un code avec plusieurs Screens Avant compose, une application Android était composée de plusieurs Activity qui permettaient de naviguer entre les différents écrans de I'application. Avec Compose, nous allons utiliser un autre systéme : les screen . Chaque Screen est une interface qui va étre affichée a I'écran. Nous allons pouvoir naviguer entre les différentes screen en utilisant un Router que nous allons appeler un Naviiost 1 val navController = rememberNavController() ae 2 3 Nawiost( 4 modifier = Nodifier.padéing(iaerPadding), navController = navController, startDestination = “screeni" 7 -ntps:fcours brosseau.ovhiplandroiaicompose/android-base. hil 35070