Ce tutoriel a pour but d’expliquer la base du fonctionnement des vues sur Android et pour cela nous allons créer un petit programme qui reprendra les bases des interfaces graphiques sous Android.
Ce tutoriel nécessite la lecture du tutoriel présentant le développement sous Android.
La création d’interfaces est indispensable lors de la conception d’une application dédiée aux smartphones car de nouveaux critères sont à prendre en compte dont :

  • Les différentes tailles d’écran.
  • Les différentes résolutions etc…

Vue d’ensemble

La classe centrale et la base pour réaliser une vue sous Android composent la classe “View“.

Les vues

Cette classe est le bloc basique pour les interfaces utilisateurs (disposition d’écran, interaction…).
Une ou plusieurs vues peuvent être regroupées dans ce que l’on appelle “ViewGroup“.
Ces groupes de vues sont utilisés pour gérer la mise en page des interfaces graphiques.

Exemples de vues

Dans cette partie, je vais vous donner quelques exemples de composants importants et fréquemment utilisées.

Les différents layouts

Sous Android, la notion de mise en page est reliée à la notion de “Layout“. Cette dernière représente l’agencement des différents éléments graphiques dans votre interface.
Voici quelques exemples de layouts :

  • FrameLayout : Ce layout est très simple et permet d’afficher un élément dans votre interface. Vous pouvez l’utiliser pour ajouter plusieurs éléments et jouer sur leur visibilité.
  • LinearLayout : Il organise les différents éléments de votre interface sur une ligne ou sur une colonne. La direction peut être définie à l’aide de la méthode setOrientation().
  • RelativeLayout : Il permet de définir la position des éléments en fonction de la position de leurs éléments parents. On ne peut pas avoir de dépendance circulaire dans la taille dans le RelativeLayout.
  • GridLayout : Permet d’organiser une vue sous forme d’un tableau composé de plusieurs lignes / colonnes. Il permet aussi d’étendre une colonne sur plusieurs cases ou de laisser des cases vides.

On peut déclarer les Layouts par code Java ou par XML. La déclaration en XML convient pour les interfaces statiques et la déclaration Java convient aux interfaces dynamiques. Vous pouvez combiner les deux types de déclarations

Exemple

Voici la déclaration du Layout de notre principale vue (activity_main.xml) qui se trouvera dans le répertoire “res/layout”

  • android:orientation : pour l’orientation de notre LinearLayout (Vertical ou Horizontal).
  • android:layout_width et android:layout_height : fill_parent (match_parent) pour dire que cela représente la taille du parent ou wrap_content pour dire qu’elle prend la taille de contenu.

Voici le fichier pour notre activité principale (MainViewActivity pour notre exemple) :

package com.tuto.android.view;

import android.app.Activity;
import android.os.Bundle;

public class MainViewActivity extends Activity {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}
  • Dans la méthode OnCreate, on définit la vue à l’aide de la méthode setContentView et on lui affecte R.layout.activity_main qui représente notre vue, déclarée dans le dossier “Layout”.
  • R signifie qu’on utilise une ressource qui se trouve dans le dossier “res”.
  • Toutes les ressources qui se trouvent dans le dossier “res” sont pré-compilées et des liens sont générés dans le dossier R.java.

Voici un exemple d’une vue complète (Toujours dans notre activity_main.xml) :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/android_picture"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/normal_padding"
        android:src="@drawable/android"
        android:contentDescription="@string/image_content_description" />

    <Button
        android:id="@+id/create_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/small_padding"
        android:text="@string/create_account" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="@dimen/normal_padding"
        android:text="@string/email"
        android:textSize="@dimen/normal_text_size"
        android:textColor="@color/black_color" />

    <EditText
        android:id="@+id/user_email"
        android:layout_width="@dimen/large_padding"
        android:layout_height="wrap_content"
        android:inputType="textEmailAddress"
        android:layout_gravity="center" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:paddingTop="@dimen/normal_padding"
        android:textSize="@dimen/normal_text_size"
        android:text="@string/password"
        android:textColor="@color/black_color" />

    <EditText
        android:id="@+id/user_password"
        android:layout_width="@dimen/large_padding"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/connect"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/normal_padding"
        android:text="@string/connect" />

