Développement d’applications mobiles

– Cours 7 –
Chapitre 5 : Structure d’un projet Android (2/2)

Dr. CHAOUCHE A.-C.

Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz

Université Constantine 2 2018/2019. Semestre 1

 Développement d’applications mobiles
– Cours 7 –
Chapitre 5 : Structure d’un projet Android (2/2)

Dr. CHAOUCHE A.-C.

Faculté des nouvelles technologies
ahmed.chaouche@univ-constantine2.dz

Etudiants concernés
Faculté/Institut Département Niveau Spécialité

Nouvelles technologies IFA Licence 3 Technologies de l’information (TI)

Nouvelles technologies IFA Licence 3 Science de l’informatique (SCI)

Université Constantine 2 2018/2019. Semestre 1

 Résumé

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

Université Constantine 2 © Dr. Chaouche A.-C. 3

 Taille et densité des écrans

Taille des écrans : 1 inch = 2,54 cm

small, normal, large, xlarge

Densité : DPI (Dot Per Inch)

ldpi, mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi

Université Constantine 2 © Dr. Chaouche A.-C. 4

 Taille et densité des écrans
Indépendance de la densité

Density independant Pixel (dp)

dp = px / (dpi / 160)

Dépendance de densité (px)

Indépendance de densité (dp)

Université Constantine 2 © Dr. Chaouche A.-C. 5

 Taille et densité des écrans
Distribution

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

Université Constantine 2 © Dr. Chaouche A.-C. 6

 Vue portrait vs. vue paysage

Université Constantine 2 © Dr. Chaouche A.-C. 7

 Prise en charge des différentes configurations

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 paysage des 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
...

Université Constantine 2 © Dr. Chaouche A.-C. 8

 Drawables et densité de l’écran

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

Université Constantine 2 © Dr. Chaouche A.-C. 9

 Internationalisation (1/2)

/res/values/strings.xml
<resources>
<string name="hello"> Hello </string>
...
</resources>

/res/values-ar/strings.xml
<resources>
<string name="hello"> ‫< سالم‬/string>
...
</resources>

Université Constantine 2 © Dr. Chaouche A.-C. 10

 Internationalisation (2/2)

Pour changer de langue dynamiquement (par programmation)

/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();
...

Université Constantine 2 © Dr. Chaouche A.-C. 11

 Layouts : RelativeLayout
Attributs de RelativeLayout (1/2)

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

Université Constantine 2 © Dr. Chaouche A.-C. 12

 Layouts : RelativeLayout
Attributs de RelativeLayout (2/2)

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

Université Constantine 2 © Dr. Chaouche A.-C. 13

 Layouts : RelativeLayout
Exercice

Créer une activité ComplexActivity

Créer 8 Boutons
Aligner les boutons dans un RelativeLayout

Université Constantine 2 © Dr. Chaouche A.-C. 14

 Layouts : RelativeLayout
Solution
<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" />
Université Constantine 2
<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>
© Dr. Chaouche A.-C. 15
 Vue portrait vs. vue paysage

Université Constantine 2 © Dr. Chaouche A.-C. 16

 TP1b : Vue paysage de LoginActivity

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

Université Constantine 2 © Dr. Chaouche A.-C. 17

 Documents et Rendus

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

Université Constantine 2 © Dr. Chaouche A.-C. 18

 Quelques liens utiles

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

Université Constantine 2 © Dr. Chaouche A.-C. 19

 Références

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.

Université Constantine 2 © Dr. Chaouche A.-C. 20

Prochain chapitre

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

Université Constantine 2 © Dr. Chaouche A.-C. 21

 Annexe
Améliorer l’ergonomie de la vue (1/2)

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

Université Constantine 2 © Dr. Chaouche A.-C. 22

 Annexe
Améliorer l’ergonomie de la vue (2/2)

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)

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

Université Constantine 2 © Dr. Chaouche A.-C. 23