[Android] ¿Cómo alinear las vistas en la parte inferior de la pantalla?


Answers

En ScrollView esto no funciona, ya que RelativeLayout se superpondrá con lo que esté en el ScrollView en la parte inferior de la página.

Lo arreglé usando un FrameLayout extiende dinámicamente:

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

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.

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>



Esto también se puede hacer con un diseño lineal Simplemente proporcione Altura = 0dp y peso = 1 en el diseño anterior y el que desea en la parte inferior solo escriba altura = ajuste el contenido y no pesa nada. Lo que hace es proporcionar contenido de ajuste para el diseño (el que contiene su texto de edición y el botón) y luego el que tiene peso ocupa el resto del diseño. Descubrí esto por accidente.




Solo puede darle a su vista secundaria superior (TextView @ + id / TextView ) un atributo: android:layout_weight="1" .

Esto obligará a todos los demás elementos debajo de él a la parte inferior.




Use android:layout_alignParentBottom="true" en su <RelativeLayout> .

Esto definitivamente ayudará.




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.




Ni siquiera necesita anidar el segundo diseño relative dentro del primero. Simplemente use el android:layout_alignParentBottom="true" en el botón y EditText .




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

Y configure la 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. Utilice FrameLayout en su diseño raíz

Simplemente configure android:layout_gravity="bottom" en su 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. Utilice LinearLayout en su diseño raíz ( android:orientation="vertical" )

(1) Configure 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.Utilice RelativeLayout en el diseño raíz

Y configure 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




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 ]

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




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>






Links