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 :

#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.

#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.

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. 

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.

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.