Vos premiers pas en Android – Partie 1

teachme2

Vous voici au début d’une toute nouvelle aventure, l’apprentissage de la technologie Android.

Android doit son nom à une start-up spécialisée dans le développement Mobile qui fût rachetée par Google en 2005. Mais pourquoi Android me direz-vous donc ? Cela vient tout simplement du mot Androïde qui désigne un robot construit à l’image d’un humain.

Introduction

Si vous êtes novice en Android j’espère que vous êtes motivé(e), car nous allons voir beaucoup de choses tout au long de ce tutoriel.

Nous allons apprendre à quoi peuvent bien servir l’ensemble des dossiers et fichiers contenu dans un projet, tout en voyant leur fonctionnement dans une petite application.

Avant de commencer je vous invite à lire très assidûment le tutoriel d’introduction à Android qui vous permettra d’acquérir les bases d’un petit scarabée pour venir à bout de ce tutoriel.

Architecture du projet

Comme vous avez pu le voir dans le tutoriel d’introduction à Android, un projet contient plusieurs sous-dossiers et fichiers, voyons maintenant un par un leur utilité.

Le répertoire Res

Comme son nom l’indique, le dossier res est celui qui contient les ressources de notre application. Ces ressources peuvent être de différentes natures (images, couleurs, texte). Toutes ces ressources présentes dans ce répertoire seront affichées en front (sur l’écran).

Faisons maintenant un rapide tour du propriétaire :

Capture d’écran 2015-02-23 à 14.18.11

Les drawables

Les drawables sont des ressources graphiques. On va pouvoir les retrouver sous diverses formes :

  • Des images de type *.png ou *.jpeg de préférence (les *.gifs n’étant pas conseillés par Google),
  • NinePatch, ou *.9.png, pour vous expliquer très simplement le principe ce sont des images étirables à certains endroits préalablement définies dans l’image elle-même… ( mouais, simplement mais un peu incompréhensible, je pense que notre designer en chef vous fera un petit tuto là-dessus 😉 ),
  • Des fichiers xml, servant à définir des shapes (formes rectangles, rondes, etc), à définir la couleur de fond d’un bouton par rapport à son état (un “states-list”), ou encore à créer de jolis dégradés que l’on appliquera plus tard.

Vous pouvez voir sur l’image précédente, 5 dossiers dont le préfixe est “drawable”, vous devez vous demander “oula mais pourquoi tous ces dossiers avec d’autres trucs derrière ?!” … Un peu de patience, vous aurez la réponse bien assez tôt, genre maintenant :

Android est très répandu, plusieurs fabricants, plusieurs modèles d’appareils, des tablettes, des smartphones, des petites résolutions, des grosses résolutions, bref l’OS assure un support multi-écran, ce qui signifie que l’affichage de l’interface peut-être gérée sur plusieurs tailles d’écrans. Entre en jeu la densité de pixels sur une surface d’écran. Prenons l’exemple de 2 smartphones de taille équivalente, disons 5 pouces (inch en anglais), l’un peut avoir une résolution de 1920×1080 alors que l’autre peut avoir une résolution de 2560×1440. La densité de pixels (dpi : dots per inch) est alors plus importante sur le second. Une image de 300×300 ne prendra pas le même espace sur les 2 écrans.

Pour remédier à cela, nous avons à notre disposition des extensions (“-hdpi” par exemple) appelées “quantificateurs” qui vont nous permettre de définir la même ressource mais de taille ou de qualité différente en fonction du smartphone qui l’affiche.

Revenons à nos répertoires, vous pouvez apercevoir un dossier drawable sans suffixe (pas d’extension). Dans ce dossier nous allons mettre toutes les drawables qui ne dépendent pas de la taille de l’écran. L’exemple que j’ai pris au-dessus du bouton qui devient bleu au clic, ne va pas dépendre de la taille de notre smartphone donc il pourra être placé dans ce répertoire. En général, tous les fichiers graphiques *.xml seront contenus dans ce répertoire.

Pour les autres dossiers ils vont contenir toutes nos images de tailles et qualités différentes (*.jpeg, *.png, *.9.png). Voici avec une petite liste, la signification de toutes les extensions vue dans l’image précédente.

res/drawable-mdpi/graphic.png        // image pour les écrans de densité moyenne
res/drawable-hdpi/graphic.png        // image pour les écrans de haute densité
res/drawable-xhdpi/graphic.png       // image pour les écrans de très haute densité
res/drawable-xxhdpi/graphic.png      // image pour les écrans de très très haute densité

Je vais aborder très brièvement les répertoires mipmap car ils ont le même principe que les drawables aux niveaux des extensions. Ils ont pour but de contenir l’icône de lancement de notre application. Et oui, les petites icônes que vous retrouvez sur le lanceur d’applications de votre smartphone. Cela permet une meilleure séparation des drawables.

Les layouts

On attaque maintenant un répertoire très important pour le développement Android, celui contenant les fichiers layout.

Si vous avez créé votre première application, vous avez pu apercevoir un dossier nommer layout contenant un fichier xml “activity_main.xml

Capture d’écran 2015-02-23 à 15.06.28

