Créer votre première application Android

1. Avant de commencer

Si ce n'est pas déjà fait, installez Android Studio sur votre ordinateur. Vérifiez que votre ordinateur respecte la configuration système requise pour exécuter Android Studio (située en bas de la page de téléchargement). Pour obtenir des instructions plus détaillées sur le processus de configuration, reportez-vous à l'atelier de programmation Télécharger et installer Android Studio.

Dans cet atelier de programmation, vous allez créer votre première application Android avec un modèle de projet fourni par Android Studio. Vous allez utiliser Kotlin et Jetpack Compose pour personnaliser votre application. Notez qu'Android Studio est mis à jour et que parfois l'interface utilisateur change. Il est donc normal que votre version d'Android Studio diffère légèrement des captures d'écran présentées dans cet atelier.

Conditions préalables

• Connaissances de base en Kotlin

Ce dont vous avez besoin

• La dernière version d'Android Studio

Points abordés

• Comment créer une application Android avec Android Studio
• Comment exécuter des applications avec l'outil de prévisualisation d'Android Studio
• Comment mettre à jour du texte avec Kotlin
• Comment mettre à jour une interface utilisateur (UI) avec Jetpack Compose
• Comment afficher un aperçu de votre application dans Jetpack Compose

Objectifs de l'atelier

• Créer une application pour vous présenter de manière personnalisée.

Voici à quoi ressemblera l'application lorsque vous aurez terminé cet atelier de programmation (sauf qu'elle sera personnalisée avec votre nom) :

Ce dont vous avez besoin

• Un ordinateur sur lequel est installé Android Studio.

2. Regarder la vidéo du code pas à pas (facultatif)

Si vous souhaitez voir un formateur réaliser cet atelier de programmation, regardez la vidéo ci-dessous.

Nous vous recommandons d'afficher la vidéo en plein écran (à l'aide de l'icône  en bas à droite de la vidéo) pour mieux voir Android Studio et le code.

Cette étape est facultative. Vous pouvez également ignorer la vidéo et passer immédiatement aux instructions de l'atelier de programmation.

3. Créer un projet à l'aide du modèle

Dans cet atelier de programmation, vous allez créer une application Android avec le modèle de projet Activité Compose vide fourni par Android Studio.

Pour créer un projet dans Android Studio :

1. Double-cliquez sur l'icône Android Studio pour lancer Android Studio.

2. Dans la boîte de dialogue Bienvenue dans Android Studio, cliquez sur Nouveau projet.

La fenêtre Nouveau projet s'ouvre et affiche la liste des modèles fournis par Android Studio.

Dans Android Studio, un modèle de projet est un projet Android qui fournit le plan pour un certain type d'application. Les modèles créent la structure du projet et les fichiers dont Android Studio a besoin pour créer votre projet. Le code de démarrage mis à votre disposition pour une mise en route rapide dépend du modèle que vous choisissez.

3. Assurez-vous que l'onglet Téléphone et tablette est sélectionné.
4. Cliquez sur le modèle Activité Compose vide afin de le sélectionner comme modèle pour votre projet. Le modèle "Activité Compose vide" sert à créer un projet simple que vous pouvez utiliser pour compiler une application Compose. Il comprend un seul écran et affiche le texte "Hello Android!".
5. Cliquez sur Suivant. La boîte de dialogue Nouveau projet s'ouvre. Elle contient des champs permettant de configurer votre projet.
6. Configurez votre projet comme suit :

Le champ Nom permet de saisir le nom de votre projet. Pour cet atelier de programmation, saisissez "Carte de présentation".

Ne modifiez pas le champ Nom du package. C'est de cette façon que vos fichiers seront organisés dans la structure de fichiers. Dans le cas présent, le nom du package sera com.example.greetingcard.

Laissez le champ Emplacement d'enregistrement tel quel. C'est là que sont enregistrés tous les fichiers associés à votre projet. Prenez note de cet emplacement sur votre ordinateur pour pouvoir retrouver vos fichiers.

Kotlin est déjà sélectionné dans le champ Langage. Il s'agit du langage de programmation que vous souhaitez utiliser pour votre projet. Vous ne pouvez pas modifier ce champ, car Compose n'est compatible qu'avec Kotlin.

