gridlayout - tablelayout android ejemplo

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

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>

El aspecto que tiene está a la izquierda y el aspecto que quiero que tenga a la derecha.

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

Si al primer elemento de un diseño lineal se le indica que se llene con paterno, hace exactamente eso, sin dejar espacio para otros elementos, ¿cómo puedo obtener un elemento que sea 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:

Disposiciones relativas fueron de hecho 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>

Answer 1

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

Y configura la app:layout_constraintBottom_toBottomOf="parent" para que 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 el diseño de su 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. Use LinearLayout en su diseño de raíz ( android:orientation="vertical" )

(1) Establezca un android:layout_weight="1" 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) Establezca el LinearLayout secundario para android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom"

El atributo principal es ndroid:gravity="bottom" , 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 permitir que 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

Answer 2

Creando tanto HEADER como FOOTER, aquí hay un ejemplo

[XML de diseño]

<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 de ayuda. ¡¡Gracias!!

Answer 3

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

Si sus vistas en la parte inferior no se muestran en un diseño relativo, entonces tal vez el diseño de arriba tome todo el espacio. En este caso, puede colocar la vista que debería 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 llenar todo el resto de la pantalla.

Answer 4

En caso de tener una jerarquía como esta:

<ScrollView>
|-- <RelativeLayout>
|-- <LinearLayout>

Primero, aplique android:fillViewport="true" al ScrollView y luego aplique android:layout_alignParentBottom="true" al LinearLayout .

Esto funcionó perfectamente para mí.

<ScrollView
android:layout_height="match_parent"
android:layout_width="match_parent"
android:scrollbars="none"
android:fillViewport="true">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center"
android:id="@+id/linearLayoutHorizontal"
android:layout_alignParentBottom="true">
</LinearLayout>
</RelativeLayout>
</ScrollView>

Answer 5

En un ScrollView esto no funciona, ya que RelativeLayout se superpondría con lo que haya en el ScrollView en la parte inferior de la página.

Lo arreglé usando un FrameLayout dinámicamente extendido:

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

Answer 6

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>

Answer 7

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

Answer 8

La respuesta anterior (por Janusz) es bastante correcta, pero personalmente no me siento cómodo al 100% con RelativeLayouts, así que prefiero introducir un ''relleno'', TextView vacío, como este:

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

antes del elemento que debe estar en la parte inferior de la pantalla.

Answer 9

Ni siquiera es necesario anidar el segundo diseño relative dentro del primero. Simplemente use el android:layout_alignParentBottom="true" en el botón y el texto de edición .

Answer 10

Para un caso como este siempre use RelativeLayouts. Un LinearLayout no está diseñado para tal uso.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/db1_root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- Place your layout here -->
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_gravity="bottom"
android:orientation="horizontal"
android:paddingLeft="20dp"
android:paddingRight="20dp" >
<Button
android:id="@+id/setup_macroSavebtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Save" />
<Button
android:id="@+id/setup_macroCancelbtn"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Cancel" />
</LinearLayout>
</RelativeLayout>

Answer 11

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>

Answer 12

Si no desea realizar muchos cambios, puede simplemente poner:

android:layout_weight="1"

para el TextView que tiene ID como @+id/TextView ie

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

Answer 13

Siguiendo con la elegante solución de Timores, he descubierto 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" />

Answer 14

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

Esto forzará a todos los demás elementos debajo de él hacia abajo

Answer 15

También puedes hacer esto con un LinearLayout o un ScrollView. A veces es más fácil implementar 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, llena el espacio vacío y empuja las siguientes vistas a la parte inferior de la pantalla.

Answer 16

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

Esto definitivamente ayudará.

Answer 17

Utilicé la solución publicada por Janusz, pero agregué el relleno a la última Vista ya que la parte superior de mi diseño era un ScrollView. El ScrollView estará parcialmente oculto a medida que crece con el contenido. Usar android: paddingBottom en la última vista ayuda a mostrar todo el contenido en ScrollView.

Answer 18

use el botón de alineación del código a continuación para reducir su funcionamiento

 <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<Button
android:id="@+id/btn_back"
android:layout_width="100dp"
android:layout_height="80dp"
android:text="Back" />
<TextView
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="0.97"
android:gravity="center"
android:text="Payment Page" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit"/>
</LinearLayout>
</LinearLayout>