ANDROID- IUT GEII 1 Juan BRAVO ANDROID Ressources
ANDROID- IUT GEII
1
Juan BRAVO
ANDROID
Ressources
ANDROID- IUT GEII 2ANDROID-IUT GEII
Interfaces graphiques simples
Ressources Objectif : découplage entre le fond et la forme
Dossier de ressources (res/) contenant les ressources du projet (bitmap, xml,…)
Chaque élément défini dans le répertoire /res impacte le fichier R.java
Permet de récupérer des références sur les instances générés au run-time
/res/drawable images (R.drawable.nom_de_la_ressources)
/res/layout Design des vues (R.layout.nom_de_la_vue)
/res/values/strings Chaînes de caractères, tableaux, valeurs numériques
… (R.string.nom_chaine, R.array.nom)
/res/anim description d’animations (R.anim.nom_animation_)
/res/menus Menus pour l’application (R.menu.nom_menu)
/res/values/color Code de couleurs (R.color.nom_couleur)
ANDROID- IUT GEII 3ANDROID-IUT GEII
Interfaces graphiques simples
Création d'une ressource
Bonne pratique :1 fichier par type de ressource
ANDROID- IUT GEII 4ANDROID-IUT GEII
Interfaces graphiques simples
Exemple avec les couleurs Respecter les consignes du Material Design
https://material.io/guidelines/style/color.html#color-color-palette
<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorPrimary">#F50057</color> <color name="colorPrimaryDark">#C51162</color> <color name="textColorPrimary">#FFFFFF</color> <color name="windowBackground">#FFFFFF</color> <color name="navigationBarColor">#000000</color> <color name="colorAccent">#FF80AB</color></resources>
ANDROID- IUT GEII 5ANDROID-IUT GEII
Du bon usage des couleurs https://material.io/guidelines/style/color.html#color-color-system
Une couleur primaire sur une teinte de 500
Ne pas utiliser pour des alertes ou événements rares
La couleur secondaire (accentColor) sur une teinte de A200
Elle est contrastée de la couleur primaire
A utiliser avec parcimonie : mise en relief d’éléments dans vos pages
colorPrimary
colorPrimaryDark
colorAccent
ColorPrimaryDark peut être utilisé pour séparer des zones
ANDROID- IUT GEII 6ANDROID-IUT GEII
Exemple Pas de couleur secondaire
Couleur primaire pour accentuer certains éléments
Emploi d'une couleur secondaire
S'assurer du contraste du texte
Fond clair
Fondfoncé Ajuster l'opacité pour améliorer le contraste
ANDROID- IUT GEII 7ANDROID-IUT GEII
Effet de style sur du texte Utilisation de balise type HTML
<resources>……
<string name="styledText1"> Exemple de style <i>statique</i> dans un <b>TextView</b>. \n exemple<strike>barré simple</strike> \n exemple<sub>indice</sub>, exemple<sup>exposant</sup>. \n exemple <big>GRAND</big>, exemple <small>petit</small>\n exemple <tt>monospace</tt > exemple combinaison de <small><sub>petit+indice</sub></small> </string>
<TextView android:id="@+id/styledText1" android:textColor="@color/textColorPrimary" />
Création de la ressource
Utilisation de la ressource
ANDROID- IUT GEII 8ANDROID-IUT GEII
Formes graphiques XML À définir dans drawable
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle", "oval", "line" ou "ring"] > <corners android:radius="integer" integer= 16dp par exemple android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> <gradient android:angle="integer" android:centerX="integer" android:centerY="integer" android:centerColor="integer" android:endColor="color" android:gradientRadius="integer" android:startColor="color" android:type=["linear" ou "radial "sweep"] android:useLevel=["true", "false"] /> <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <size android:width="integer" android:height="integer" /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /> </shape>
Forme générale
Des exemples
ANDROID- IUT GEII 9ANDROID-IUT GEII
dessins vectoriels XML Outil intégré : File>New>vectorAsset
Choisir une icône disponible ou importer votre icône
Fichier xml automatiquement crée
Pratique pour créer des boutons customs étirables
Vérifier que cette ligne est présente
rétrocompatibilité
dependencies { compile 'com.android.support:design:25.3.1'
À rajouter dans gradledefaultConfig { vectorDrawables.useSupportLibrary = trueET
ANDROID- IUT GEII 10ANDROID-IUT GEII
Les images Stockées dans res/drawable ou drawable-xx (x=mdpi par exemple)
Formats supportés :
Bitmap : .png .jpg ou .gif
Nine-Patch File : png étirable facilitant le redimensionnement
Nécessiter de redimensionner l'image
En fonction de la taille de l'écran, de sa densité
Outils à télécharger : 9-Patch-Resizer
Génération de plusieurs images redimensionnées dans différents fichiers
ANDROID- IUT GEII 11ANDROID-IUT GEII
Notion de pixel indépendant Mesure en dp : dépend de la taille et de la densité de pixels
Taille d'écran
Densité [dpi]
Sert de reférence pour le facteur d'échelle
ANDROID- IUT GEII 12ANDROID-IUT GEII
Px, dpi ou dp Px= pixel
Dpi= densité écran
Dp = pixel indépendant
2 fois plus de pixels pour maintenir le même aspect visuel
Facteur d'échelle entre les différentes densité
ANDROID- IUT GEII 13ANDROID-IUT GEII
Interfaces graphiques simples
Utilisation des ressources Ressources utilisateur
Référencement d’une ressource dans un fichier xml :"@type/identificateur"
<?xml version="1.0" encoding="utf-8"?><resources> <color name="colorAccent">#f00</color> …..</resources>
Fichier xml de ressources
<TextView android:id="@+id/textView3" ….... android:background="@drawable/gradient" android:text="ExempleGradientCustom" android:textColor="@color/colorAccent" />
Fichier layout .xml
Référencement d’une ressource dans le code : R.type.identificateur
Color textColor = (Color) findViewById(R.color.colorAccent);Non applicable car une ressource n'est pas un widget (classe View)
Color textColor = getResources().getColor(R.color.colorAccent);Solutio
nSolutio
n
Méthode statique renvoyant un objet de type Ressources mettant à disposition des méthodes getXXX pour l'accès aux ressources
ANDROID- IUT GEII 14ANDROID-IUT GEII
Interfaces graphiques simples
Utilisation des ressources Ressources système
Mise à disposition de ressources par google dans la librairie android
Objectif : homogénéiser l'aspect des applications
Référencement d’une ressource dans un fichier xml :"@android:type/identificateur"
<?xml version="1.0" encoding="UTF-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:id="@+id/menu_edit" android:icon="@android:drawable/ic_menu_edit" android:showAsAction="ifRoom|withText" android:title="@string/menuTitleEdit"/>
Référencement d’une ressource dans le code : R.android.type.identificateur BBitmapDrawable d = (BitmapDrawable)getResources().getDrawable(R.android.drawable.ic_menu_edit);
?android est utilisé pour appliquer des stylesandroid:textColor=”?android:textColor”
ANDROID- IUT GEII 15ANDROID-IUT GEII
Interfaces graphiques simples
Exemple 1 <?xml version="1.0" encoding="utf-8"?><shape android:shape="rectangle" xmlns:android="http://schemas.android.com/apk/res/android"> <gradient android:angle="90" android:endColor="#9293a1" android:startColor="#e4f0f0" /></shape>
<TextView android:id="@+id/textView3" ….... android:background="@drawable/gradient" android:text="ExempleGradientCustom" android:textColor="@color/green" />
Exploitation des ressources dans le layout xmlExploitation des ressources dans le layout xml
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" > <solid android:color="#f0600000" />
<corners android:radius="13dp" /> <padding android:bottom="10dp" android:left="10dp" android:right="10dp" android:top="10dp" /></shape>
<ImageButton android:id="@+id/imageButton1" android:layout_width="@dimen/btnHSize" android:layout_height="@dimen/btnVSize" …...." android:background="@drawable/rectangle" />
ANDROID- IUT GEII 16ANDROID-IUT GEII
Interfaces graphiques simples
Exemple 2
protected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_style_main);Button btn=(Button)findViewById(R.id.button1);String txt=getResources().getString(R.string.String txt=getResources().getString(R.string.iutTxtiutTxt);); btn.setText(txt);intint couleur=getResources().getColor(R.color. couleur=getResources().getColor(R.color.blueblue););btn.setTextColor(couleur);btn.setOnClickListener(new OnClickListener() {@SuppressWarnings("deprecation")@Overridepublic void onClick(View v) {// TODO Auto-generated method stubBitmapDrawable d = BitmapDrawable d = (BitmapDrawable)getResources().getDrawable(R.drawabl(BitmapDrawable)getResources().getDrawable(R.drawable.e.ic_launcheric_launcher););ImageButton btn=(ImageButton)findViewById(R.id.imageButton1);btn.setBackgroundDrawable(d);
}} );
ANDROID- IUT GEII 17ANDROID-IUT GEII
Gérer la diversité
Hétérogénéité des dispositifs Adaptation de la présentation en fonction de la surface visuelle disponible
Smartphone, phablet, tablette 7'' 10'' .. ?
Une solution : les qualifiers
Répertoires post-fixés par un attribut : layout-land , layout-sw720dp etc.
Le système détermine la configuration actuelle et utilise la ressource adéquate
https://developer.android.com/guide/topics/resources/providing-resources.html
ANDROID- IUT GEII 18ANDROID-IUT GEII
Gérer la diversité
Structure des projets
Ressources et de l'aliasing
ANDROID- IUT GEII 19ANDROID-IUT GEII
Gérer la diversité
Mise en œuvre Présentation spécifique si résolution min>720dp
en portrait : layout spécifique
En paysage : dual-pane (exemple : liste à droite/ détails à gauche)
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:orientation="horizontal"> <!--first right FrameLayout define in @layout/activity_main_tablet10--> <include android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.25" layout="@layout/activity_main_tablet10"/> <!--second left FrameLayout --> <FrameLayout android:layout_width="0dp" android:layout_height="match_parent" android:layout_weight="0.75">
<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hello World!" /> </FrameLayout></LinearLayout>
ANDROID- IUT GEII 20ANDROID-IUT GEII
Gérer la diversité
Layout values et aliasing
Le code Java
<?xml version="1.0" encoding="utf-8"?><resources> <item name="activity_main"type="layout">@layout/activity_main_tablet10_dualpane</item> <bool name="is_phone_small">false</bool> <bool name="is_phone_other">false</bool> <bool name="is_tablet_7">false</bool> <bool name="is_tablet_10">false</bool> <bool name="is_dual_pane">true</bool></resources>
Exemple d'un des fichiers layout.xml
public class MainActivity extends AppCompatActivity { boolean isDualPane = false; TextView tv_text;
@Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tv_text = (TextView) findViewById(R.id.tv_demo); isDualPane = getResources().getBoolean(R.bool.is_dual_pane); if (isDualPane) { tv_text.setText("We are in Dual Pane"); } else { tv_text.setText("We are in Single Pane"); } }}
Grâce à l'aliasing 1 seul nom de gabarit !
Présentation du type Master/Détails facilitée grâce à is_dual_pane
A préciser que si layout<> du layout par défaut