Les layouts sont les fichiers nous permettant de définir nos vues, donc mettre un bouton, le placer en bas ou en haut, enfin toutes les folies que vous vous imaginez déjà faire afficher à votre écran.

Beaucoup de blabla, trop peu d’actions ; alors agissons ! On s’emballe pas, on va y aller doucement, on va “juste” afficher une image hein, on va pas créer le nouveau candy crush saga, enfin pas tout de suite… Il faut bien un début à tout.

Si vous êtes un peu curieux, vous avez déjà ouvert le fichier “activity_main.xml”. Pour les autres, allez-y !
On voit que ce fichier est de type xml, rappelons que le xml est un langage de balisage.

Alors que retrouve t-on dans ce fichier ?!

<RelativeLayout 
 xmlns:android="http://schemas.android.com/apk/res/android"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:paddingLeft="@dimen/activity_horizontal_margin"
 android:paddingRight="@dimen/activity_horizontal_margin"
 android:paddingTop="@dimen/activity_vertical_margin"
 android:paddingBottom="@dimen/activity_vertical_margin"
 >
 
     <TextView
          android:text="@string/hello_world"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content" 
     />

</RelativeLayout>

Je suis sûr que vous avez lancé l’application sur votre téléphone, et que vous avez vu le texte “hello world” sur votre écran. Voilà, vous êtes développeur Android !

Pour comprendre un peu, on fera un tutoriel entier sur les layouts car ont peut faire plein de chose avec eux.

Un layout est un ensemble d’objets et de conteneurs. Par exemple, dans notre fichier, nous avons le TextView qui est l’objet texte et le RelativeLayout qui est un conteneur.

Nous pouvons voir que chaque objet ou conteneur contient des attributs, une petite explication sur deux attributs essentiels s’impose :

  • android:layout_width, permet de définir la largeur de l’objet,
  • android:layout_height, permet de définir la hauteur de l’objet,

Ces attributs peuvent contenir deux valeurs différentes “match_parent” et “wrap_content”

  • “match_parent” signifie que l’objet va prendre toute la place disponible de son conteneur.
  • “wrap_content” signifie que l’objet va prendre seulement la place de son contenu en l’enrobant (d’où le “wrap”… Oui faut être un tantinet baïlingouale pour développer).

On voit que le conteneur a des attributs “padding”, cela permet comme le nom l’indique d’ajouter du padding (de l’espace interne) à l’objet. Vous pouvez changer les valeurs de ceux-ci si vous voulez voir la différence.

<RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingLeft="15dip"
     android:paddingRight="50dip"
     android:paddingTop="55dip"
     android:paddingBottom="35dip"
     >

L’unité en Android n’est pas le px mais le dip ou dp (density-independant pixel), rappelez-vous plus haut le truc barbant sur les densités d’écrans et la capacité qu’a Android à gérer plusieurs tailles d’écran. La valeur renseignée pourra alors s’adapter à la densité.

Je vous avais promis qu’on allait afficher une image, je ne vous ai pas menti ! On va s’y mettre. Pour commencer supprimer l’objet TextView pour obtenir ceci :

<RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     android:paddingBottom="@dimen/activity_vertical_margin"
     >
</RelativeLayout>

Ensuite, copions l’image ic_launcher contenue dans mipmap-hdpi dans le répertoire drawable-hdpi (vous pouvez prendre n’importe qu’elle autre image)

Pour afficher cette image il va falloir utiliser l’objet ImageView permettant d’afficher des images dans notre layout.

Voici le code de l’ImageView avec ses attributs :

<ImageView
     android:layout_width="wrap_content"
     android:layout_height="wrap_content" 
     android:src="@drawable/ic_launcher"
     android:layout_centerInParent="true"
/>

On retrouve ici deux nouveaux attributs :

  • android:src=“@drawable/ic_launcher”, cela permet de définir le nom de l’image que l’on souhaite afficher. On va la chercher dans les drawable grâce au @drawable. Ici, l’image s’appelle ic_launcher.png, vous avez remarqué ? On ne met pas l’extension de l’image lorsqu’on l’appelle dans le layout.
  • android:layout_centerInParent=“true”, cela permet de centrer notre image verticalement et horizontalement par rapport à son conteneur.

 

 Vous devez donc avoir maintenant le layout suivant :

<RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     android:paddingLeft="@dimen/activity_horizontal_margin"
     android:paddingRight="@dimen/activity_horizontal_margin"
     android:paddingTop="@dimen/activity_vertical_margin"
     android:paddingBottom="@dimen/activity_vertical_margin"
     >

     <ImageView
         android:layout_width="wrap_content"
         android:layout_height="wrap_content" 
         android:src="@drawable/ic_launcher"
         android:layout_centerInParent="true"
     />

</RelativeLayout>

Lancez l’application, alors ça donne quoi ? On est un chef en application Android hein ! Voici ce que vous êtes sensé obtenir.

image

Bon, c’est largement suffisant pour un début ! Nous avons déjà vu beaucoup de choses, faisons une petite pause café et/ou clope et/ou caca ; on se retrouve très vite dans la 2nde partie de ce tutoriel.

3 commentaire sur “Vos premiers pas en Android – Partie 1

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *