• 20 heures
  • Facile

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 08/09/2021

Dessinez l'interface utilisateur de votre première activité

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Dans ce chapitre, nous allons dessiner l'interface utilisateur du premier écran de l'application. En d'autres termes, cela consistera à déterminer de quels éléments graphiques nous aurons besoin, et comment nous les positionnerons à l'écran.

Dans ce premier écran, nous souhaitons accueillir l'utilisateur en lui demandant de saisir son prénom. De fait, cet écran va être composé d'un champ texte, d'une zone de saisie et d'un bouton. Le résultat attendu est le suivant :

Votre écran d'accueil (en anglais) composé d'un champ texte, d'une zone de saisie et d'un bouton
Votre écran d'accueil (en anglais) composé d'un champ texte, d'une zone de saisie et d'un bouton

Trop classe !

Utilisez un fichier Layout pour votre activité

Une activité, ou Activity, en anglais, est une brique fondamentale d'Android. C'est le point d'entrée de n'importe quelle application Android.

Une activité a pour rôle principal d'interagir avec l'utilisateur. C'est une classe Java ou Kotlin, qui hérite obligatoirement de la classe Android Activity ou AppCompatActivity.

Si vous souhaitez avoir deux écrans dans votre application, par exemple un écran de connexion et un écran de tutoriel, vous aurez généralement deux activités : la première qui gère la partie connexion et la seconde qui gère l'affichage du tutoriel. Par convention, le nom d'une activité est toujours suffixé par Activity et écrit en CamelCase. Ainsi, vous nommerez vos activités LoginActivity et TutorialActivity.

Pourquoi dire "vous aurez généralement deux activités" ? 

Car nous verrons plus tard, dans un autre cours, qu'il n'est pas forcément obligatoire d'avoir à chaque fois une activité distincte pour gérer chaque écran. Mais il encore trop tôt pour en parler. :-)

Pour interagir avec l'utilisateur, il faut lui présenter des éléments graphiques et des éléments de contrôle ou widgets pour qu'il puisse s'amuser avec ses petits doigts. Ces widgets peuvent être des boutons, des zones de saisie ou des menus déroulants, par exemple.

Afin de déterminer quels éléments graphiques utiliser et comment les positionner à l'écran, nous utilisons un fichier layout. Un fichier layout est un fichier XML que l'activité va charger après avoir été instanciée. Ce fichier XML est toujours stocké dans le répertoire res/layout de votre projet. Par convention, s'il est lié à une activité, il est toujours suffixé par activity, mais cette fois le tout en minuscules et séparé par un underscore (_). Ce type de notation s’appelle le snake_case. Ainsi, le fichier layout associé à MainActivity est activity_main.xml. De la même façon, si nous avions eu une activité nommée LoginActivity, nous aurions créé le fichier layout associé activity_login.xml.

Construisez l'interface

L'éditeur graphique

Sous Android Studio, naviguez dans l'arborescence du projet et ouvrez le fichier activity_main.xml situé dans res/layout en double-cliquant dessus. 

Par défaut, Android Studio ouvre l'éditeur en mode Design, c'est-à-dire que vous pouvez placer et configurer les différents éléments graphiques avec votre souris, et générer automatiquement le contenu XML. Cela semble séduisant, mais nous allons plutôt utiliser le mode Split, permettant d'avoir une meilleure maîtrise de l'ensemble. Pour ce faire, cliquez sur l'onglet Split en haut à droite de l'écran, et vous verrez apparaître le contenu XML.

Cliquez sur l'onglet Split pour basculer le layout en mode Text
Cliquez sur l'onglet Split pour basculer le layout en mode Text

Le contenu par défaut peut varier suivant les versions d'Android Studio, mais vous devez avoir quelque chose qui ressemble à cela :

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Cela n'est pas forcément très parlant de prime abord. Vous pouvez voir le résultat en temps réel sur le bord droit de la fenêtre. Vous verrez automatiquement apparaître le rendu du contenu XML, c'est-à-dire un écran avec le texte Hello World!.

Voilà le résultat en mode “Split” !
Voilà le résultat en mode “Split” !

Les conteneurs

Pour afficher des éléments à l'écran, il est impératif d'utiliser un conteneur. Un conteneur est un élément particulier permettant d'organiser les éléments qu'il contient entre eux.

Dans le fichier XML de notre projet, le premier élément XML que nous voyons est du type androidx.constraintlayout.widget.ConstraintLayout. Cet élément est un conteneur. Android suffixe toujours le nom des conteneurs par Layout. Dans cet exemple, le conteneur contient un élément TextView, utilisé pour afficher le texte Hello World!.

