BeginnerLayoutTous les articles

Placez vos éléments où vous le souhaitez avec le RelativeLayout

Salut c’est Sébastien ! Aujourd’hui seconde vidéo sur les layouts et on va parler du RelativeLayout. Le RelativeLayout est un layout puissant. Il permet de placer des éléments à l’intérieur d’un conteneur, mais également de placer des éléments par rapport à d’autres éléments qui sont déjà dans le conteneur. C’est ce que nous allons voir tout de suite, c’est parti !

 

Création du RelativeLayout

Vous allez créer votre RelativeLayout. Pour cela vous allez dans ressources->layout, vous faites un clic-droit sur layout->New->Layout XML File. On va l’appeler « layout_relativelayout », mais vous pouvez donner le nom que vous voulez. Pour le nœud principal (Root Tag) ça ne sera pas un LinearLayout mais un RelativeLayout. Vous faites finish.

 

Création des widgets

Nous voilà dans notre RelativeLayout, on va tout de suite placer un bouton. En largeur et en hauteur on va mettre « wrap_content ». On va rajouter du texte (avec l’attribut android:text) et on va mettre « bouton 1 ». On va lui donner un ID. Alors si vous vous souvenez pour créer un ID, c’est « @+id ». Ici Android Studio nous le propose et on va lui donner comme ID bouton1.

<Button
        android:id="@+id/bouton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 1"
        />

Par défaut les éléments dans un RelativeLayout sont placées à la base du parent. Ici le parent c’est le RelativeLayout et il prend tout l’écran. Donc le RelativeLayout commence en haut à gauche et finit en bas à droite. Ainsi, par défaut le widget se met en haut à gauche.

Aligner un widget avec la droite de son parent : layout_alignParentRight

Pour aligner le widget sur la droite du RelativeLayout, vous ajoutez l’attribut android:layout_alignParentRight et on va mettre comme valeur « true ».

<Button
        android:id="@+id/bouton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 1"
        android:layout_alignParentRight="true"
        />

Notre widget s’est bien placé sur la droite. Il s’est aligné en fait avec la droite de son parent. Donc le bord droit du widget est aligné avec le bord droit du parent, c’est-à-dire le RelativeLayout, ce qui correspond à la droite de l’écran.

Aligner un widget avec le bas de son parent : android:layout_alignParentBottom

On peut également aligner le bouton avec le bas de l’écran. Pour cela vous faites android:layout_alignParentBottom et vous mettez comme valeur « true ». Comme on est aligné à la fois avec la droite du parent et le bas du parent, notre bouton s’est retrouvé en bas à droite.

Centrer un widget dans son parent : android:layout_centerInParent

On va centrer le bouton dans le parent. Pour cela vous faites android:layout_centerInParent et vous mettez « true » comme valeur. Cela va permettre de centrer le widget à l’intérieur du parent.

 

Placer des widgets par rapport à d’autres widgets

Nous allons créer quatre autres boutons. Pensez bien à changer les ID pour chaque bouton. Un ID doit être unique.

Une fois que vous avez créez vos 5 boutons avec des ID différents et que vous avez mis à jour les textes à l’intérieur des boutons, vous êtes prêt pour la suite. On a le bouton 1 au centre (si vous avez gardé l’attribut android:layout_centerInParent à « true » pour tous les boutons). En fait le bouton 5 s’est mit par-dessus. Tous les boutons sont les uns par-dessus les autres parce qu’ils sont tous au centre du RelativeLayout. Ce qu’on va faire c’est qu’on va garder le bouton 1 au centre et qu’on va mettre les quatre autres boutons tout autour du bouton 1.

Placement du bouton 2

On va placer le bouton 2 au-dessus du bouton. Pour cela vous allez faire android:layout_above.

Si par hasard en écrivant le nom de l’attribut, vous avez fait une faute d’orthographe, que vous l’effacée et qu’Android studio ne vous propose plus l’auto-complétion (ce qui peut être assez embêtant vu les noms compliqués que certains attributs ont), vous pouvez faire ctrl+espace et ça va faire réapparaître l’auto-complétion.

