• 8 hours
  • Easy

Free online content available in this course.

course.header.alt.is_certifying

Got it!

Last updated on 9/4/23

Faites vos premiers pas dans la conception d'interface sous Android Studio

Dans cette partie, vous allez dessiner l'interface utilisateur du premier écran de l'application. Pour ce premier écran, nous souhaitons accueillir l'utilisateur en lui demandant de saisir son nom. De fait, cet écran va être composé de textes, d'une zone de saisie et d'un bouton. Le résultat attendu est le suivant :

Cet écran contient de haut en bas une barre de navigation contenant le titre “SuperQuiz”, suivie de deux textes, “Welcome to SuperQuiz” puis “What’s your name?”. Ensuite un champ de saisie dans lequel il est déjà écrit “Fanny”. Enfin
Votre écran d'accueil (en anglais) composé d'un champ texte, d'une zone de saisie et d'un bouton

Concevez le squelette de l’application

Avant de se lancer tête baissée dans le code, il est important de se demander comment concevoir le squelette de votre application correctement.

Une activité unique et plusieurs fragments

Pour rappel, une bonne pratique sur Android consiste à avoir une activité unique qui est le point d’entrée de l’application, et qui visuellement occupe tout l’écran de l’appareil. À cette activité sont ajoutés à tour de rôle des fragments. Un fragment occupe soit tout l’écran de l’application, soit une portion de l’écran.

À gauche se trouve une maquette d'un téléphone dont la totalité de l’écran est légendée “Fragment A”.  Une flèche mène à un téléphone à droite de l’écran dont la totalité de l’écran est  légendé “Fragment B”.
Deux fragments au sein de la même activité sur un téléphone aux dimensions standard, qui s’affichent l’un après l’autre, suite à une action de l’utilisateur
L’écran de cette tablette en position paysage est divisé en deux parties.  À gauche, une zone “Fragment A” qui occupe environ 1 quart de la largeur de l’écran et toute la hauteur. À droite “Fragment B”, occupant les 3 quarts restants de l
Deux fragments au sein de la même activité, qui s’adaptent à la taille de l’écran et s’affichent côte à côte sur une tablette.

Découpage en fragments de l’application SuperQuiz

Nous allons donc appliquer cette bonne pratique dans le développement de notre application SuperQuiz. Pour cela, nous utiliserons une activité principale appeléeMainActivity  , qui contiendra à tour de rôle les fragments suivants : 

  • au démarrage de l’application, elle affiche un premier fragment, WelcomeFragment  , qui correspond à l’écran permettant à l’utilisateur de saisir son nom ;

  • lorsque l’utilisateur appuie sur le bouton “Let’s play”, le fragment WelcomeFragment  est remplacé par le fragment QuizFragment  ;

  • le fragment QuizFragment  est chargé d’afficher une à une les questions du quiz.

L'écran à gauche est légendé WelcomeFragment et celui à droite est légendé QuizFragment, mais les deux fragments sont contenus dans MainActivity.
Maquette de l’application SuperQuiz illustrant le découpage en fragments

D’accord, mais actuellement dans mon projet l’activité MainActivity  ne contient pas encore de fragment, mais un texte que j’ai personnalisé dans la première partie. 🤔

Effectivement. C’est pourquoi la première étape va consister à inclure l’écran correspondant au fragment WelcomeFragment  dans l’activité principale de notre application.

Inclure WelcomeFragment dans MainActivity

Pour cela, nous allons modifier le code du layout activity_main.xml  , pour y positionner un composant de type FragmentContainerView  .  Comme son nom l’indique, il permet de contenir un fragment.
Voici le code permettant d’insérer ce composant dans notre layout :

<?xml version="1.0" encoding="utf-8"?>
<androidx.fragment.app.FragmentContainerView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="com.mycompany.superquiz.WelcomeFragment" />

Faites bien attention à compléter correctement la propriété android:name  avec le nom du package créé tout au début du projet, qui permet de spécifier le fragment initial à démarrer, en particulier avec le chemin menant à ce fichier.

Maintenant, si vous lancez à nouveau votre application sur un appareil, vous verrez qu’elle affiche l’écran correspondant au fragment  Welcome  .

Découvrez l’éditeur graphique

Nous sommes maintenant prêts à concevoir l’interface de notre premier écran. Dans un premier temps, cela se passe dans l’éditeur graphique d'Android Studio. Prenons le temps de le découvrir ensemble.

Sous Android Studio, naviguez dans l'arborescence du projet, et ouvrez le fichier fraîchement renommé en fragment_welcome.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. 

Capture d’écran d'Android Studio. Le fichier fragment_welcome.xml est affiché. La capture met en évidence en haut à droite les 3 boutons permettant de basculer le mode d’affichage entre le mode Code, Split ou Design.
Vue de l’éditeur du layout “fragment_welcome.xml” en mode Design

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. Vous verrez apparaître le contenu XML sur la droite. L’onglet Code permet quant à lui de visualiser uniquement le code XML.

Capture d’écran des 3 boutons de l’éditeur graphique permettant de choisir le mode d’affichage : Code, Split ou Design.
Cliquez sur Split en haut à droite de l’éditeur de layout dans Android Studio

Le contenu actuel de ce fichier est  :

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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=".WelcomeFragment">

   <!-- TODO: Update blank fragment layout -->
   <TextView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:text="@string/hello_blank_fragment" />

</FrameLayout>

En mode Split  , vous pouvez voir le résultat en temps réel sur la partie droite de la fenêtre.

En résumé

  • Une activité unique est utilisée comme point d'entrée de l'application.

  • Des fragments sont ajoutés à cette activité pour occuper tout l'écran ou une partie de celui-ci.

  • L’éditeur graphique d’Android Studio vous permet de placer et configurer différents éléments graphiques sur l’écran et générer le contenu XML.

Maintenant que vous avez fait connaissance avec l’éditeur graphique, il est temps de créer l’interface du premier écran de SuperQuiz ! Ce sera au prochain chapitre.

Example of certificate of achievement
Example of certificate of achievement