Android : Présentation des différents

layouts de mise en page

Partager cet article Temps estimé pour la lecture de cet article : 42 min

Aujourd’hui, j’aimerais parler des différents layouts que l’on trouve sous Android. Ces derniers permettent
de réaliser l’agencement des différents éléments de notre interface graphique. On trouve principalement
trois types de layouts :

LinearLayout : permet de positionner nos éléments sur une ligne ou sur une colonne, on peut alors
choisir la direction.
RelativeLayout : permet de définir la position des éléments par rapport aux éléments parent.
GridLayout : permet d’organiser son interface sous forme d’un tableau.

Pour déclarer nos layouts, on utilise bien souvent des fichiers XML. Pour plus d’informations sur d’autres
layouts, je vous conseille d’aller voir la documentation qui est très bien faites.

Le layout LinearLayout

Les conteneurs ou les widgets appartenant à ce Layout sont alignés en ligne soit horizontalement ou
verticalement.

1. Orientation du Layout

android:orientation=’horizontal/vertical’

Cette option spécifie la façon dont seront alignés les éléments contenus dans ce Layout.

2. Taille des éléments

Tous les widgets qui composent un LinearLayout doivent fournir une taille, grâce aux deux propriétés
suivantes : android:layout_width et android:layout_height

Ces deux propriétés peuvent prendre 3 types de valeur :

Une taille fixe : par exemple 50px (pixels). Donc quelque soit la taille de l’écran, l’élément occupera
exactement 50px.
fill_parent : Dans ce cas on demande au composant d’occuper tout l’espace disponible chez son
conteneur parent (après le placement des autres widgets).
wrap_content : Pour demander au Widget d’occuper une taille naturelle (la taille de son contenu
pour le texte par exemple). S’il est trop gros par rapport à la taille disponible. Android s’occupera par
exemple de couper le texte s’il n’y a plus de place.

3. Gravité des éléments

Dans un LinearLayout les éléments sont alignés de gauche à droite et de haut en bas. Donc la question qui
se pose est comment faire si l’on veut placer notre élément tout en bas ou a droite. La réponse se trouve
dans la gravité (android:layout_gravity).

Les gravités les plus couramment utilisées sont left, center_horizontal, top, bottom, right, pour
respectivement aligner les éléments à gauche, au centre, en haut, en bas et à droite. On peut aussi utiliser
center_vertical pour centrer verticalement l’élément.

4. Poids des éléments

Prenons un exemple, imaginez que vous avez 2 boutons en colonne et que vous voulez que chacun occupe
tout l’espace disponible.

Si on leur affecte la même valeur au poids (android:layout_weight), l’espace libre sera partagé
équitablement entre les deux. Si l’on met une valeur 1 au premier et 2 au second, le deuxième prendra
deux fois plus d’espace libre que le premier (par défaut la valeur du poids est de 0).

Vous pouvez aussi utiliser des pourcentages, mais dans ce cas assurez-vous bien que la somme des
pourcentages ne dépasse pas 100%.
5. Espacement

Les différents éléments que vous créez sont par défaut serrés les uns contre les autres. Vous pouvez
augmenter l’espacement à l’aide de la propriété android:padding (padding top, left, right et bottom). La
valeur précise l’espace situé entre le contour de l’élément et son contenu réel. Par exemple pour un bouton
c’est l’espacement entre le contour du bouton et son texte.

Boutons en bas de page à 50% de largeur chacun

Linearlayout – Boutons

Prenons un exemple simple, on veut positionner deux boutons en bas de l’écran, pour ce faire, on utilise :

Un LinearLayout avec une orientation horizontale