Sélectionnez API 21: Android 5.0 (Lollipop) dans le menu du champ SDK minimum. Ce champ SDK minimum indique la version minimale d'Android sur laquelle votre application peut être exécutée.

La case Utiliser les anciennes bibliothèques android.support est déjà décochée.

7. Appuyez sur Terminer. Cette opération peut prendre un certain temps. C'est donc le moment idéal pour prendre un café ! Pendant la configuration d'Android Studio, une barre de progression et un message indiquent si la configuration du projet est toujours en cours. Cela peut se présenter comme suit :

Un message semblable à celui-ci vous informe lorsque la configuration du projet est terminée.

8. Il se peut qu'un volet Nouveautés s'affiche pour vous présenter les nouvelles fonctionnalités d'Android Studio. Fermez-le pour l'instant.

9. Cliquez sur Diviser en haut à droite d'Android Studio pour afficher simultanément le code et la conception. Vous pouvez également cliquer sur Code pour n'afficher que le code ou sur Conception pour n'afficher que la conception.

Lorsque vous appuyez sur Diviser, l'écran se divise en trois zones :

• La vue Projet (1) affiche les fichiers et les dossiers de votre projet.
• La vue Code (2) est la zone dans laquelle vous pouvez modifier le code.
• La vue Conception (3) vous permet d'afficher un aperçu de votre application.

La vue Conception affiche un volet vide contenant le texte suivant :

10. Cliquez sur Compiler et actualiser. La compilation peut prendre un certain temps. Une fois qu'elle est terminée, l'aperçu affiche Hello Android! dans la zone de texte. L'activité Compose vide contient tout le code nécessaire pour créer cette application.

4. Rechercher des fichiers de projet

Dans cette section, vous allez poursuivre l'exploration d'Android Studio en vous familiarisant avec la structure de fichiers.

1. Dans Android Studio, examinez l'onglet Projet. L'onglet Projet affiche les fichiers et dossiers de votre projet. Lorsque vous avez configuré votre projet, le nom du package était com.example.greetingcard. Vous pouvez voir ce package ici même, dans l'onglet Projet. Un package est en fait un dossier dans lequel se trouve le code. Android Studio organise le projet dans une structure de répertoires composée de packages.
2. Si nécessaire, sélectionnez Android dans le menu déroulant de l'onglet Projet.

Il s'agit de l'affichage et de l'organisation standards des fichiers que vous utilisez. Cela s'avère utile lorsque vous écrivez du code pour votre projet, dans la mesure où vous pouvez facilement accéder aux fichiers que vous utiliserez dans votre application. Cependant, si vous consultez les fichiers dans un explorateur de fichiers, tel que le Finder ou l'Explorateur Windows, vous remarquerez que la hiérarchie des fichiers est très différente.

3. Sélectionnez Fichiers sources du projet dans le menu déroulant. Vous pouvez maintenant parcourir les fichiers de la même manière que dans n'importe quel autre explorateur de fichiers.

4. Sélectionnez à nouveau Android pour revenir à la vue précédente. La vue Android est utilisée dans ce cours. Si votre structure de fichiers vous paraît étrange, assurez-vous que vous êtes toujours dans la vue Android.

5. Modifier le texte

Maintenant que vous vous êtes familiarisé avec Android Studio, il est temps de créer votre carte de présentation.

Examinez la vue Code du fichier MainActivity.kt. Notez que ce code contient des fonctions générées automatiquement, et en particulier onCreate() et setContent().

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container using the 'background' color from the theme
               Surface(
                   modifier = Modifier.fillMaxSize(),
                   color = MaterialTheme.colors.background
               ) {
                   Greeting("Android")
               }
           }
       }
   }
}

La fonction onCreate() est le point d'entrée de cette application et elle appelle d'autres fonctions pour créer l'interface utilisateur. Dans les programmes Kotlin, la fonction main() est le point précis où démarre le compilateur Kotlin dans votre code. Dans les applications Android, c'est la fonction onCreate() qui remplit ce rôle.

