Pregunta ¿Cómo alinear las vistas en la parte inferior de la pantalla?


Aquí está mi código de diseño;

<?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>

Lo que parece es a la izquierda y lo que quiero que se vea está a la derecha.

Android Layout - Actual (Left) and Desired (Right)

La respuesta obvia es configurar TextView para fill_parent en altura, pero esto no deja espacio para el botón o campo de entrada. Básicamente, el problema es que quiero que el botón de enviar y la entrada de texto tengan una altura fija en la parte inferior y la vista de texto para llenar el resto del espacio, de manera similar en el diseño lineal horizontal. Quiero que el botón de enviar envuelva su contenido y para la entrada de texto para llenar el resto del espacio.

Si se le dice al primer elemento de un Diseño lineal fill_parent, hace exactamente eso, sin dejar espacio para otros elementos, ¿cómo obtengo un elemento que es el primero en un diseño lineal para llenar todo el espacio aparte del mínimo requerido por el resto de los elementos en el diseño?

EDITAR:

Los diseños relativos fueron en verdad la respuesta. ¡Gracias!

    <?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>

582
2018-03-05 13:04


origen


Respuestas:


Creo que deberías probar un Disposición relativa.
Si tienes un diseño relativo que llena toda la pantalla, deberías poder usar android:layout_alignParentBottom para mover el botón a la parte inferior de la pantalla.

Si sus puntos de vista en la parte inferior no se muestran en un diseño relativo, entonces tal vez el diseño de arriba ocupa todo el espacio. En este caso, puede colocar la vista que debe estar en la parte inferior, primero en su archivo de diseño y colocar el resto del diseño sobre las vistas con android:layout_above. Esto permite que la vista inferior ocupe todo el espacio que necesita y el resto del diseño puede ocupar todo el resto de la pantalla.


481
2018-03-05 13:14



en un ScrollView esto no funciona, ya que RelativeLayout luego se superpondrían lo que está en el ScrollView al final de la página.

Lo arreglé usando un estiramiento dinámico FrameLayout :

<ScrollView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_height="match_parent" 
    android:layout_width="match_parent"
    android:fillViewport="true">
    <LinearLayout 
        android:id="@+id/LinearLayout01"
        android:layout_width="match_parent" 
        android:layout_height="match_parent"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="vertical">

                <!-- content goes here -->

                <!-- stretching frame layout, using layout_weight -->
        <FrameLayout
            android:layout_width="match_parent" 
            android:layout_height="0dp"
            android:layout_weight="1">
        </FrameLayout>

                <!-- content fixated to the bottom of the screen -->
        <LinearLayout 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:orientation="horizontal">
                                   <!-- your bottom content -->
        </LinearLayout>
    </LinearLayout>
</ScrollView>

136
2017-11-04 16:50



Puede mantener su diseño lineal inicial anidando el diseño relativo dentro del diseño lineal:

<LinearLayout
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <Button android:text="submit" 
            android:id="@+id/Button" 
            android:layout_width="wrap_content" 
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true">
        </Button>
        <EditText android:id="@+id/EditText" 
            android:layout_width="match_parent" 
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@id/Button"
            android:layout_alignParentBottom="true">
        </EditText>
    </RelativeLayout>
</LinearLayout>

63
2018-04-24 00:53



La respuesta anterior (por Janusz) es bastante correcta, pero personalmente no me siento 100% cómodo con RelativeLayouts, por lo que prefiero presentar un 'relleno', Empty TextView, como este:

<!-- filler -->
<TextView android:layout_height="0dip" 
          android:layout_width="fill_parent"
          android:layout_weight="1" />

antes del elemento que debería estar en la parte inferior de la pantalla.


37
2018-04-17 15:39



También puedes hacer esto con LinearLayout o ScrollView. Algunas veces es más fácil de implementar que un RelativeLayout. Lo único que debe hacer es agregar la siguiente vista antes de las Vistas que desea alinear en la parte inferior de la pantalla:

<View
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1" />

Esto crea una vista vacía, llenando el espacio vacío y empujando las siguientes vistas hacia la parte inferior de la pantalla.


27
2018-03-10 00:30



Esto también funciona

<LinearLayout 
    android:id="@+id/linearLayout4"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_below="@+id/linearLayout3"
    android:layout_centerHorizontal="true"
    android:orientation="horizontal" 
    android:gravity="bottom"
    android:layout_alignParentBottom="true"
    android:layout_marginTop="20dp"
>

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" 

    />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" 


    />

</LinearLayout>

gravity="bottom" to float LinearLayout elements to bottom


26
2017-12-28 14:03



Siguiendo con la elegante solución de Timores, descubrí que lo siguiente crea un relleno vertical en un LinearLayout vertical y un relleno horizontal en un LinearLayout horizontal:

<Space
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1" />

16
2017-11-15 21:51



Ni siquiera necesitas anidar el segundo relative diseño dentro del primero. Simplemente usa el android:layout_alignParentBottom="true" en el Botón y Editar texto.


14
2018-03-05 15:05



Si no desea hacer muchos cambios, simplemente podría poner:

android:layout_weight="1"

para el TextView que tiene ID como @+id/TextViewes decir

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

9
2017-09-23 12:16



Creando HEADER y FOOTER, aquí hay un ejemplo

[Diseño XML]

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/backgroundcolor"
    tools:context=".MainActivity">

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:background="#FF0000">
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="40dp"
        android:layout_alignParentBottom="true"
        android:background="#FFFF00">
    </RelativeLayout>

</RelativeLayout>

[ Captura de pantalla ]

enter image description here

Espero que esto sea útil. ¡¡Gracias!!


6
2018-05-10 02:25



1.Utilizar ConstraintLayout en su diseño raíz

Y establecer app:layout_constraintBottom_toBottomOf="parent" para dejar el diseño en la parte inferior de la pantalla

<LinearLayout
    android:id="@+id/LinearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent">
</LinearLayout>

2.Utilizar FrameLayout en su diseño raíz

Solo establece android:layout_gravity="bottom" en tu diseño

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

3.Utilizar LinearLayout en su diseño de raíz (android:orientation="vertical")

(1) Establecer un diseño android:layout_weight="1" en la parte superior de su diseño

<TextView
    android:id="@+id/TextView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    android:text="welcome" />

(2) Configure al niño LinearLayout para android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom"

El atributo principal es ndroid:gravity="bottom" , deja que el niño vea en la parte inferior de Layout.

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

4.Utilizar RelativeLayout en el diseño raíz

Y establecer android:layout_alignParentBottom="true" para dejar el diseño en la parte inferior de la pantalla

<LinearLayout
    android:id="@+id/LinearLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:orientation="horizontal">
</LinearLayout>

SALIDA

enter image description here


5
2017-10-16 15:17