On ajoute les deux boutons au LinearLayout avec une weight de 50 pour les deux
On utilise un RelativeLayout qui contiendra le LinearLayout et on utilise alors l’argument
alignParentBottom pour coller ce dernier en bas de l’écran

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools"
3     android:layout_width="match_parent"
4     android:layout_height="match_parent"
5     android:paddingBottom="@dimen/activity_vertical_margin"
6     android:paddingLeft="@dimen/activity_horizontal_margin"
7     android:paddingRight="@dimen/activity_horizontal_margin"
8     android:paddingTop="@dimen/activity_vertical_margin"
9     tools:context="com.example.layouts.MainActivity" >
10  
11     <TextView
12         android:layout_width="wrap_content"
13         android:layout_height="wrap_content"
14         android:layout_centerHorizontal="true"
15         android:layout_centerVertical="true"
16         android:text="LinearLayout - 2 Buttons : 50% width " />
17  
18     <LinearLayout
19         android:id="@+id/buttons"
20         android:orientation="horizontal"
21         android:layout_width="fill_parent"
22         android:layout_height="wrap_content"
23         android:layout_alignLeft="@+id/result"
24         android:layout_alignParentBottom="true" >
25  
26         <Button
27             android:id="@+id/btn"
28             android:layout_width="fill_parent"
29             android:layout_height="wrap_content"
30             android:layout_weight="50"
31             android:text="Bouton 1" />
32  
33         <Button
34             android:id="@+id/btn2"
35             android:layout_width="fill_parent"
36             android:layout_height="wrap_content"
37             android:layout_weight="50"
38             android:text="Bouton 2" />
39     </LinearLayout>
40  
41 </RelativeLayout>

Menu avec alignement vertical : 3 images à 33% de hauteur de l’écran

Linearlayout – Menu

Un autre exemple bien utile pour un menu vertical dont trois images se séparent l’écran avec une hauteur
de 33.333…% chacun :

On crée un LinearLayout qu’on positionne verticalement.

On crée trois boutons avec chacun un weight de 1.

Xml du menu

1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     android:layout_width="match_parent"
3     android:layout_height="match_parent"
4     android:background="#fff"
5     android:orientation="vertical"
6     android:weightSum="3">
7  
8     <ImageButton
9         android:id="@+id/imageButton3"
10         android:layout_width="wrap_content"
11         android:layout_height="0dp"
12         android:layout_weight="1"
13         android:src="@drawable/img" />
14  
15     <ImageButton
16         android:id="@+id/imageButton1"
17         android:layout_width="wrap_content"
18         android:layout_height="0dp"
19         android:layout_weight="1"
20         android:src="@drawable/img2" />
21  
22     <ImageButton
23         android:id="@+id/imageButton2"
24         android:layout_width="wrap_content"
25         android:layout_height="0dp"
26         android:layout_weight="1"
27         android:src="@drawable/img3" />
28  
29 </LinearLayout>

RelativeLayout

Le principe du RelativeLayout est de placer les éléments selon d’autres éléments du conteneur.

Positionnement relatif au conteneur :

Dans ce type de relation on lie un élément à son conteneur :

android:layout_alignParentTop (Bottom/Left/Right) : le haut de l’élément doit être aligné avec celui

de son conteneur
android:layout_centerHorizontal (centerVertical) : élément doit être centré horizontalement dans son
conteneur
android:layout_centerInParent : l’élément doit être centré horizontalement et verticalement dans
son conteneur

Position relative aux autres éléments :

On peut également positionner un élément par rapport à un autre grâce à son identificateur (son ID).

A la déclaration d’un élément : android:id=’@+id/idElem’

A l’utilisation : @id/idElem

Voici les différentes options disponibles :

android:layout_above : élément placé au-dessus de celui indiqué par son id

android:layout_below : en dessous
android:layout_toLeftOf : à gauche
android:layout_toRightOf : à droite
android:layout_alignTop : élément aligné avec la haut de celui indiqué par son id
android:layout_alignBottom : avec le bas
android:layout_alignLeft : à sa gauche
android:layout_alignRight : à sa droite
android:layout_alignBaseLine : indique que les lignes de base des deux éléments sont alignées

Page de login

Voyons maintenant un exemple du RelativeLayout combiné avec le LinearLayout, afin de réaliser une page
de login. Tout d’abord le résultat :

Relativelayout – Login

Cet exemple est un peu plus compliqué que les autres, regardons dans le détail ce qui se passe :
 Vous, vous en serez doutés pour les trois boutons alignés on va utiliser un LinearLayout. On applique
