Comment aligner les vues en bas de l'écran ?

Voici mon code de mise en page ;

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

    <TextView android:text="@string/welcome"
        android:id="@+id/TextView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content">
    </TextView>

    <LinearLayout android:id="@+id/LinearLayout"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="bottom">

            <EditText android:id="@+id/EditText"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content">
            </EditText>

            <Button android:text="@string/label_submit_button"
                android:id="@+id/Button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content">
            </Button>

    </LinearLayout>

</LinearLayout>

Ce à quoi cela ressemble est à gauche et ce à quoi je veux que cela ressemble est à droite.

![Mise en page Android - actuelle (gauche) et souhaitée (droite)][1]

La réponse évidente est de définir le TextView en fill_parent sur la hauteur, mais cela ne laisse pas de place pour le bouton ou le champ de saisie.

Essentiellement, le problème est que je veux que le bouton d'envoi et le champ de saisie aient une hauteur fixe en bas et que la vue texte remplisse le reste de l'espace. De même, dans la mise en page linéaire horizontale, je souhaite que le bouton d'envoi soit enveloppé dans son contenu et que l'entrée de texte occupe le reste de l'espace.

Si l'on demande au premier élément d'une mise en page linéaire de remplir son parent, c'est exactement ce qu'il fait, ne laissant aucune place aux autres éléments. Comment faire en sorte que le premier élément d'une présentation linéaire remplisse tout l'espace, à l'exception du minimum requis par les autres éléments de la présentation ?


Les mises en page relatives sont en effet la réponse :

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

    <TextView
        android:text="@string/welcome"
        android:id="@+id/TextView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">
    </TextView>

    <RelativeLayout
        android:id="@+id/InnerRelativeLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true" >

        <Button
            android:text="@string/label_submit_button"
            android:id="@+id/Button"
            android:layout_alignParentRight="true"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
        </Button>

        <EditText
            android:id="@+id/EditText"
            android:layout_width="fill_parent"
            android:layout_toLeftOf="@id/Button"
            android:layout_height="wrap_content">
        </EditText>

    </RelativeLayout>

</RelativeLayout>

[1] : https://lh4.ggpht.com/_EW60jqE5_B0/S5D_wMGvK7I/AAAAAAAAALs/p5YdtjqMr-E/s800/Android%20Layout.png

Solution

La façon moderne de procéder consiste à avoir un [ConstraintLayout][1] et à contraindre le bas de la vue au bas du ConstraintLayout avec app:layout_constraintBottom_toBottomOf="parent".

L'exemple ci-dessous crée un FloatingActionButton qui sera aligné sur la fin et le bas de l'écran.





Pour référence, je vais garder mon ancienne réponse.

Avant l'introduction de ConstraintLayout, la réponse était une [disposition relative][2].


Si vous avez une disposition relative qui remplit tout l'écran, vous devriez pouvoir utiliser [android:layout_alignParentBottom][3] pour déplacer le bouton vers le bas de l'écran.

Si vos vues en bas de l'écran ne sont pas affichées dans une disposition relative, alors peut-être que la disposition au-dessus d'elle prend tout l'espace. Dans ce cas, vous pouvez placer la vue, qui devrait être en bas, en premier dans votre fichier de disposition et positionner le reste de la disposition au-dessus des vues avec android:layout_above. Cela permet à la vue du bas de prendre tout l'espace dont elle a besoin, et le reste du layout peut remplir tout le reste de l'écran.

[1] : https://developer.android.com/reference/android/support/constraint/ConstraintLayout [2] : http://developer.android.com/guide/topics/ui/layout/relative.html [3] : http://developer.android.com/reference/android/widget/RelativeLayout.LayoutParams.html#attr_android:layout_alignParentBottom

Commentaires (6)

Dans un ScrollView, cela ne fonctionne pas, car le RelativeLayout chevaucherait alors ce qui se trouve dans le ScrollView en bas de la page.

J'ai résolu ce problème en utilisant un FrameLayout qui s'étire dynamiquement :















Commentaires (4)

Vous n'avez même pas besoin d'imbriquer le deuxième layout relative dans le premier. Utilisez simplement l'option android:layout_alignParentBottom="true" dans le Bouton et le EditText.

Commentaires (1)