Donc ici comme on veux placer le bouton 2 au-dessus du bouton 1, on va choisir l’attribut layout_above qui veut dire que le widget va se placer « au dessus de », mais au dessus de quoi ? Au dessus du bouton 1. Comment on va lui dire « au dessus du bouton 1 » ? Vous allez mettre comme valeur à l’attribut « @id/bouton ».

On fera attention : quand on déclare un ID c’est « @+id ». Le « + » signifie que l’on crée l’ID. Alors que quand on fait référence à un ID, c’est simplement « @id« .

Là le bouton 2 s’est placé au-dessus du bouton 1. Mais ce qu’on veut c’est être exactement au-dessus. Pour cela on va également centrer le bouton dans le parent. Donc « layout_centerInParent » on le met à « true ». Ce qui nous donne le code suivant :

<Button
        android:id="@+id/bouton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 2"
        android:layout_above="@id/bouton1"
        android:layout_centerInParent="true"
        />

et qui nous donne comme écran (n’oubliez pas que le bouton 1 se situe en dessous du bouton 5) :

Placement du bouton 3

Maintenant on va placer le bouton 3 en dessous du bouton 1. Pour cela vous allez chercher non plus l’attribut « android:layout_above » mais l’attribut « android:layout_below » qui veut dire « se placer en dessous de ». Se placer en dessous de quoi ? Se placer en dessous du bouton 1 (« @id/bouton1 »).

Pour centrer le widget en dessous du bouton 1, on va dire qu’on va aligner le bord gauche du bouton 3 avec le bord gauche du bouton 1. Vous allez aller chercher l’attribut « android:layout_alignLeft ». Donc on aligne le bord gauche du bouton 3 par rapport au bord gauche du bouton 1. Vous mettez alors « @id/bouton1 » comme valeur pour l’attribut. Et là le bord gauche du bouton 1 est aligné avec le bord gauche du bouton 3. Là le bouton 1 est en dessous du bouton 5, mais on voit bien que les deux bords gauches des boutons sont alignés (voir ci-dessous).

Ainsi, le bouton 3 est centré avec le bouton 1 horizontalement et se trouve juste en dessous.

Exercice : placement des boutons 4 et 5

Ce qu’on va faire c’est qu’on va placer le bouton 4 à gauche du bouton 1 et qu’on va placer le bouton 5 a droite du bouton 1. Si vous avez Android studio d’ouvert vous pouvez essayer de faire l’exercice.

Essayez de faire l’exercice avant le lire la suite

Pour placer le bouton 4 à gauche du bouton 1, vous allez faire « android:layout_toLeftOf ». A la gauche de quoi ? A la gauche du bouton 1 (« @id/bouton1 »). Pour qu’il soit centrer verticalement dans le RelativeLayout vous faites android:layout_centerVertical on va le mettez à « true ».

Pour placer le bouton 5 à droite du bouton 1, on va ajouter l’attribut « android:layout_toRightOf » avec comme valeur « @id/bouton1 ». Et si vous avez laissé l’attribut  android:layout_centerInParent à « true », il s’est tout de suite placé à droite du bouton 1 en étant centré verticalement.

Voici le code complet du XML :

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

    <Button
        android:id="@+id/bouton1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 1"
        android:layout_centerInParent="true"
        />

    <Button
        android:id="@+id/bouton2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 2"
        android:layout_above="@id/bouton1"
        android:layout_centerInParent="true"
        />

    <Button
        android:id="@+id/bouton3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 3"
        android:layout_below="@id/bouton1"
        android:layout_alignLeft="@id/bouton1"
        />

    <Button
        android:id="@+id/bouton4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 4"
        android:layout_toLeftOf="@id/bouton1"
        android:layout_centerVertical="true"
        />

    <Button
        android:id="@+id/bouton5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Bouton 5"
        android:layout_centerInParent="true"
        android:layout_toRightOf="@id/bouton1"
        />

</RelativeLayout>

et le résultat attendu :

J’espère que cette vidéo / cet article vous a plu. Que vous avez vu les bases du RelativeLayout. Que vous avez compris que c’est un layout puissant, qu’on peut faire pas mal de choses avec. Je vous dis à la prochaine, Salut !

Laisser un commentaire

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