20
ANDROID- IUT GEII 1 Juan BRAVO ANDROID Ressources

ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

Embed Size (px)

Citation preview

Page 1: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

ANDROID- IUT GEII

1

Juan BRAVO

ANDROID

Ressources

Page 2: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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)

Page 3: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

ANDROID- IUT GEII 3ANDROID-IUT GEII

Interfaces graphiques simples

Création d'une ressource

Bonne pratique :1 fichier par type de ressource

Page 4: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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>

Page 5: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 6: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 7: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 8: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 9: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 10: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 11: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 12: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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é

Page 13: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 14: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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”

Page 15: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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" />

Page 16: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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);

}} );

Page 17: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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

Page 18: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

ANDROID- IUT GEII 18ANDROID-IUT GEII

Gérer la diversité

Structure des projets

Ressources et de l'aliasing

Page 19: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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>

Page 20: ANDROID - bravo.univ-tln.frbravo.univ-tln.fr/er/Android/2-Cours Android 2017- Ressources et... · ANDROID-IUT GEII ANDROID- IUT GEII 4 Interfaces graphiques simples Exemple avec les

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