Cómo crear un diseño lineal

Prueba el estilo de Compose
Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información para trabajar con diseños en Compose.

LinearLayout es un grupo de vistas que alinea a todos los elementos secundarios en una sola dirección, de manera horizontal o vertical. Puedes especificar la dirección del diseño con el atributo android:orientation.

Una imagen que muestra un diseño dividido en tres porciones verticales
Figura 1: Un objeto LinearLayout con tres elementos secundarios orientados horizontalmente

Todos los elementos secundarios de un LinearLayout se apilan uno tras otro, por lo que una lista vertical solo tiene un elemento secundario por fila, sin importar el ancho que tengan. Una lista horizontal tiene solo una fila más alta y es la altura del elemento secundario más alto, más el padding. Un LinearLayout respeta los márgenes entre los elementos secundarios y la gravedad (a la derecha, central o izquierda) de cada elemento secundario.

Peso del diseño

LinearLayout también admite la asignación de un peso a elementos secundarios individuales con el atributo android:layout_weight. Este atributo asigna un valor de "importancia" a una vista en términos de la cantidad de espacio que ocupa en la pantalla. Un valor de grosor más grande le permite expandirse para llenar el espacio restante en la vista superior. Las vistas secundarias pueden especificar un valor de ponderación, y cualquier espacio restante en el grupo de vistas se asigna a los elementos secundarios proporcionalmente, según la ponderación declarada. El peso predeterminado es cero.

Distribución equitativa

Para crear un diseño lineal en el que cada elemento secundario use la misma cantidad de espacio en la pantalla, establece el android:layout_height de cada vista en "0dp" para un diseño vertical, o el android:layout_width de cada vista en "0dp" para un diseño horizontal. Luego, establece el android:layout_weight de cada vista en "1".

Distribución no equitativa

También puedes crear diseños lineales en los que los elementos secundarios usen diferentes cantidades de espacio en la pantalla. Considera los siguientes ejemplos:

  • Supongamos que tienes tres campos de texto: dos con un valor de peso de 1 y un tercero con el valor de peso predeterminado de 0. El tercer campo de texto, con el valor de peso de 0, ocupa solo el área que requiere su contenido. Los otros dos campos de texto, con un valor de ponderación de 1, se expanden de manera equitativa para llenar el espacio que queda después de que se mide el contenido de los tres campos.
  • En cambio, si tienes tres campos de texto en los que dos tienen un valor de peso de 1 y el tercero tiene un peso de 2, el espacio que queda después de que se mide el contenido de los tres campos se asigna de la siguiente manera: la mitad al campo con el valor de peso de 2 y la mitad se divide de forma equitativa entre los campos con el valor de peso de 1.

En la siguiente figura y el fragmento de código, se muestra cómo podrían funcionar los pesos de diseño en una actividad de "enviar mensaje". El campo Para, la línea Asunto y el botón Enviar solo ocupan la altura que necesitan. El área del mensaje ocupa el resto de la altura de la actividad.

Imagen que muestra tres EditTexts y un Button en un LinearLayout vertical
Figura 2: Tres campos de texto y un botón en una LinearLayout orientada verticalmente.
<?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:paddingLeft="16dp"
    android:paddingRight="16dp"
    android:orientation="vertical" >
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/to" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="@string/subject" />
    <EditText
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:gravity="top"
        android:hint="@string/message" />
    <Button
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:text="@string/send" />
</LinearLayout>

Si deseas obtener detalles sobre los atributos disponibles para cada vista secundaria de un LinearLayout, consulta LinearLayout.LayoutParams.