Android / Layouts

Bienvenidos sean a este post, hoy hablaremos sobre layouts. Como dijimos en este post, los layouts suelen ser un conjunto de vistas y como vimos en el post anterior, el layout puede ser de varias formas por esto en este post vamos a ver cada una de las posibilidades de como hacer la distribucion de los elementos de una vista.

Las distribuciones de layouts disponibles en Android son las siguientes:

• LinearLayout
• TableLayout
• RelativeLayout
• AbsoluteLayout
• FrameLayout

Ahora, pasaremos a ver cada uno de ellos por medio del siguiente ejemplo. Vamos a crear una nueva app, abrimos nuestro Android Studio y usaremos nuevo proyecto con los siguientes datos:

• Dispositivos: Phone and Tablet
• Actividad: Empty Activity
• Nombre: Layout
• Nombre de paquete: org.example.layout
• API Minimo: API 14 (Android 4.0)

Si tienen alguna duda les recomiendo este post donde explico el paso a paso como completarlo pero una vez generado nuestro proyecto procederemos a ver los distintos tipos de layouts o por lo menos los mas utilizados.

RelativeLayout

Una vez dentro debemos ir hasta el archivo activity_main.xml, el cual se encuentra en res/layout/activity_main.xml como se ve en la siguiente imagen

Como vimos en el post anterior, elegimos la solapa Design, vamos a Component Tree y hacemos click con el boton derecho sobre el layout actual y elegimos Convert view

Una vez realizado esto, nos aparecera el siguiente cuadro donde elegiremos RelativeLayout y pulsamos el boton Apply

Una vez hecho esto pueden borrar el unico componente existente , por medio del boton derecho y la opcion delete o directamente presionando la tecla Supr despues de realizado debera quedar de esta manera

Ahora procederemos a agregar nuestros cuatro items, el primero va a ser un progressBar

Luego agrearemos un checkBox

Ahora agregaremos un Button

y por ultimo, agregaremos un TextView, perdon pero si es el mismo elemento que borramos al principio

Una vez agregado estos cuatro elementos, podemos salvar nuestro proyecto y si lo probamos en un equipo virtual nos aparecera de la siguiente forma

Esto es debido a que todavia no configuramos el layout, ahora pasemos a la solapa Text y veamos el codigo en XML de nuestro archivo:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="CheckBox" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
</RelativeLayout>

Ahora vamos a agregar las siguientes lineas:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" >

    <ProgressBar
        android:id="@+id/progressBar"
        style="?android:attr/progressBarStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/progressBar"
        android:text="Solo para chequear" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/checkBox"
        android:text="Un botoncito cualquiera" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Un texto cualquiera" />
</RelativeLayout>

Analicemos el codigo fuente, en el caso del item progressBar, agregamos la siguiente linea:

android:layout_alignParentTop="true"

Con esta propiedad le decimos a Android que este item va a estar arriba de todo en la pantalla y por ende va a ser el primero, ahora pasemos al item CheckBox donde agregamos esta linea:

android:layout_below="@id/progressBar"

Esto le indica a Android que este item debe estar por debajo de progressBar, lo mismo ocurre con el item button, es la misma linea solamente que le decimos que este debajo del checkBox: 

android:layout_below="@id/checkBox"

En ambos casos yo modifique el texto a mostrar, pueden hacerlo o no porque esto no cambia el funcionamiento del mismo, y por ultimo al ultimo item le agregamos esta linea:

android:layout_alignParentBottom="true"

La cual indica que este item debe ir al final de la vista, cuando hayan terminado todas las modificaciones, si lo prueban pasaran a tener una app de esta forma

Ahora si que quedo mucho mejor con respecto a la primera visualizacion. Ahora de modo de ejemplo, cambiemos las siguientes lineas:

En checkBox, la linea:

android:layout_below=»@id/progressBar»

Modifiquenla por esta otra:

android:layout_below=»@id/button«

Y en Button, vamos a esta linea:

android:layout_below=»@id/checkBox»

Y la modificamos por esta:

android:layout_below=»@id/progressBar«

Salvamos, y volvemos a ejecutar nuestra app veremos la siguiente modificacion

Esto quiere decir, no importa el orden como fueron ingresados sino va a depender siempre del tipo de alineacion utilizado, top para arriba, bottom para abajo y below para ubicarlo despues del item informado, es decir se va a disponer de los items en relacion a un parent (padre) u otros ahora procedamos al siguiente layout

LinearLayout

Aca volvemos a hacer como en el caso anterior, en Component Tree hacemos click con el boton derecho sobre el layout (Relative Layout) y elegimos Convert view donde aparecera el siguiente cuadro

Una vez seleccionado LinearLayout, pulsamos Apply y nos convertira el layout actual al nuevo seleccionado, veamos el nuevo codigo XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/button"
        android:text="Solo para chequear" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/progressBar"
        android:text="Un botoncito cualquiera" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Un texto cualquiera" />
</LinearLayout>

Si nosotros volvieramos a ejecutar nuestra app, obtendremos este resultado

Esta alineacion es debido a que este tipo de Layout tiene dos formas de trabajar, una es horizontal y otra vertical. Si nosotros no le informamos el tipo de orientacion tomara por defecto que es de tipo horizontal, para modificar esto debemos agregar una linea para informar esto.

Del codigo anterior debemos modificar solo esta parte:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

Solamente en donde definimos el tipo de layout agregaremos la siguiente linea:

android:orientation="vertical"

Con esta linea le informamos a Android el tipo de orientacion y si volvemos a ejecutar nuestra app quedara de la siguiente forma

Como pueden ver quedo mejor ordenado y como los coloca automaticamente a medida que se agregan nuevos items, este es uno de los layouts mas utilizados ahora pasaremos al siguiente

TableLayout

Este layout a diferencia de las vistas anteriormente, permite generar un formato de tipo tabla, luego hablaremos sobre como trabaja, para utilizarla no se debe usar el Convert view sino que lo agregaremos como un item mas

Presionen Enter para agregarlo y debera quedar de esta forma

Ahora simplemente hacemos un Drag ‘N’ Drop de los elementos, es decir seleccionan al progressBar y sin soltar el boton izquierdo arrastran el item dentro del primer TableRow y debe quedar como la siguiente imagen

Lo mismo deben hacer con el resto pero vamos a hacer esto, junto al progressBar deben arrastrar el checkBox para dejarlo en el mismo TableRow y en el siguiente TableRow deben arrastrar el button y el textView para quedar como la siguiente imagen

Si lo hacen de la misma forma cuando prueben la app debera quedar de la siguiente manera

Veamos el nuevo codigo creado en activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <ProgressBar
                android:id="@+id/progressBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true" />

            <CheckBox
                android:id="@+id/checkBox"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/button"
                android:text="Solo para chequear" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <Button
                android:id="@+id/button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/progressBar"
                android:text="Un botoncito cualquiera" />

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:text="Un texto cualquiera" />
        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

        </TableRow>
    </TableLayout>
</LinearLayout>

Como pueden ver automaticamente genero los tags TableRow y nosotros al moverlos en el diseñador los acomodo automaticamente, y en conclusion si ven como queda en la app, cuando utilizamos este layout genera las filas (rows) y los componentes los ordena en tipo columna, mientras mas acumulemos en una fila se haran mas celdas y columnas y en caso de necesitar mas contenedores se agregan mas tags TableRow para los nuevos items, ahora pasemos al siguiente layout.

FrameLayout

Para volver a hablar sobre este tipo de layout, primero debemos sacar todos los items dentro del TableLayout, se hace de la misma forma como los agregamos, seleccionandolos y arrastrandolos afuera

Ahora debemos eliminar este layout, puede ser de dos formas, una presionando Supr o haciendo click con e boton derecho y elegimos Delete

Una vez eliminado, hacemos click con el boton derecho y elegimos la opcion Convert view

Una vez seleccionado debera aparecer el siguiente cuadro, donde elegiremos FrameLayout