Parmi les conteneurs proposés par Android, nous pouvons noter par exemple :

  • FrameLayout : permet de positionner les éléments les uns au-dessus des autres ;

  • LinearLayout : permet de positionner les éléments les uns à la suite des autres, dans le sens horizontal ou vertical ;

  • RelativeLayout : permet de positionner les éléments les uns par rapport aux autres ;

  • ConstraintLayout : comme le RelativeLayout, mais avec des règles de positionnement beaucoup plus puissantes.

Il est trop tôt pour utiliser le ConstraintLayout, nous allons donc le remplacer par LinearLayout, beaucoup plus simple. Pour ce faire, remplacez la balise XML androidx.constraintlayout.widget.ConstraintLayout par LinearLayout, puis supprimez tout ce qui se rattache au tag app. Vous devez obtenir le résultat suivant :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!" />
</LinearLayout>

De façon littérale, nous venons d'écrire :

Je souhaite afficher mes éléments graphiques les uns à la suite des autres. Le premier élément graphique que je souhaite afficher est un champ texte.

Les attributs

Occupation de l'espace

Chaque balise XML possède plusieurs attributs. Au minimum, les deux attributs fondamentaux sont layout_width et layout_height. Ils permettent de déterminer comment afficher un élément au sein de son conteneur. Les trois valeurs possibles sont :

  • match_parent : l'élément doit s'étendre le plus possible afin d'occuper le maximum d'espace disponible offert par son parent (vous pourriez voir apparaître de temps en temps fill_parent au détour d'un tutorial ou d'un site web : c'est un attribut obsolète, ancêtre de match_parent) ;

  • wrap_content : l'élément doit prendre le moins d'espace possible et n'occuper que la place nécessaire à l'affichage de son contenu ;

  • 0dp : la taille de l’élément est définie par ses contraintes (nous verrons comment contraindre un élément plus tard avec le ConstraintLayout).

Un dessin valant mieux qu'un long discours, voici la forme que prendrait l'élément TextView suivant les valeurs des deux premiers attributs :

L'élément TextView varie en fonction des attributs d'occupation de l'espace
L'élément TextView varie en fonction des attributs d'occupation de l'espace
Gravitation

La notion de gravitation peut s'appliquer à un élément ou à son contenu. Elle permet de déterminer comment positionner un élément par rapport à son conteneur, ou comment positionner le contenu d'un élément, par exemple le titre d'un bouton.

Pour définir le positionnement d'un élément, c'est l'attribut android:layout_gravity qu'il faut utiliser. Les valeurs possibles sont nombreuses : left ou start, right ou end, center, center_vertical, center_horizontal, etc. 

Pour définir le positionnement d'un titre au sein d'un bouton ou d'un champ texte, par exemple, c'est l'attribut android:gravity qu'il faut utiliser. Les valeurs possibles sont identiques à l'attribut layout_gravity.

Pour bien saisir la différence, regardez le résultat produit selon les valeurs utilisées :

Définissez le positionnement d'un élément grâce à l'attribut android:layout_gravity
Définissez le positionnement d'un élément grâce à l'attribut android:layout_gravity
Texte

Nous allons remplacer le texte de l'élément TextView afin d'accueillir convenablement l'utilisateur. Il vous suffit pour cela de remplacer la valeur de l'élément android:text, par exemple : "Bienvenue dans TopQuiz. Quel est votre prénom ?". Le texte dans le rendu à droite doit automatiquement se mettre à jour.

Marge

Vous constatez que le texte de l'élément TextView est collé en haut à gauche de son conteneur, ce qui n'est pas l'idéal. Pour le décoller légèrement du bord, il est nécessaire d'ajouter l'attribut android:layout_margin, permettant de préciser une grandeur de marge. La valeur se mesure en dp, pour density-independent pixels. Par exemple, en précisant une valeur de 8 dp, vous verrez l'élément s'éloigner des bords. Si vous ne souhaitez modifier qu'une seule marge, vous pouvez utiliser les versions suffixées suivantes : layout_marginTop, layout_marginBottom, layout_marginStart ou layout_marginEnd.

Padding

Le padding (ou rembourrage, en français 😄), consiste à ajouter de l'espace entre le contenu d'un élément et les bords de cet élément. J'adore les images, je suis sûr que vous allez tout de suite comprendre :

Le padding consiste à ajouter de l'espace entre le contenu d'un élément et les bords de cet élément
Le padding consiste à ajouter de l'espace entre le contenu d'un élément et les bords de cet élément

En ajoutant une marge et du rembourrage à l'élément TextView de votre projet, vous devez obtenir le résultat suivant (seul l'élément TextView est présenté) :

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="16dp"
android:padding="8dp"
android:text="Welcome! What's your name?" />

