Le document présente le cours de développement d'applications mobiles à l'Université Constantine 2, se concentrant sur la structure d'un projet Android. Il couvre des thèmes tels que la gestion des ressources, l'internationalisation et les spécificités des layouts en Android. Des conseils pratiques et des exercices pour améliorer l'ergonomie des interfaces sont également fournis.

1. Université Constantine 2
Dr. CHAOUCHE A.-C.
Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz
– Cours 7 –
Chapitre 5 : Structure d’un projet Android (2/2)
Développement d’applications mobiles
2018/2019. Semestre 1

2. Université Constantine 2
Etudiants concernés
Faculté/Institut Département Niveau Spécialité
2018/2019. Semestre 1
Dr. CHAOUCHE A.-C.
Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz
Développement d’applications mobiles
Licence 3 Technologies de l’information (TI)Nouvelles technologies IFA
Licence 3 Science de l’informatique (SCI)Nouvelles technologies IFA
– Cours 7 –
Chapitre 5 : Structure d’un projet Android (2/2)

3. Université Constantine 2 3
Prérequis
Maîtrise de Android Studio
Assimilation de la structure d’un projet Android
Objectifs du cours
Gérer les ressources en fonction du matériel
Internationaliser son application Android
Résumé
© Dr. Chaouche A.-C.

4. Université Constantine 2 4
Taille des écrans : 1 inch = 2,54 cm
small, normal, large, xlarge
Densité : DPI (Dot Per Inch)
ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi
Taille et densité des écrans
© Dr. Chaouche A.-C.

5. Université Constantine 2 5
Density independant Pixel (dp)
dp = px / (dpi / 160)
Taille et densité des écrans
Indépendance de la densité
© Dr. Chaouche A.-C.
Dépendance de densité (px)
Indépendance de densité (dp)

6. Université Constantine 2 6
Taille et densité des écrans
Distribution
© Dr. Chaouche A.-C.
ldpi mdpi tvdpi hdpi xhdpi xxhdpi Total
Small 0.4 % 0.1 % 0.5 %
Normal 0.8 % 0.3 % 25.4 % 41.2 % 24.4 % 92.1 %
Large 2.4 % 1.4 % 0.3 % 0.5 % 4.9 %
Xlarge 1.6 % 0.5 % 0.4 % 2.5 %
Total 0.4 % 4.8 % 1.7 % 26.2 % 41.9 % 25.0 % 100 %
Source : Google Play Store, 31 Août 2018

7. Université Constantine 2 7
Vue portrait vs. vue paysage
© Dr. Chaouche A.-C.

8. Université Constantine 2 8
Il est possible de personnaliser les ressources, en fonction de :
En utilisant des qualificateurs : par exemple :
Par défaut : layout : layouts par défaut
Orientation : layout-land : versions paysagedes layouts
Densité : mipmap-xxhdpi : icônes pour des écrans de densité xxhdpi
Taille : layout-large : layouts pour des écrans de taille large
Langue : values-ar/strings.xml : chaînes de caractères en arabe
...
Prise en charge des différentes configurations
© Dr. Chaouche A.-C.

9. Université Constantine 2 9
Images matricielles :
drawable-ldpi/graphic.png 36 x 36 (0.75x)
drawable-mdpi/graphic.png 48 x 48 (1.0x baseline)
drawable-hdpi/graphic.png 72 x 72 (1.5x)
drawable-xhdpi/graphic.png 96 x 96 (2.0x)
drawable-xxhdpi/graphic.png 144 x 144 (3.0x)
drawable-xxxhdpi/graphic.png 192 x 192 (4.0x)
→ Android Drawable Importer (Plugin) :
Installation : Settings… > Plugins > Browse repositories… >
Utilisation : res/drawable > New > Batch Drawable Import
Icônes vectorielles : (Material ou SVG)
drawable-anydpi/graphic.xml
→ Utilisation : res/drawable > New > Vector Asset
Drawables et densité de l’écran
© Dr. Chaouche A.-C.

10. Université Constantine 2 10
Internationalisation (1/2)
© Dr. Chaouche A.-C.
/res/values/strings.xml
<resources>
<string name="hello"> Hello </string>
...
</resources>
/res/values-ar/strings.xml
<resources>
<string name="hello"> ‫سالم‬ </string>
...
</resources>

11. Université Constantine 2 11
Internationalisation (2/2)
© Dr. Chaouche A.-C.
/java/LoginActivity.java
...
Locale myLocale = new Locale("ar");
DisplayMetrics dm = getResources().getDisplayMetrics();
Configuration conf = getResources().getConfiguration();
conf.locale = myLocale;
getResources().updateConfiguration(conf, dm);
...
Intent refresh = new Intent(this, LoginActivity.class);
startActivity(refresh);
finish();
...
Pour changer de langue dynamiquement (par programmation)

12. Université Constantine 2 12
Layouts : RelativeLayout
Attributs de RelativeLayout (1/2)
© Dr. Chaouche A.-C.
Aligner par rapport une autre vue ("@[+][package:]type:name")
android:layout_above, android:layout_below
android:layout_alignStart, android:layout_alignEnd
android:layout_alignTop, android:layout_alignBottom
android:layout_alignLeft, android:layout_alignRight
Aligner par rapport au parent ("true" ou "false")
android:layout_alignParentStart, android:layout_alignParentEnd
android:layout_alignParentTop, android:layout_alignParentBottom
android:layout_alignParentLeft, android:layout_alignParentRight
android:layout_alignWithParentIfMissing

