Module (M17) : Programmation

mobile

Chapitre 4 : Les vues ( Views), layouts

, ressources, et ABP

Pr. Yassine SADQI

y.sadqi@usms.ma
I. Rappel: Eléments de base d’une app Android

1. Manifeste: informations sur l'application concernant l’environnement de l'exécution

(runtime), les autorisations, …
2. Composants: activités, services, ... et classes d'aide (helpers) en tant que code Java
3. Ressources: mises en page (layouts), images, textes, couleurs sous forme de fichiers
XML et multimédia
4. Build configuration : versions APK dans les fichiers de configuration Gradle

Pr. Yassine SADQI 2

I. Vues Android
(Android Views)

3
Qu’est ce qu’une vue Android?

• Si on regarde un appareil mobile, chaque élément

d'interface utilisateur que nous voyons est une vue.
• L‘interface utilisateur (UI) se compose d'une
hiérarchie d'objets appelés vues (Views)
• La classe View représente la base (classe mère) Views
pour tous les composants UI et la classe de
base pour les classes qui fournissent des
composants UI interactifs.

Pr. Yassine SADQI 4

Qu’est ce qu’une vue Android?

• Les objets de la classe View peuvent être

l’une des centaines sous-classes (classe fille)
prédéfinies, telles que:
oafficher le texte(la classe TextView),
éditer le texte(la classe EditText)
Views
obuttons (la classe Button),
oMenus (Menu APIs)
o…

Pr. Yassine SADQI 5

Qu’est ce qu’une vue Android?