un padding de 10 pixels sur celui-ci et on définir une couleur de fond. Le LinearLayout est centré
grâce à l’option centerInParent
On applique une marge pour pouvoir espacer les boutons, le padding permet d’aérer notre bouton.
Enfin on applique un fond pour chacun d’eux.
On dessine un fond sur notre RelativeLayout (notre conteneur principal) grâce à l’option
android:background.

XML de la page de login

Voyons maintenant le xml associé à cette vue :

1 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools"
3     android:layout_width="match_parent"
4     android:layout_height="match_parent"
5     android:paddingBottom="@dimen/activity_vertical_margin"
6     android:paddingLeft="@dimen/activity_horizontal_margin"
7     android:paddingRight="@dimen/activity_horizontal_margin"
8     android:paddingTop="@dimen/activity_vertical_margin"
9     android:background="@drawable/back">
10   
11  <LinearLayout
12         android:orientation="vertical"
13         android:layout_width="wrap_content"
14         android:layout_height="wrap_content"
15         android:layout_centerInParent="true"
16         android:background="@drawable/linearlayout_bg"
17         android:padding="10dp"
18         >
19  
20         <Button
21             android:id="@+id/btnGplus"
22             style="@style/AppBaseTheme"
23             android:layout_width="match_parent"
24             android:layout_height="wrap_content"
25             android:layout_margin="4dp"
26             android:padding="10dp"
27             android:text="Sign in with Google+"
28             android:background="#DD4B39"
29             android:textColor="#FFFFFF" />
30              
31         <Button
32             android:id="@+id/btnFb"
33             android:layout_width="match_parent"
34             android:layout_height="wrap_content"
35             android:layout_margin="4dp"
36             android:padding="10dp"
37             android:text="Sign in with Twitter"
38             android:background="#39A6CE"
39             android:textColor="#FFFFFF" />
40  
41         <Button
42             android:id="@+id/btnTwitter"
43             android:layout_width="match_parent"
44             android:layout_height="wrap_content"
45             android:layout_margin="4dp"
46             android:padding="10dp"
47             android:text="Sign in with Faceboook"
48             android:background="#46629E"
49             android:textColor="#FFFFFF" />
50   </LinearLayout>
51      
52 </RelativeLayout>

GridLayout

Le GridLayout permet de placer des éléments sur une grille, très pratique pour des tableaux par exemple
ici, pour un morpion. Deux options s’avère nécessaire : android:columnCount et android:rowCount qui
correspondent au nombre de lignes et de colonnes sur notre grille.

Voici, le résultat recherché :

Gridlayout – tableau
L’exemple de mise en place de GridLayout avec le Morpion

1 <GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
2     xmlns:tools="http://schemas.android.com/tools"
3     android:id="@+id/GridLayout1"
4     android:layout_width="wrap_content"
5     android:layout_height="wrap_content"
6     android:columnCount="3"
7     android:rowCount="3"
8     android:layout_gravity="center"
9     android:orientation="horizontal">
10      
11     <Button
12         android:id="@+id/button1"
13         android:text="X" />
14  
15     <Button
16         android:id="@+id/button2"
17         android:text="O" />
18  
19     <Button
20         android:id="@+id/button3"
21         android:text="X" />
22  
23     <Button
24         android:id="@+id/button4"
25         android:text="X" />
26      
27     <Button
28         android:id="@+id/button5"
29         android:text="O" />
30      
31     <Button
32         android:id="@+id/button6"
33         android:text="X" />
34      
35     <Button
36         android:id="@+id/button7"
37         android:text="X" />
38      
39     <Button
40         android:id="@+id/button8"
41         android:text="O" />
42      
43     <Button
44         android:id="@+id/button9"
45         android:text="O" />
46      
47 </GridLayout>

Voilà j’espère que mon article vous aura permis d’avoir de quoi bien démarrer avec les layouts d’android.

Android Java layout linearlayout relativelayout

Articles similaires

01/10/2020 01/09/2020

Android : Une bonne douzaine de Android : Apprenez à être efficace

snippet de code grâce à ADB

 01/08/2020 01/07/2020

Android : Mettre à jour ses vieux Android : Vérifier l’initialisation de sa

smartphones avec Lineage OS librairie grâce à la stacktrace