13. Université Constantine 2 13
Layouts : RelativeLayout
Attributs de RelativeLayout (2/2)
© Dr. Chaouche A.-C.
Centrer par rapport au parent ("true" ou "false")
android:layout_centerHorizontal
android:layout_centerVertical
android:layout_centerInParent
Positionner par rapport à une autre vue ("@[+][package:]type:name")
android:layout_toStartOf, android:layout_toEndOf
android:layout_toLeftOf, android:layout_toRightOf

14. Université Constantine 2 14
Créer une activité ComplexActivity
Créer 8 Boutons
Aligner les boutons dans un RelativeLayout
Layouts : RelativeLayout
Exercice
© Dr. Chaouche A.-C.

15. Université Constantine 2 15
Layouts : RelativeLayout
Solution
© Dr. Chaouche A.-C.
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<Button android:text="ONE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Button01" />
<Button android:text="TWO"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Button02"
android:layout_centerHorizontal="true" />
<Button android:text="THREE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Button03"
android:layout_alignParentRight="true" />
<Button android:text="FOUR"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Button04"
android:layout_toLeftOf="@+id/Button05"
android:layout_centerVertical="true" />
<Button android:text="FIVE"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Button05"
android:layout_centerInParent="true" />
<Button android:text="SIX"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Button06"
android:layout_toRightOf="@+id/Button05"
android:layout_centerVertical="true" />
<Button android:text="SEVEN"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/Button07"
android:layout_above="@+id/Button08"
android:layout_centerHorizontal="true" />
<Button android:text="EIGHT"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/Button08"
android:layout_alignParentBottom="true" />
</RelativeLayout>

16. Université Constantine 2 16
Vue portrait vs. vue paysage
© Dr. Chaouche A.-C.

17. Université Constantine 2 17
Créer une version "paysage" de LoginActivity
Créer un package "layout-land"
Copier le fichier "layout_login.xml" dans "layout-land"
Modifier le code du "layout_login.xml" pour avoir l'affichage suivant
TP1b : Vue paysage de LoginActivity
© Dr. Chaouche A.-C.

18. Université Constantine 2 18
Documents sont accessibles :
Plateforme e-learning de l’université Constantine 2
Lien : http://elearning.univ-constantine2.dz/
Rendus du TP 1 :
Avant le Samedi 17 novembre à 23h59
À : ac.chaouche@misc-umc.org
Nom du fichier à rendre :
DAM_TP1_G%_NOMBINOME1_NOMBINOME2.zip
(Ex : DAM_TP1_G1_CHAOUCHE_NECIBI.zip)
Le fichier zip doit contenir seulement le dossier src
Documents et Rendus
© Dr. Chaouche A.-C.

19. Université Constantine 2 19
Configurations d’écran :
http://developer.android.com/guide/topics/resources/providing-resources.html
Drawables :
http://vogella.developpez.com/tutoriels/android/utilisation-drawable/
Android Drawable Import (Plugin) :
https://plugins.jetbrains.com/plugin/7658-android-drawable-importer
Quelques liens utiles
© Dr. Chaouche A.-C.

20. Université Constantine 2 20
Google Inc., «Google Play» 6 Juillet 2017. Lien : https://play.google.com.
Android Developer, «Supporting Multiple Screens». Lien :
https://developer.android.com/guide/practices/screens_support.html.
M. Seguy et Y. Bergès, Android, A Complete Course, From Basics To Enterprise
Edition, Édition Française éd., 2011, p. 279.
S. Walter, «Android script Photoshop pour exporter en ldpi, hdpi et xhdpi», 5
Janvier 2012. Lien : https://blog.stephaniewalter.fr/android-script-photoshop-
pour-exporter-en-ldpi-hdpi-et-xhdpi/.
Android Developer, «References - Android Plateform API 28 : Relative Layout».
Lien : https://developer.android.com/guide/topics/ui/layout/relative.html.
Références
© Dr. Chaouche A.-C.

21. Université Constantine 2 21
Chapitre 6 : Gestion des évènements et intentions
Objectifs :
Gérer les évènements d’une vues (click, key, ...)
Afficher des messages dans le Log et les Toasts
Comprendre la gestion des activités
Changer d’activité et transférer des données
Prochain chapitre
© Dr. Chaouche A.-C.

22. Université Constantine 2 22
Créer un ScrollView dans la racine
pour gérer le dépassement de l’écran
Améliorer les champs de texte
Supprimer le TextView
Englober le EditText dans une balise
android.support.design.widget.TextInputLayout
Rajouter l’attribut android:hint dans le EditText qui
remplace le TextView
Annexe
Améliorer l’ergonomie de la vue (1/2)
© Dr. Chaouche A.-C.

23. Université Constantine 2 23
Pour utiliser la vue android.support.design.widget.TextInputLayout
Ajouter les dépendances : com.android.support:design:26.+
Méthode 1 :
Project Structure > Modules > app >
Onglet Depenendencies
Méthode 2 : (dans le Gradle)
Annexe
Améliorer l’ergonomie de la vue (2/2)
© Dr. Chaouche A.-C.
/Gradle Scripts/build.gradle (Module: app)
...
dependencies {
compile fileTree(dir: 'libs', include: ['*.jar'])
compile 'com.android.support:appcompat-v7:26.+'
compile 'com.android.support:design:26.+'
}