• Les vues Android ont des propriétés (par exemple, couleur,

dimensions, positionnement)
• Toutes les vues doivent avoir les propriétés layout_width et
layout_height.
• Les vues Android peuvent:
o avoir le focus (par exemple, sélectionné pour recevoir les
entrées de l'utilisateur)
o être interactif (répondre aux clics des utilisateurs)
o être visible ou non (Visibility)
o des relations avec d'autres vues Android

Pr. Yassine SADQI 6

Exemples des vues Android

Button CheckBox
RadioButton
EditText
Switch
SeekBar

Pr. Yassine SADQI 7

Création des vues

• Trois possibilités pour réaliser la mise en pages des vues

1. Android Studio (Layout Editor)
2. Fichiers XML du layout:Vues définies en XML
3. Fichiers Java/koltlin : Création des vues en utilisant Java ou
bien Kotlin.

Pr. Yassine SADQI 8

IV.2.1 Layout Editor

https://developer.android.com/studio/write/layout-editor
Pr. Yassine SADQI 9
Code XML

• Il est parfois plus rapide et plus facile d'éditer le code XML directement, surtout lors
de la copie et du collage du code pour des vues similaires.
• Voici un extrait du code XML d’un TextView:
<TextView
android:id="@+id/show_count"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/myBackgroundColor"
android:text="@string/count_initial_value"
android:textColor="@color/colorPrimary"
android:textSize="@dimen/count_text_size"
android:textStyle="bold"
/>

Pr. Yassine SADQI 10

Code XML

• Les vues ont des propriétés qui définissent l'affichage d'une vue sur l'écran, sa
taille, la façon dont la vue se rapporte à d'autres vues et la façon
dont elle répond à l'entrée de l'utilisateur.
• Lors de la définition des vues en XML, les propriétés d’une vue sont appelées
attributs.
• Le syntaxe est généralement de cette forme:
o android:<property_name>= "<property_value>“
o Example: android:layout_width="match_parent"
Pr. Yassine SADQI 11
Code XML

• Si la valeur est une ressource, telle qu'une couleur, le symbole @ spécifie quel type
de resource:
o android:<property_name>="@<resource_type>/resource_id“
o Example: android:text="@string/button_label_next"

Pr. Yassine SADQI 12

Code XML

•Identification d’une vue:

o Pour identifier de manière unique une vue et la faire référence à partir de votre code,
on doit lui donner un identifiant.
o L'attribut android: id vous permet de spécifier un identifiant unique - un identificateur
de ressource pour une vue.
o Example: android:id="@+id/ button_count“
o La partie "@ + id / button_count" de l'attribut ci-dessus crée un nouvel identifiant
appelé button_count pour la vue.
o le symbole plus (+) est utilisé pour indiquer la création d’un nouvel identifiant.

Pr. Yassine SADQI 13

II. Android ViewGroup

14
Notion de ViewGroup

• Un ViewGroup (parent) est un type de vue qui peut contenir

d'autres vues ou ViewGroups(enfants)
• ViewGroup est la classe de base pour les layouts et les
containers.

Pr. Yassine SADQI 15

View hierarchy

ViewGroup Root view is always a view group

ViewGroup View View

View View View

Hiérarchie des groupes de vues et des vues

Pr. Yassine SADQI 16

 View hierarchy and screen layout

View Hierarchy

Screen Layout

Pr. Yassine SADQI 17

View hierarchy in the component tree

Pr. Yassine SADQI 18

Astuces

•Il faut bien souligner que la hiérarchie des vues d’une application
Android , affecte les performances de l'application
•Pour cela, il est recommandé de:
1. utiliser au maximum des vues simples;
2. limiter l'imbrication des vues et de groupes de vues

Pr. Yassine SADQI 19

III. Android Layouts

20
Layout Views

• Sous Android, la notion de mise en page est reliée à la notion de “Layout“.

• Un layout a pour seul but de contenir d’autres vues, de les positionner et de les
dimensionner.
• En d’autres termes, un layout représente l’agencement des différents éléments
graphiques dans un interface graphique.
• Techniquement, les Layouts:
o sont des types spécifiques de groupes de vues « View group »
o sont des sous-classes de ViewGroup
o contient des vues enfants
o peut être organisé dans une rangée, une colonne, une grille, une table, …

Pr. Yassine SADQI 21

Classes de Layout courantes

• Il existe plusieurs sortes de layouts

o LinearLayout : Il organise les différents éléments de
l’interface graphique sur une ligne ou sur une colonne
(verticalement ou horizontalement)
o RelativeLayout : affiche les vues enfants dans des positions
relatives.
o ConstraintLayout: nouveau type de ViewGroup présenté
en mai 2016 par Google à la Google I/O. En bref c’est une
amélioration de « RelativeLayout ». C’est le layout par
défaut sous Android Studio.
• Remarque: ConstraintLayout est plus souple que
RelativeLayout et plus facile à utiliser.

Pr. Yassine SADQI 22

Classes de Layout courantes

L'éditeur affiche la vue C en dessous

de A, mais il n'y a pas de contrainte La vue C est maintenant contrainte
verticale. verticalement sous la vue A

Pr. Yassine SADQI 23

Layout crée avec XML

<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<EditText
... />
<Button
... />
</LinearLayout>

Pr. Yassine SADQI 24

Layout crée dans l’Activité ( Code Java)

LinearLayout linearL = new LinearLayout(this);

linearL.setOrientation(LinearLayout.VERTICAL);
TextView myText = new TextView(this);
myText.setText("Display this text!");
linearL.addView(myText);
setContentView(linearL);

Pr. Yassine SADQI 25

Layout crée dans l’Activité ( Code Java)

•Exemple: Définition de la largeur et la hauteur d'une vue nommée

« myView »

LinearLayout.LayoutParams layoutParams =
new Linear.LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT);
myView.setLayoutParams(layoutParams);

https://developer.android.com/develop/ui/views/layout/linear

Pr. Yassine SADQI 26

IV. Ressources

27
Problème

• Problème: Le système Android est utilisé sur une

variété de supports (taille de l’appareil, la
résolution de son écran, la langue d’utilisation,
l’orientation de l’écran, etc.).
• Exemple:
oDeux appareils Android différents, chacun
utilisant la configuration par défaut. L’application
ne fournit pas une mise en page alternative pour
un appareil ayant un écran plus grand.
• Question: Comment s’adapter à ces divers
supports ?