</LinearLayout>

  • LinearLayout :
    • android:orientation : Orientation verticale pour le Linear Layout.
    • android:layout_width et android:layout_height : Hauteur et largeur du Layout, définie à celle des parents.
  • ImageView : élément qui sert à afficher une image
    • android:layout_height : Définir la hauteur de l’élément.
    • android:id : Identifiant de l’élément (utilisé pour l’interaction avec l’élément).
    • android:layout_width : Largeur de l’élément.
    • android:src : Image source utilisée pour l’ImageView.
    • android:layout_marginTop : Marge externe du haut. Les différentes tailles utilisées sont déclarées dans le fichier dimens.xml (dossier values) et utilisées en suivant la syntaxe @dimen/nom_de_la_variable
    • android:contentDescription : utiliser pour la description du contenu de l’image (utile pour l’accessibilité de l’application)
  • Button
    • android:layout_gravity : Position de l’élément (center, left, right…).
    • android:text : Texte à afficher dans l’élément. Toute les chaines de caractères utilisées sont déclarées dans le ficher strings.xml et utilisées à l’aide de la syntaxe @string/nom_de_la_chaine
  • TextView
    • android:textColor : Couleur du texte. Toute les couleurs utilisées sont déclarées dans le fichier colors.xml et utilisées à l’aide de la syntaxe @color/nom_de_la_couleur.
    • android:paddingTop : Marge interne du haut.
    • android:textSize : Définie la taille du text.
  • EditText
    • android:inputType : Type du texte qui sera saisie dans la zone d’édition (adresse email pour la première zone d’édition et mot de passe pour la seconde).
  • Et voici l’image que j’ai utilisé pour cet exemple :

Voici les différents fichiers de ressources utilisés dans cette application :

  • colors.xml : Couleurs utilisées dans l’application
    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="black_color">#000</color>
    </resources>
    
  • dimens.xml : Dimensions utilisées dans l’application. Pour les différentes tailles déclarées dans votre application, utilisez les tailles en dp (density independant pixel) pour la taille des composants et les tailles en sp (scale independant pixel) pour la taille des polices et non de tailles en pixels (px). Les tailles en dp / sp garantissent les mêmes proportions dans vos interfaces quelques soit la densité de l’écran cible (Bonne pratique pour la compatibilité de votre application)
    <resources>
        <dimen name="padding_small">8dp</dimen>
        <dimen name="padding_medium">8dp</dimen>
        <dimen name="padding_large">16dp</dimen>
        
        <dimen name="normal_text_size">15sp</dimen>	
        <dimen name="normal_padding">20dp</dimen>
        <dimen name="large_padding">100dp</dimen>
        <dimen name="small_padding">10dp</dimen>
    </resources>
    
  • strings.xml : Utiliser pour déclarer les chaines de caractères
    <resources>
    
        <string name="app_name">FirstAndroidView</string>
        <string name="hello_world">Hello world!</string>
        <string name="menu_settings">Settings</string>
        <string name="title_activity_main">MainActivity</string>
        <string name="image_content_description">Un Android avec un chien</string>
        <string name="create_account">Créer un compte</string>
        <string name="email">Adresse email</string>
        <string name="password">Mot de passe</string>
        <string name="connect">Se connecter</string>
    </resources>
    

Sans oublier le fichier AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tutos.android.ui"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

Et voici le résultat :

Conclusion

En conclusion, ce tutoriel vous fournit une base pour la création de vues simples, d’autres tutoriaux plus avancés sur le création de vue seront disponibles au fur et à mesure.
Les sources du projets sont disponibles à l’adresse suivante

Categories: Tutoriels

49 Responses so far.


  1. Headwyn dit :

    Bonjour,

    Je ne sais si les commentaires sont toujours lus. Je suis tombé sur votre tuto aujourd’hui. J’ai testé pour voir le rendu et comment je pouvais modifier. Cependant j’ai un soucis avec les colors.xml et autres fichiers xml de ressource. Doivent-ils se trouver dans le dossier layout ? Si oui j’ai un problème : le fichier est en erreur.

    Merci pour le tuto

    • Headwyn dit :

      Il semblerait que ces xml doivent être mis dans la classe values. Peut-être suis-je passé à côté de cette précision dans le tuto.

    • Benbourahla Nazim dit :

      Le dossier colors.xml (dimens.xml …) doivent être dans le dossier “values”, il n’y a que tes vues dans le dossier layout

  2. sensationnelle article, merci beaucoup.

Leave a Reply