Una vez seleccionado, presionen el boton Apply y quedara finalmente de esta manera

Ahora si nosotros cambiamos de solapa y elegimos Text veremos el siguiente codigo XML:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Solo para chequear" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Un botoncito cualquiera" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Un texto cualquiera" />

</FrameLayout>

Analicemos el codigo fuente, como pueden ver es simplemente un organizador de los elementos tal como vimos en el primer caso pero ahora veremos lo interesante de este tipo de layout a traves de la siguiente modificacion del codigo fuente pero antes veamos como se ve este layout

Ahora si modificamos el codigo de la siguiente manera:

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ProgressBar
        android:id="@+id/progressBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Solo para chequear" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:text="Un botoncito cualquiera" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:visibility="invisible"
        android:text="Un texto cualquiera" />

</FrameLayout>

En este codigo vamos a agregar la siguiente linea:

android:visibility="invisible"

Esta linea se encarga de hacer invisible al item donde es agregado, por ejemplo nosotros lo agregamos tanto en TextView como en Button, si volvemos a ejecutar nuestra app con este modificacion nos quedara de la siguiente forma

Como pueden ver «desaparecieron» dos elementos de nuestra vista pero no fueron eliminados simplemente se volvieron invisibles.
Este tipo de layout esta pensado justamente para los tipos de vistas donde debemos ver unos elementos pero por medio de la interaccion del usuario debemos tener los otros items cerca para poder acceder a ellos.

AbsoluteLayout

Este tipo de layout permite indicar las coordenadas X e Y para poder ubicar nuestros items pero esto es poco recomendable debido a la gran variedad de pantallas en los dispositivos con Android, hoy por hoy este metodo es completamente obsoleto y ya no aparece como opcion en el Android Studio asi que simplemente lo comento pero no muestro nada al respecto.

Otros tipos de layouts

Ahora hablemos sobre algunos tipos de layouts disponibles en Android:

• ScrollView, permite la visualizacion de elementos en una columna y cuando la cantidad excede la pantalla habilita el desplazamiento vertical
• HorizontalScrollView, igual al enterior pero en fila y cuando excede la pantalla habilita desplazamiento horizontal
• TabHost, este proporciona una lista de ventanas seleccionables por medio de etiquetas, las cuales pueden ser pulsadas para seleccionar la ventana correspondiente
• ListView, este utiliza una lista vertical deslizable de varios elementos, por ejemplo para mostrar una lista de catalogo
• GridView, crea una cuadricula deslizable de varios elementos en filas y columnas, se utiliza para las galerias de imagenes generalmente
• ViewFlipper, crea una lista de elementos para que se visualice uno cada vez, puede ser utilizado por ejemplo para intercambiar elementos cada una X cantidad de tiempo

Ahora hagamos un breve resumen de los primeros layouts vistos:

• RelativeLayout,  dispone los elementos en relacion a otro o al parent (padre) y permite agregar nuevos elementos pegados a estos.
• LinearLayout, dispone los elementos en una fila o en una columna, nosotros el tipo de orientacion, los elementos van uno detras del otro, es el layout mas utilizado
• TableLayout, distribuye los elementos en forma tabular, se agrega dentro de otro layout, y es similar a una tabla, donde los contenedores son filas y los elementos internos generan las celdas (o columnas)
• FrameLayout, se utiliza para layouts donde necesitan cambios dinamicos de los elementos de la vista.
• AbsoluteLayout, posiciona los elementos de forma absoluta, no se utiliza mas por obsoleto y poco practico

En resumen, hoy hemos visto como son algunos de los layouts mas basicos, hemos configurado una nueva app, como se modifica la distribucion de sus elementos dependiendo del layout, como se pueden utilizar dependiendo de nuestras necesidades, y algunos layouts mas tambien utilizados en Android. Espero les haya sido util, sigueme en Twitter, Facebook o Google+ para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.

Tengo un Patreon donde podes acceder de manera exclusiva a material para este blog antes de ser publicado, sigue los pasos del link para saber como.