Tutorial : les layouts et la navigation entre Activity via les Intent

Blue Flower

Dans cet article, nous aborderons les sujets suivants :

les différents layouts que propose Android; un layout est un template qui décrit l'agencement des éléments d'un écran. Android désigne un écran par le terme Activité
la notion d'intent qui permet de passer d'un écran à un autre, ou en terminologie Android, de passer d'une activité à une autre.

Les différents layout

Notions communes aux différents layout

android:layout_gravity : pour positionner un élément à gauche, au milieu ou à droite par rapport à son conteneur (permet de centrer du texte au milieu de l'écran)
android:inputType : les zones de saisie de texte peuvent être typées : simple texte , numéro de téléphone, adresse email, mot de passe, ....

Par exemple android:inputType="textPassword"

android:hint : permet de saisir dans une zone de texte une explication sur la zone de texte. Par exemple, indiquer qu'il s'agit de saisir son login.
android:layout_weight : permet de donner du poids à un élément, ce qui signifie que l'élément occupera plus ou moins d'espace

Le linearlayout

Dans ce layout, tous les composants ajoutés sont disposés à la suite. Via l'attribut orientation, on précise si les éléments seront disposés horizontalement ou verticalement.

Dans l'exemple ci dessous, une page de login (fichier activity_main_linearlayout.xml), est montré la mise en application des tags suivants :

android:layout_gravity="center"
android:inputType="textPassword" pour le mot de passe
android:hint : pour indiquer à l'utilisateur ce qu'il a à faire. Ceci évite d'avoir à rajouter un TextView décrivant la zone de saisie
android:layout_weight avec un bouton Annuler de taille disproportionnée

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Page d'authentification" />

    <EditText
        android:id="@+id/editTextLogin"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="votre login"
        android:ems="10" >

        <requestFocus />
    </EditText>
    
       <EditText
        android:id="@+id/editTextPassword"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="votre mot de passe"
        android:inputType="textPassword"
        android:ems="10" >   
    </EditText>

    <Button
           android:id="@+id/buttonConnect"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Se connecter" 
           android:onClick="doConnect"/>/>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:text="Annuler" 
        android:layout_weight="0.5"
        android:onClick="doReset"/>/>

</LinearLayout>

Le résultat est le suivant (obtenu via le simulateur de device d'éclipse):

Le relativelayout

Dans ce layout, les éléments sont positionnés relativement aux autres ou au conteneur. Quelques exemples de positionnement :

android:layout_toRightOf="@+id/textView1" : le composant textViewLogin est placé à gauche de textView1
composant buttonGoToTableLayout : placé sous le composant textViewLogin via android:layout_below="@+id/textViewLogin", placé au milieu de l'écran via android:layout_centerHorizontal="true"

L'exemple ci dessous (fichier activity_relativelayout.xml) correspond à une page d'accueil avec trois boutons. Ces trois boutons permettront de naviguer vers une autre activité, chaque activité utilisant un layout différent :

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bienvenue " />

    <TextView
        android:id="@+id/textViewLogin"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/textView1"
      />

    <Button
        android:id="@+id/buttonGoToTableLayout"
        style="?android:attr/buttonStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textViewLogin"
        android:layout_centerHorizontal="true"
        android:text="Vers tablelayout" 
        android:onClick="goToTableLayout"/>  

     <Button
        android:id="@+id/buttonGoToGridLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/buttonGoToTableLayout"
        android:text="Vers exemple gridlayout" 
        android:onClick="goToGridLayout"/> 

     <Button
        android:id="@+id/buttonGoToFrameLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/buttonGoToGridLayout"
        android:layout_alignParentRight="true"
        android:text="Vers exemple framelayout" 
        android:onClick="goToFrameLayout"/>  

</RelativeLayout>

Le résultat est le suivant :

relativelayout

Le tablelayout

Ce layout permet de disposer les éléments dans un tableau. Par contre, il n'est pas possible du fusionner des cellules comme en html avec la balise table.

Ci-dessous un exemple de formulaire avec nom, prénom, email, téléphone (fichier activity_tablelayout.xml):

<?xml version="1.0" encoding="utf-8"?><TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

   <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Nom" />

        <EditText
            android:id="@+id/editText1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="5">
            <requestFocus />
        </EditText>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Prénom" />
        
        <EditText
            android:id="@+id/editText2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ems="5"/>

    </TableRow>

   <TableRow
       android:id="@+id/tableRow2"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content" >

       <TextView
           android:id="@+id/textView3"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Mail" />

       <EditText
           android:id="@+id/editText3"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:ems="5"
           android:inputType="textEmailAddress" />

       <TextView
           android:id="@+id/textView4"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:text="Numéro de téléphone" />

       <EditText
           android:id="@+id/editText4"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:ems="5"
           android:inputType="phone" />

   </TableRow>

</TableLayout>

Le résultat est le suivant (obtenu via le simulateur de device d'éclipse et en se mettant en mode paysage Ctrl F12):

tablelayout

Le gridlayout

Ce layout vient compléter le tablelayout en proposant de fusionner des cellules. Ci-dessous un exemple avec une grille sur 4 colonnes et des fusions de colonne (fichier activity_gridlayout.xml) :

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    tools:context="${relativePackage}.${activityClass}" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nom" />

    <EditText
        android:id="@+id/editTextNom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Prénom" />

    <EditText
        android:id="@+id/editTextPrenom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Email" />
    
    <EditText
        android:id="@+id/editTextEmail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Téléphone" />
    
    <EditText
        android:id="@+id/editTextTelephone"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ems="5" />
    
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Adresse" />
        
    <EditText
        android:id="@+id/editTextAdresse"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_columnSpan="3"
        android:ems="5" />

</GridLayout>

Ce qui donne le rendu suivant :

gridlayout

Le framelayout

Il s'agit du layout le plus basique. Il permet de superposer des éléments, par exemple le logo Android avec un texte sur cette image.

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

       <ImageView 
                     android:src="@drawable/android"
                     android:scaleType="fitCenter"
                     android:layout_height="fill_parent"
                     android:layout_width="fill_parent"/>
         <TextView
                      android:text="Tutorial Android"
                      android:textSize="30sp"
                      android:textStyle="bold"
                      android:textColor="#003399"
                      android:layout_height="fill_parent"
                      android:layout_width="fill_parent"
                      android:gravity="center"/>
</FrameLayout>

Le résultat est le suivant :

framelayout

Les intents

Sur nos boutons déclenchant une action, il faut créer un intent pointant vers l'activité voulue et lancer l'activité.

Ce qui donne dans le cas du passage de l'écran de login à l'écran d'accueil :

on crée l'intent pointant vers l'activité voulue : Intent intent = new Intent(this, RelativelayoutActivity.class);
on fournit à l'intent le login et le mot de passa afin que l'activité recevant l'intent ait ces informations : intent.putExtra(EXTRA_LOGIN, strUserName);
on démarre l'activité : startActivity(intent);

Ci-dessous la méthode déclenchée par l'action de login, qui après vérification de la non nullité du login et du mot de passe, déclenche une autre activité :

	public void doConnect(View view) {

		EditText txtUserName = (EditText) findViewById(R.id.editTextLogin);
		String strUserName = txtUserName.getText().toString();
		EditText txtUserPasswd = (EditText) findViewById(R.id.editTextPassword);
		String strUserPasswd = txtUserPasswd.getText().toString();

		if (TextUtils.isEmpty(strUserName)) {
			txtUserName.setError("Veuillez saisir votre login");
			return;
		}
		if (TextUtils.isEmpty(strUserPasswd)) {
			txtUserName.setError("Veuillez saisir votre mot de passe");
			return;
		}
		Toast.makeText(this, "doConnect", Toast.LENGTH_SHORT).show();
		Intent intent = new Intent(this, RelativelayoutActivity.class);
		intent.putExtra(EXTRA_LOGIN, strUserName);
		intent.putExtra(EXTRA_PASSWORD, strUserPasswd);
		startActivity(intent);

	}

Changement de l'orientation de l'écran

Suivant que l'écran de votre équipement est orienté en mode portrait ou paysage, il peut être bon de positionner un layout pour chacun de ces modes. Pour ce faire, il faudra créer une seconde vue à positionner dans le répertoire ...

Sous Eclipse, pour passer du mode portrait à paysage, il faut se servir des touches Ctrl F12.

AVD Manager

Pour tester votre code sous Eclipse, il faut décrire le device sur lequel exécuté votre application via Android Virtual Device.

Si ce menu n’apparaît pas, configurer Eclipse : Windows > Customize perspective > Command group availibility : android SDK and AVD Manager

Code source

TestLayout.zip

Détails: Publication : 4 janvier 2015; Mis à jour : 10 janvier 2015

Android