Pr. Yassine SADQI 28

Ressources Android

• Les ressources sont utilisées pour externaliser

les ressources d’une application Android.
• Techniquement les fichiers ressources sont des
informations statiques stockées en dehors du
code Java /ou Kotlin.
• Parmi ces ressources, on peut citer : images,
vidéo, audio, chaînes de caractères (string),
dimensions, texte de menu, couleurs, ,etc.
• Les ressources sont regroupées dans le fichier «
APK » ou « AAB » lors du processus de
construction de l’application Android.

Pr. Yassine SADQI 29

Ressources Android

fichiers de ressources statiques stockés

dans le dossier « res »

Pr. Yassine SADQI 30

Ressources Android: Dimensions

• Les dimensions doivent être séparées du code

pour les rendre plus faciles à gérer, surtout si vous ● Device Independent Pixels (dp) - for Views
devez ajuster votre mise en page pour ● Scale Independent Pixels (sp) - for text
différentes résolutions de périphériques.
Don't use device-dependent units:
• Les ressources de dimension sont situées dans un ● Actual Pixels (px)
fichier « dimens.xml » dans le dossier des ● Actual Measurement (in, mm)
valeurs dans le dossier res lors de l'utilisation de ● Points - typography 1/72 inch (pt)
la vue Project:Android.
• On peut aussi créer un dossier contenant plus
d'un fichier « dimens.xml » pour différentes
résolutions de périphériques.

Pr. Yassine SADQI 31

Se référer aux ressources dans le code

• Les ressources sont rangées dans des répertoires particuliers.

• Android va se charger automatiquement d’associer un identificateur à
chaque ressource.
• L’utilisateur peut associer son propre identifiant. Dans ce cas, Android va de
facto prendre en compte cette information, au lieu de générer lui-même un
identifiant pour cette ressource.
• Elles sont enregistrées par la suite dans l’application. Cet enregistrement va
se faire à travers la classe « R ».
• R est une classe contenant les définitions de toutes les ressources d'un package
d'application particulier.

Pr. Yassine SADQI 32

Se référer aux ressources dans le code

● Layout:
Syntaxe: R.layout.nom_du_layout
Exemple: setContentView(R.layout.activity_main);
● View:
Syntaxe: R.id.nom_de_la_vue
Exemple: rv = (RecyclerView) findViewById(R.id.recyclerview);
● String:
Syntaxe: R.string.title

Pr. Yassine SADQI 33

V. Android Build Process

34
Android Build Process

• Les applications Android peuvent être écrites

à l'aide des langages Kotlin, Java et C++. Les
Kits de développement ( SDK, NDK)
compilent votre code ainsi que tous les
fichiers de données et de ressources dans un
Android Package Kit (APK) ou un
Android App Bundle (AAB).
• Le Build Process d’Android implique de
nombreux outils et processus qui
convertissent votre projet en un APK ou un
AAB.

AIDL : Android Interface Definition Language

Pr. Yassine SADQI 35

Android Build Process
• Le build process sous Android Studio est basé sur Gradle, et le plugin Android Gradle
(AGP: Android Gradle Plugin), qui ajoute plusieurs fonctionnalités spécifiques à la
création d'applications Android.
• L'application d'un plugin à un projet permet au plugin d'étendre les capacités du projet. Il
peut faire des choses telles que :
o Étendre le modèle Gradle (par exemple, ajouter de nouveaux éléments DSL pouvant
être configurés).
o Configurer le projet selon les conventions (par exemple, ajouter de nouvelles tâches
ou configurer des valeurs par défaut sensibles).
o Appliquer une configuration spécifique (par exemple, ajouter des référentiels
organisationnels ou appliquer des normes).
https://developer.android.com/studio/releases/gradle-plugin

Pr. Yassine SADQI 36

