Cómo crear un diseño lineal

Prueba hacerlo con Compose

Jetpack Compose es el kit de herramientas de IU recomendado para Android. Obtén información sobre cómo a trabajar con diseños en Compose.

Columna o fila →

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

Nota: Para un mejor rendimiento y asistencia con las herramientas, crea tu diseño con ConstraintLayout. Para obtener más información sobre las ventajas de usar ConstraintLayout leyendo Cómo comprender los beneficios de rendimiento de ConstraintLayout.

Figura 1. Un LinearLayout con tres elementos secundarios orientados horizontalmente

Todos los elementos secundarios de un LinearLayout se apilan uno detrás de otro, por lo cual una lista vertical solo tendrá un elemento secundario por fila, independientemente del ancho que tengan. Una lista horizontal solo tendrá la altura de una fila, 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 (alineación a la derecha, centrada o a la izquierda) de cada elemento secundario.

Volumen del diseño

LinearLayout también es compatible con la asignación de un peso a elementos secundarios individuales con el android:layout_weight atributo. Este atributo asigna un valor de "importancia" a una vista en términos de la cantidad de espacio que ocupa en la pantalla. Un peso más grande posibilita la expansión a los efectos de llenar el espacio restante en la vista superior. Las vistas secundarias pueden especificar un valor de peso y, luego, todo espacio restante en el grupo de vistas se asigna a los elementos secundarios según la proporción de su peso declarado. El peso predeterminado es cero.

Distribución equitativa

Para crear un diseño lineal en el que cada campo secundario use la misma cantidad de espacio en la pantalla, define 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, define 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 utilicen 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, solo ocupará el área que requiera su contenido. Los otros dos campos de texto, con el valor de peso de 1, se expandirán de manera equitativa para llenar el espacio restante después de que se midan los contenidos de los tres campos.
• Si, en cambio, 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 restante después de que se midan los contenidos de los tres campos se asignará de la siguiente manera: la mitad al campo con el valor de peso de 2 y la mitad dividida en partes iguales entre los campos con el valor de peso de 1.

En la siguiente figura y 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.

Figura 2. Tres campos de texto y un botón en un orientado verticalmenteLinearLayout.

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

Para obtener información sobre los atributos disponibles para cada vista secundaria de un LinearLayout, consulta LinearLayout.LayoutParams.