Android : Relative Layout

Relative Layout

RelativeLayout vous permet de spécifier comment les vues enfant sont positionnées les unes par rapport aux autres. La position de chaque vue peut être spécifiée par rapport aux éléments frères ou par rapport au parent.
À l'aide de RelativeLayout, vous pouvez aligner deux éléments par la bordure droite, centré sur l'écran, centré à gauche, etc. 
Par défaut, toutes les vues enfant sont dessinées en haut à gauche de la disposition, vous devez donc définir la position de chaque vue en utilisant les différentes propriétés de disposition disponibles.

Attributes RelativeLayout :

• layout_alignParentTop (true / false) : Cette option permet de préciser si le haut de l’élément doit être aligné avec celui de son conteneur.
• layout_alignParentBottom (true / false) : Si vrai, le bord inférieur de cette vue correspond au bord inférieur du parent.
• layout_alignParentLeft (true / false) : Si vrai, le bord gauche de cette vue correspond au bord gauche du parent.
• layout_alignParentRight (true / false) : Si vrai, le bord droit de cette vue correspond au bord droit du parent.
• layout_centerHorizontal (true / false) : Si vrai, centre cet enfant horizontalement dans son parent.
• layout_centerVertical (true / false) : Si vrai, centre cet enfant verticalement au sein de son parent.
• layout_centerInParent (true / false) : Si vrai, centre cet enfant horizontalement et verticalement au sein de son parent.
• layout_above : Indique que l’élément sera placé au-dessus de celui indiqué par son id.
• layout_below : Indique que l’élément sera placé en dessous de celui indiqué par son id.
• layout_toLeftOf : Indique que l’élément sera placé à gauche de celui indiqué par son id.
• layout_toRightOf : Indique que l’élément sera placé à droite de celui indiqué par son id.
• layout_alignTop : Indique que le haut de notre élément est aligné avec le haut de l’élément indiqué.
• layout_alignBottom : Indique que le bas de notre élément est aligné avec le bas de l’élément indiqué.
• layout_alignLeft : Indique que le côté gauche de notre élément est aligné avec le côté gauche de l’élément indiqué.
• layout_alignRight : Indique que le côté droit de notre élément est aligné avec le côté droit de l’élément indiqué.
• layout_alignBaseLine : Indique que les lignes de base des 2 éléments sont alignées.

Exemple Relative layout:

Les exemples suivants vous guidera à travers des étapes simples pour montrer comment créer votre propre application Android à l'aide de la disposition (Relative Layout). Suivez les étapes suivantes pour créer votre application Android. 

Exemple 1 : Dans le fichier : res/layout/activity_main.xml

Exemple 1: Relative Layout

<?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"
    >
    <EditText android:id="@+id/nomEdit"
        android:hint="Entrez votre nom ici"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true" />

    <EditText android:id="@+id/prenomEdit"
        android:hint="Entrez votre prenom ici"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_below="@id/nomEdit" />

    <Button android:id="@+id/valider"
        android:text="valider"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/prenomEdit"
        android:layout_alignRight="@id/prenomEdit" />

    <Button android:id="@+id/annuler"
        android:text="annuler"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/valider"
        android:layout_alignTop="@id/valider" />

</RelativeLayout>

Exemple 2 : Dans le fichier : res/layout/activity_main.xml

Exemple 2 : Relative layout

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/red"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_centerInParent="true"
        android:background="@android:color/holo_red_dark" />

    <View
        android:id="@+id/blue"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_alignTop="@+id/red"
        android:layout_marginLeft="16dip"
        android:layout_toRightOf="@+id/red"
        android:background="@android:color/holo_blue_dark" />

    <View
        android:id="@+id/green"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_below="@+id/red"
        android:layout_marginLeft="16dip"
        android:layout_marginTop="16dip"
        android:layout_toRightOf="@+id/red"
        android:background="@android:color/holo_green_dark" />

    <View
        android:id="@+id/orange"
        android:layout_width="50dip"
        android:layout_height="50dip"
        android:layout_above="@+id/red"
        android:layout_marginBottom="16dip"
        android:layout_marginLeft="16dip"
        android:layout_toLeftOf="@+id/red"
        android:background="@android:color/holo_orange_dark" />

</RelativeLayout>

Vidéo d'Exemple Linear Layout :