Android Build Process

• Vous pouvez spécifier la version du plug-in dans

le menu Fichier > Structure du projet >
Projet dans Android Studio ou dans le fichier
build.gradle de niveau projet. La version du
plugin s'applique à tous les modules construits
dans ce projet Android Studio.
• Pour de meilleures performances, vous devez
utiliser la dernière version possible de Gradle et
du plugin.
dependencies {
classpath 'com.android.tools.build:gradle:7.0.3'
}

https://developer.android.com/studio/releases/gradle-plugin
Pr. Yassine SADQI 37
Android Build Process

Plugin version Required Gradle version

1.0.0 - 1.1.3 2.2.1 - 2.3

1.2.0 - 1.3.1 2.2.1 - 2.9
… …
7.0 7.0+
… …

https://developer.android.com/studio/releases/gradle-plugin
Pr. Yassine SADQI 38
Android Build Process

• Gradle et le plugin Gradle d’Android (AGP: Android Gradle Plugin) fonctionnent

indépendamment d'Android Studio.
• Cela signifie que vous pouvez construire vos applications Android à partir de:
1. Android Studio,
 https://developer.android.com/studio/run
2. la ligne de commande sur votre machine,
 https://developer.android.com/studio/build/building-cmdline
3. ou sur des machines sur lesquelles Android Studio n'est pas installé (comme les serveurs
d'intégration continue).
 https://www.jenkins.io/solutions/android/
 https://learntodroid.com/save-time-automating-android-app-build-test-and-release-with-
jenkins/
• Le résultat du build process est le même, quelle que soit la méthode utilisée.

Pr. Yassine SADQI 39

Android Build Process

• Le Build Process d'un module d'application Android

typique, comme illustré dans la figure, suit 4 grandes
étapes :
1. Les compilateurs (Compilers) convertissent
votre code source en fichiers DEX (Dalvik
Executable), qui incluent le bytecode qui s'exécute
sur les appareils Android, et tout le reste en
ressources compilées.
2. Le packager combine les fichiers DEX et les
ressources compilées dans un APK ou un AAB,
selon la cible de build choisie. Avant que votre
application puisse être installée sur un appareil
Android ou distribuée dans un magasin, tel que
Google Play, l'APK ou l'AAB doit être signé.

Pr. Yassine SADQI 40

Android Build Process

3. Le Packager signe votre APK ou AAB à

l'aide du debug ou release keystore.

Signing an app with Play App Signing

Source: https://developer.android.com/studio/publish/app-signing#studio

Pr. Yassine SADQI 41

 Android Build Process

4. Avant de générer votre APK ou AAB final, le

Packager utilise l'outil zipalign pour
optimiser votre application afin d'utiliser
moins de mémoire lors de l'exécution sur un
appareil.
• À la fin de ce processus, vous disposez d'un APK ou
d'un AAB de débogage ou de publication (Debug
or Release) de votre application que vous pouvez
utiliser pour déployer, tester ou publier pour des
utilisateurs.

https://developer.android.com/studio/command-line/zipalign
Pr. Yassine SADQI 42
 Android Build Process
• Pour générer un bundle/APK à partir d'Android Studio: Build > Build Bundles(s)/APK(s)
et suivre le processus...

C:\Users\hp\AndroidStudioProjects\MyApplication\app\build\outputs\apk\debug

C:\Users\hp\AndroidStudioProjects\MyApplication\app\build\outputs\bundle\debug

Pr. Yassine SADQI 43

Android Build Process

• Pour générer un bundle/APK signé à partir d'Android Studio: Build > Generate Signed
Bundle/APK et suivre le processus...

https://developer.android.com/studio/publish/app-signing

Pr. Yassine SADQI 44

Android Build Process

Pr. Yassine SADQI 45

Android Build Process

C:\Users\hp\AndroidStudioProjects\MyApplication\app\release

Pr. Yassine SADQI 46

The END (Chapter4 )

47