Gérer les ressources en fonction du matériel Internationaliser son application Android

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.+'
}