La fonction setContent() à l'intérieur de la fonction onCreate() permet de définir votre mise en page au moyen de fonctions modulables. Toutes les fonctions annotées avec @Composable peuvent être appelées à partir de la fonction setContent() ou d'autres fonctions modulables. L'annotation indique au compilateur Kotlin que cette fonction est utilisée par Jetpack Compose pour générer l'interface utilisateur.

Examinez ensuite la fonction Greeting(). Greeting() est une fonction modulable ; remarquez l'annotation @Composable indiquée au-dessus. Une fonction modulable reçoit des entrées et génère ce qui s'affiche à l'écran.

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Vous savez déjà ce que sont les fonctions (si vous avez néanmoins besoin d'un petit rappel, consultez l'atelier de programmation intitulé "Créer et utiliser des fonctions en Kotlin"). Cependant, il existe quelques différences avec les fonctions modulables.

• La première lettre d'un nom de fonction @Composable est mise en majuscule.
• L'annotation @Composable est ajoutée avant la fonction.
• Les fonctions @Composable ne peuvent rien renvoyer.

@Composable
fun Greeting(name: String) {
   Text(text = "Hello $name!")
}

Actuellement, la fonction Greeting() accepte un nom et affiche le message Hello à la personne dont le nom a été indiqué.

1. Modifiez la fonction Greeting() pour vous présenter au lieu de simplement dire "Hello".

@Composable
fun Greeting(name: String) {
   Text(text = "Hi, my name is $name!")
}

2. Recréez l'aperçu DefaultPreview en appuyant sur le bouton  en haut à gauche du volet de conception :

Félicitations ! Vous avez modifié le texte, mais il vous présente sous le nom d'Android, qui n'est certainement pas votre véritable identité. Vous allez maintenant le personnaliser pour vous présenter avec votre vrai nom.

DefaultPreview() est une fonctionnalité particulièrement utile qui vous permet de voir à quoi ressemble votre application sans avoir à la compiler entièrement. Pour qu'il s'agisse d'une fonction d'aperçu, vous devez ajouter une annotation @Preview.

Comme vous pouvez le constater, l'annotation @Preview accepte un paramètre appelé showBackground. Si showBackground est défini sur true, un arrière-plan est ajouté à l'aperçu de votre application.

Par défaut, Android Studio utilise un thème clair pour l'éditeur. Il peut donc être difficile de voir la différence entre showBackground = true et showBackground = false. Vous pouvez toutefois voir la différence ci-dessous avec un thème sombre. Notez que l'arrière-plan blanc de l'image est défini sur "true".

3. Mettez à jour la fonction DefaultPreview() avec votre nom. Ensuite, recréez et vérifiez votre carte de présentation personnalisée.

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

6. Modifier la couleur d'arrière-plan

Le texte de présentation est, il faut le reconnaître, assez terne. Dans cette section, vous allez apprendre à modifier la couleur de l'arrière-plan.

Pour définir une couleur d'arrière-plan différente pour votre présentation, vous devez placer un élément Surface autour du texte. Surface est un conteneur qui représente une section de l'interface utilisateur dans laquelle vous pouvez modifier l'apparence (la bordure ou la couleur de l'arrière-plan, par exemple).

1. Pour placer un élément Surface autour du texte, sélectionnez la ligne de texte, appuyez sur (Alt+Enter sous Windows ou Option+Enter sous Mac), puis sélectionnez Entourer avec le widget.

2. Sélectionnez Entourer avec le conteneur.

Le conteneur fourni par défaut est Box, mais vous pouvez le remplacer par un autre type de conteneur.

3. Supprimez Box et saisissez Surface() à la place.

@Composable
fun Greeting(name: String) {
   Surface() {
       Text(text = "Hi, my name is $name!")
   }
}

4. Le conteneur Surface comporte un paramètre color. Définissez-le sur Color

@Composable
fun Greeting(name: String) {
   Surface(color = Color) {
       Text(text = "Hi, my name is $name!")
   }
}

5. Lorsque vous saisissez "Color" (Couleur), vous remarquerez peut-être que cet élément est en rouge et qu'il est souligné. Pour résoudre ce problème, faites défiler l'écran jusqu'en haut du fichier, où est indiquée l'instruction "import", puis appuyez sur les points de suspension.

