18 - Layout (LinearLayout)

Android organiza las componentes visuales (Button, EditText, TextView etc.) en pantalla mediante contenedores llamados Layout.

Hasta ahora no nos ha preocupada como organizar una pantalla, sino nos hemos centrado en la funcionalidad de cada programa que implementamos.

Ahora comenzaremos a preocuparnos como organizar y disponer las componentes dentro de la pantalla.

- LinearLayout.

LinearLayout es uno de los diseños más simples y es bastante empleado. Simplemente establece los componentes visuales uno junto al otro, ya sea horizontal o verticalmente.

Creemos un proyecto llamado Proyecto020, borremos el TextView que agrega por defecto el Android Studio.

De la "Palette" de componentes de Android Studio arrastraremos de la pestaña "Layouts" el objeto de la clase "Linear Layout (Vertical)":

Ahora podemos ver que sucede cuando disponemos cinco botones dentro del contenedor LinearLayout (Todos los botones se disponen obligatoriamente uno debajo del otro y no hay posibilidad de ubicarlos con el mouse):

El primer cambio que podemos hacer a esta tipo de Layout es cambiar la propiedad "orientation" por el valor horizontal (esto hace que los botones se dispongan uno al lado del otro y no hay posibilidad de disponer controles uno debajo de otro)

Hay que tener en cuenta que si los controles no entran en pantalla los mismos no se ven y si son botones como en este caso es imposible hacer clic sobre los mismos.

También debemos seleccionar cada Button y cambiar la propiedad layout_width por el valor "wrap_content" para que cada botón no ocupe todo el ancho del dispositivo.

Luego podemos ver que inclusive si hay muchos botones no todos se ven:

Tengamos en cuenta que en la "Palette" de Android Studio aparecen dos opciones para disponer "Linear Layout(Horizontal)" o "Linear Layout(Vertical)" la única diferencia es que se carga en la propiedad "orientation" el valor: horizontal o vertical.

Cambiando el ConstraintLayout de la raíz de la aplicación.

Si no necesitamos que la raíz de la interfaz defina un ConstraintLayout podemos disponer en su lugar por ejemplo un LinearLayout. Presionamos el botón derecho del mouse en la ventana "Component Tree" y seleccionamos la opción "Convert view":

Ahora seleccionamos la opción "Linear Layout":

Ahora podemos disponer los botones en la interfaz y aparecerán uno debajo del otro similar a como empezamos pero será mas eficiente ya que no hay un ConstraintLayout en la raíz de la interfaz:

Este proyecto lo puede descargar en un zip desde este enlace: proyecto020.zip