Vous aurez sûrement remarqué que les valeurs de margins et paddings sont des multiples de 4 (8 dp, 16 dp). Les composants Android sont conçus pour être affichés sur une grille de 4 dp, vous permettant d’avoir un beau rendu sans être un UI designer !

Voilà, vous en savez suffisamment sur la mise en page des éléments, nous allons maintenant étudier les éléments de contrôle pour interagir avec l'utilisateur.

Les éléments de contrôle

Zone de saisie

Pour que l'utilisateur puisse taper son prénom, il faut lui présenter un élément lui permettant de saisir du texte. Sous Android, c'est l'élément EditText qui porte ce rôle. Pour ce faire, toujours dans le fichier activity_main.xml, ajoutez un élément EditText.

Dès que vous commencez à saisir le chevron et les premières lettres, Android Studio vous propose automatiquement tous les choix possibles. Dès que vous voyez apparaître EditText, sélectionnez-le et appuyez sur la touche Entrée ou la touche de tabulation. 

Android Studio vous ajoute ensuite automatiquement les attributs layout_width et layout_height. Il vous positionne également le curseur sur la première valeur. Commencez à saisir les premières lettres de match_parent et complétez automatiquement en appuyant sur Entrée ou Tabulation. Passez à la ligne layout_height automatiquement avec Tabulation ou Entrée, et mettez cette fois wrap_content comme valeur. Enfin, appuyez sur Entrée ou Tabulation pour “sortir” des guillemets, et fermez l’élément XML avec la touche /. Android Studio s’occupe de rajouter le chevron manquant, c'est magique !

Toutefois, le champ de saisie est comprimé entre le texte et le bord droit de l'écran. Il aurait été plus judicieux qu'il soit positionné en dessous de l'élément TextView, n'est-ce pas ? Si vous vous en souvenez, nous avons dit que le conteneur LinearLayout permettait de positionner les éléments les uns à la suite des autres. Par défaut, ce positionnement s'effectue horizontalement.

Pour changer ce comportement, il vous suffit d'ajouter l'attribut orientation à l'élément LinearLayout, avec la valeur "vertical" (de la même façon, vous pouvez simplement saisir les premières lettres, et Android Studio se chargera de compléter l'ensemble pour vous).

Tout comme pour le champ texte, nous pouvons ajouter une marge afin d'éviter que la zone de saisie ne soit trop proche des bords, par exemple à gauche et à droite.

Il est également possible d'ajouter un indice à l'aide de l'attribut android:hint. Cet indice apparaît dans le champ texte pour apporter une information à l'utilisateur, puis disparaît dès qu'il commence à saisir du texte.

Vous devez obtenir le résultat suivant (seul l'élément EditText est présenté) :

<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginEnd="16dp"
android:hint="Please type your name" />
Bouton

Maintenant que l'utilisateur s'est présenté, il n'a plus qu'à appuyer sur un bouton pour commencer à jouer. L'élément XML à utiliser est Button (comme Benjamin... désolé, je n'ai pas pu m'en empêcher).

Comme pour l'élément TextView, l'attribut à utiliser pour spécifier le titre est android:text. Nous décidons de nommer le bouton "Let's play".  Vous pouvez modifier la marge ou le rembourrage pour positionner le bouton comme bon vous semble. Pour ma part, j'ai décidé de le centrer horizontalement, et de l’espacer un peu pour qu'il paraisse plus important. Voici le résultat :

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_margin="16dp"
android:text="Let's play" />

Récapitulons en vidéo

Retrouvez ces différentes étapes dans la vidéo ci-dessous :

En résumé

  • L’Activity utilise un fichier layout pour pouvoir positionner ses Widgets à l’écran.

  • Il y a plusieurs types de layout : chacun a sa particularité 

  • Pour bien positionner les éléments à l’écran, il faut utiliser les différents attributs disponibles, par exemple margin, padding, layout_gravity, etc.

Voilà, l'interface graphique est prête. Rendez-vous dans le prochain chapitre pour référencer les éléments graphiques dans votre activité.

Exemple de certificat de réussite
Exemple de certificat de réussite