6. Ajoutez cette instruction en bas de la liste des importations.

import androidx.compose.ui.graphics.Color

La liste complète des importations se présente alors comme suit :

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard
import androidx.compose.ui.graphics.Color

7. Dans votre code, il est recommandé de classer les importations par ordre alphabétique. Pour ce faire, appuyez sur Aide dans la barre d'outils supérieure, saisissez Optimiser les importations, puis cliquez sur Optimiser les importations.

La liste complète des importations se présente maintenant comme suit :

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapplication.ui.theme.GreetingCard

8. Notez que la couleur que vous avez saisie entre parenthèses pour Surface est maintenant soulignée en rouge (et non plus rouge et soulignée). Pour résoudre ce problème, ajoutez un point après la couleur. Un pop-up s'affiche alors et vous propose différentes options de couleur.

Particulièrement efficace, cette fonctionnalité d'Android Studio vous apportera une aide précieuse dès que l'occasion se présente. Dans ce cas, la fonctionnalité sait que vous souhaitez spécifier une couleur et vous en propose donc plusieurs.

9. Choisissez une couleur pour votre surface. Cet atelier de programmation utilise le magenta, mais vous pouvez choisir la couleur que vous préférez.

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!")
   }
}

10. Cliquez sur Compiler et actualiser. Votre texte est entouré par la couleur que vous avez choisie.

7. Ajouter une marge intérieure

Maintenant que votre texte a une couleur d'arrière-plan, vous allez ajouter de l'espace (une marge intérieure) autour du texte.

Un élément Modifier permet d'améliorer ou de décorer un composable. Vous pouvez utiliser le modificateur padding, qui applique un espace autour de l'élément (dans ce cas, il s'agit d'ajouter de l'espace autour du texte). Pour ce faire, utilisez la fonction Modifier.padding().

1. Ajoutez ces importations dans la section des instructions d'importation.

Assurez-vous d'utiliser l'option Optimiser les importations pour classer les nouvelles importations par ordre alphabétique.

import androidx.compose.ui.unit.dp
import androidx.compose.foundation.layout.padding

2. Ajoutez un modificateur de marge intérieure au texte avec une taille de 24.dp, puis cliquez sur Compiler et actualiser.

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

Félicitations ! Vous avez créé votre première application Android dans Compose. C'est une belle réussite ! Personnalisez maintenant votre application en changeant de couleur et en saisissant d'autres textes.

8. Examiner le code de solution

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.padding
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.GreetingCardTheme

class MainActivity : ComponentActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContent {
           GreetingCardTheme {
               // A surface container that uses the 'background' color from the theme
               Surface(color = MaterialTheme.colors.background) {
                   Greeting("Android")
               }
           }
       }
   }
}

@Composable
fun Greeting(name: String) {
   Surface(color = Color.Magenta) {
       Text(text = "Hi, my name is $name!", modifier = Modifier.padding(24.dp))
   }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
   GreetingCardTheme {
       Greeting("Meghan")
   }
}

9. Conclusion

Bien joué ! Vous avez découvert Android Studio et vous avez créé votre première application Android avec Compose.

Cet atelier de programmation fait partie du cours Principes de base d'Android avec Compose. Pour découvrir comment exécuter votre application sur l'émulateur ou sur un appareil physique, consultez les prochains ateliers de programmation de ce parcours de formation.

Résumé

• Pour créer un projet : ouvrez Android Studio, cliquez sur Nouveau projet > Activité Compose vide > Suivant, saisissez le nom de votre projet, puis configurez ses paramètres.
• Pour voir à quoi ressemble votre application, utilisez le volet Aperçu.
• Les fonctions modulables sont semblables aux fonctions standards, à quelques différences près : la première lettre de leur nom est mise en majuscule, l'annotation @Composable est ajoutée avant la fonction et les fonctions @Composable ne peuvent rien renvoyer.
• Un élément Modifier permet d'améliorer ou de décorer un composable.

En savoir plus

• Vocabulaire pour les bases d'Android en Kotlin
• Découvrir Android Studio
• Aperçu des projets
• Créer un projet
• Ajouter du code à partir d'un modèle
• Jetpack Compose