Android/Composició d'un layout

Introducció

Podem entendre un Layout com un contenidor de Views (figura 1), realment la classe Layout és una extensió de la classe ViewGroup. En aquesta pàgina descriurem els diferents tipus de layouts i explicarem alguns dels atributs més importants d'aquests a l'hora de configurar la disposició dels elements a la pantalla.

Layouts

Un Layout és una vista (View) que en pot contenir d'altres, que controla el comportament i la posició de les Views que conté. Els Layouts es poden declarar de dues formes:

Declarar els elements UI en fitxers XML. Android proveeix un vocabulari XML que correspon a les classes i subclasses View.
Crear elements Layout en temps d'execució. Una aplicació pot crear objectes View i ViewGroup (i manipular les seves propietats) a través de la programació Java.^[1]

Linear Layout

Un linear layout organitza cada element dintre d'ell segons el tipus de linear layout que sigui(vertical o horitzontal). Si es un layout vertical organitza els elements en files i un layout horitzontal en columnes. Si la longitud de la columna o fila és superior a la longitud de la pantalla del dispositiu es crea una barra de desplaçament tot i que no vol dir que sigui visible. Per defecte, una linear layout tindrà una orientació horitzontal.

Per especificar quin tipus de Linear Layout es vol utilitzar s'ha d'assignar a la propietat android:orientation l'atribut horizontal o vertical.

 android:orientation="horizontal"
 <!-- o -->
 android:orientation="vertical"

Exemple 1 : Botons en columna

En el següent exemple es mostrarà com queda el posicionament d'uns botons dintre d'un layout vertical (figura 2). Com es pot veure els botons queden un sota l'altre fent que només hi hagi un botó per fila. Si s'hagués modificat les propietats layout:margin i layout:gravity els botons podrien tenir una disposició diferent dins de la seva fila.

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 1 (Botons en columna)
Vegeu també: Android/Layouts predefinits pels adapters

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.damo.aitor.myapplication.MainActivity"
    android:orientation="vertical">

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

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

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

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

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Button5"
        android:id="@+id/button5" />
</LinearLayout>

Exemple 2 : Botons en fila

En el següent exemple es mostrarà com queda el posicionament d'uns botons dintre d'un layout horitzontal (figura 3). Com es pot veure, els botons queden l'un al costat de l'altre en una fila. Si s'hagués modificat les propietats 'layout:margin' i 'layout:gravity' els botons podrien tenir una disposició diferent dins de la seva columna.

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 2 (Botons en fila)
Vegeu també: Android/Layouts predefinits pels adapters

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.damo.aitor.myapplication.MainActivity"
    android:orientation="horizontal">

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

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

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

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

</LinearLayout>

Exemple 3 : Layout niuats

Podem combinar diferents tipus de layouts per obtenir la disposició dels elements desitjada. A continuació veurem un exemple on fem servir una configuració amb diferents LinearLayouts (horitzontals i verticals) (figura 4).

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 3 (Layouts aniuats)
Vegeu també: Android/Layouts predefinits pels adapters

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_blue_bright"
    android:id="@+id/blau">

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

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/background_light"
        android:id="@+id/blanc">

        <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/editText"
            android:inputType="text"
            android:layout_weight="1"
            android:hint="@string/entra_un_valor" />

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@android:color/holo_green_light"
            android:layout_marginLeft="10dp"
            android:id="@+id/verd">

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/afegeix"
                android:id="@+id/button"
                android:layout_marginRight="5dp"
                android:layout_marginLeft="20dp" />

            <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/elimina"
                android:id="@+id/button2"
                android:layout_marginLeft="20dp"
                android:layout_marginRight="5dp" />
        </LinearLayout>
    </LinearLayout>

    <ListView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/listView" />

</LinearLayout>

Relative Layout

És un layout que la seva principal característica és que cada fill podrà basar la seva posició a partir del posicionament dels altres fills o el pare. Aquest layout és una eina bastant poderosa a l'hora de la creació d'interfícies ja que permet l'eliminació dels ViewGroups niuats, això vol dir que en un mateix disseny no caldrà fer diferents combinacions de layouts per posicionar els widgets. Els Relative Layout permeten tenir més simplicitat i netedat en el codi.

Llistat d'atributs

A continuació mostrem dues taules amb els atributs dels Relative Layouts segons si serveixen per posicionar els fills respecte altres fills, i si serveixen per posicionar els fills respecte al layout pare:

Posicionament d'un fill respecte a un altre fill:

XML attributes
android:layout_above	Posiciona el cantó inferior d'aquesta View per sobre de la ID d'àncora de View donada.
android:layout_below	Posiciona el cantó superior d'aquesta View per sota de l'ID d'àncora de View donada.
android:layout_toEndOf	Posiciona el cantó d'inici d'aquesta View cap al final de l'ID d'àncora de View donada.
android:layout_toLeftOf	Posiciona el cantó dret d'aquesta View cap a l'esquerra de l'ID d'àncora de View donada.
android:layout_toRightOf	Posiciona el cantó esquerre d'aquesta View cap a la dreta de l'ID d'àncora de View donada.
android:layout_toStartOf	Posiciona el cantó del final d'aquesta View cap a l'inici de l'ID d'àncora de View donada.
android:layout_alignBaseline	Posiciona la línia base d'aquesta View cap a la línia base de l'ID d'àncora de View donada.
android:layout_alignBottom	Fa encaixar el cantó inferior d'aquesta View amb el cantó inferior de l'ID d'àncora de View donada.
android:layout_alignEnd	Fa encaixar el cantó del final d'aquesta View amb el cantó del final de l'ID d'àncora de View donada.
android:layout_alignLeft	Fa encaixar el cantó esquerre d'aquesta View amb el cantó esquerre de l'ID d'àncora de View donada.
android:layout_alignRight	Fa encaixar el cantó dret d'aquesta View amb el cantó dret de l'ID d'àncora de View donada.
android:layout_alignStart	Fa encaixar el cantó de l'inici d'aquesta View amb el cantó de l'inici de l'ID d'àncora de View donada.
android:layout_alignTop	Fa encaixar el cantó del cim d'aquesta View amb el cantó del cim de l'ID d'àncora de View donada.

Posicionament d'un fill respecte al layout pare:

XML attributes
android:layout_alignParentBottom	Si cert, fa encaixar el cantó inferior d'aquesta View amb el cantó inferior del parent.
android:layout_alignParentEnd	Si cert, fa encaixar el cantó del final d'aquesta View amb el cantó del final del parent.
android:layout_alignParentLeft	Si cert, fa encaixar el cantó esquerre d'aquesta View amb el cantó esquerre del parent.
android:layout_alignParentRight	Si cert, fa encaixar el cantó dret d'aquesta View amb el cantó dret del parent.
android:layout_alignParentStart	Si cert, fa encaixar el cantó d'inici d'aquesta View amb el cantó d'inici del parent.
android:layout_alignParentTop	Si cert, fa encaixar el cantó cim d'aquesta View amb el cantó cim del parent.
android:layout_alignWithParentIfMissing	Si configurat a cert, el parent s'usarà com àncora quan l'àncora no es pugui trobar per a les funcions layout_toLeftOf, layout_toRightOf, etc.

[Llista completa]

Exemple 4 : Usant una relative layout

En el següent exemple es mostrarà el posicionament d'uns widgets dins d'un Relative Layout (figura 5). Com es pot veure s'ha aconseguit fer una disposició dels widgets sense utilitzar cap combinació de Linear Layout, tan sols s'ha utilitzat un Relative Layout. Per aconseguir aquesta disposició dels widgets s'ha fet el següent:

Per fer la disposició del textView s'ha fet ús dels següents atributs: android:layout_alignParentStart i android:layout_alignParentTop.
Tots els checkBoxs han fet ús de l'atribut android:layout_below sobre el textView.
Els checkBox "Opció B" i "opció C" han utilitzat l'atribut android:layout_toRightOf sobre id de l'element que tenen a l'esquerra.
El botó "Ok" ha fet ús dels atributs android:layout_below i android:layout_alignStart sobre l'identificador del checkBox de la "Opcio C", a més a fet ús de l'atribut android:layout_alignParentRight.

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 4 (Usant una relative layout)
Vegeu també: Android/Layouts predefinits pels adapters

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.damo.aitor.myapplication.MainActivity"
    android:orientation="horizontal">

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escull una opció"
        android:id="@+id/textView"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:textSize="30dp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Opció A"
        android:id="@+id/checkBox"
        android:layout_below="@id/textView"
        android:checked="false"
        android:layout_marginTop="20dp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Opció B"
        android:id="@+id/checkBox2"
        android:layout_below="@id/textView"
        android:layout_toRightOf="@id/checkBox"
        android:checked="false"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="20dp" />

    <CheckBox
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Opció C"
        android:id="@+id/checkBox3"
        android:layout_below="@id/textView"
        android:layout_toRightOf="@id/checkBox2"
        android:layout_marginTop="20dp"
        android:checked="false"
        android:layout_marginLeft="20dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="OK"
        android:id="@+id/button"
        android:layout_below="@+id/checkBox3"
        android:layout_alignParentRight="true"
        android:layout_alignStart="@+id/checkBox3"
        android:layout_marginTop="10dp" />

</RelativeLayout>

Altres Layouts

FrameLayout

Aquest no realitza cap distribució sobre els elements que hi ha dins, simplement els apila un sobre l'altre. Si es vol modificar la distribució d'aquests elements és farà ús dels atributs: "android:foregroundGravity" i "android:measureAllChildren".

GridLayout

Un GridLayout és un view que incorpora tots els elements qui hi ha dintre d'aquest en una quadricula. Serveix per evitar anidar Linear Layouts per crear dissenys complexos. Els seus principals atributs són els següents: "android:columnCount", "android:rowCount" i "android:useDefaultMargins".

Disposició dels elements dins d'un Layout

Mida del elements: match_parent i wrap_content

Els valors match_parent i wrap_content es poden utilitzar per especificar les propietats dels atributs layout:height (alçada) i layout:width (amplada) d'una view. Amb aquest dos atributs definim l'espai que ocupa una view filla en el pare.

match_parent

Fixant el valor a match_parent forcem la view a expandir-se i agafar el màxim d'espai possible, és a dir tot l'espai lliure del layout pare.

android:layout_width="match_parent"
android:layout_height="match_parent"

wrap_content

Fixant el valor a wrap_content només forcem la view a expandir-se tant d'espai com el que ocupin els seus fills.

android:layout_width="wrap_content"
android:layout_height="wrap_content"

Exemple 5 : Ús de match_parent i wrap_content

En el següent exemple veurem els diferents resultats d'utilitzar match_parent i wrap_content sobre un conjunt de EditTexts. S'han disposat 3 EditTexts en un LinearLayout vertical (figura 6). Cadascun dels quals té un color de fons diferents (blau, verd i vermell) per veure l'efecte més clar.

El LinearLayout té com a paràmetres match_parent per l'alçada i amplada, ja que volem que ocupi tota la pantalla.
El primer EditText, el de color blau, s'ha configurat amb wrap_content tant per l'alçada com l'amplada, de tal manera que només ocupa l'espai que ocupa el seu contingut, en aquest cas un text.
El segon EditText, el de color verd, s'ha configurat amb wrap_content per l'alçada i match_parent per l'amplada, per això ocupa tot l'ample del LinearLayout pare.
L'últim EditText, el de color vermell s'ha configurat amb match_parent per l'alçada i amplada, així que ocupa tot l'espai restant.

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 5 (Ús de match_parent i wrap_content)
Vegeu també: Android/Layouts predefinits pels adapters

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

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/h_wrap_content_w_wrap_content"
        android:id="@+id/textView"
        android:background="@android:color/holo_blue_light" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/h_wrap_content_w_match_parent"
        android:id="@+id/textView2"
        android:background="@android:color/holo_green_light" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="@string/h_match_parent_w_match_parent"
        android:id="@+id/textView3"
        android:background="@android:color/holo_red_light" />
</LinearLayout>

L'atribut Weight

L'atribut "weight" ens serveix per decidir de quina manera es repartiran l'espai les diferents views. Quan parlem d'espai no ens referim a l'espai total d'un layout sinó a l'espai restant del layout que no està ocupat per cap view. De tal manera que si tenim un layout vertical amb una alçada de 10 unitats on tenim col·locades dues views d'alçada 2 unitats, l'espai a repartir entre les views serà de 6 unitats (10-2-2) i no pas el total de 10.

El valor d'aquest atribut és un nombre que representa una proporció respecte la resta de weights de les altres views germanes.

android:layout_weight="VALOR"

Exemple 6 : Efectes de l'atribut weight

El següent exemple serveix per veure l'efecte de l'atribut weight sobre un conjunt de views germanes. En aquest cas tenim un LinearLayout vertical que conté diferents LinearLayouts horitzontals, cadascun amb uns quants botons a dintre (figura 7). Per a cada conjunt de botons de cada layout horitzontal hem assignat diferents valors de weight. A continuació repassarem cada conjunt i explicarem l'efecte que ha ocasionat l'assignació de pesos:

El primer, és un conjunt de tres botons on cadascun dels quals té assignat un pes 1, de forma que es reparteixen l'espai equitativament com podem observar a la imatge de l'exemple.
El segon és un altre conjunt de tres botons, aquest cop tots tres tenen assignat un pes 100. El resultat és el mateix que en el cas anterior, ja que com hem dit anteriorment, l'atribut weight fa referència a una proporció. Aleshores abans teníem una proporció d'1/3 i ara tenim una proporció de 100/300.
En el tercer cas tenim un conjunt de dos botons amb pesos 1 i 2 respectivament, el resultat és que el primer botó (el de l'esquerra) ocupa 1/3 part de l'espai lliure del layout horitzontal i el segon botó (el de la dreta) ocupa 2/3 parts de l'espai lliure.
El quart conjunt està format altra vegada per dos botons, en aquest cas el primer és un botó amb una gran quantitat de text (que ocupa molt espai del layout horitzontal) i té pes 1, el segon és un botó molt menys ample amb pes 500. Podríem pensar que el botó amb pes 500 ocuparà més espai que el primer, ja que aquest només té pes 1, però hem de recordar que l'espai que es reparteixen és l'espai restant del pare que no ocupen les views. Així doncs el resultat és el que podem veure a la imatge.
En el cinquè exemple podem veure dos botons, el de l'esquerra amb pes 1 i width: 0, i el de la dreta amb pes 0 i width wrap_content. En aquesta situació el botó amb pes 1 agafa tot l'espai lliure disponible (ja que l'altre botó té pes 0), i el boto amb pes 0 com té una amplada de wrap_content, queda reduït només a l'amplada del seu contingut.
Per últim tenim un cas amb una configuració igual a l'anterior (un botó gran amb pes 1 i un botó petit amb pes 500), amb la diferència que abans el width del botó era wrap_content i ara és 0. En aquest cas com inicialment el botó no ocupa cap, l'espai que li és assignat és d'1/500 unitats, que en la pràctica fa que no veiem el botó a la pantalla.

Resum:

	Botó esquerre	Botó centre	Botó dret
Fila 1	width: wrap_content, weight: 1	width: wrap_content, weight: 1	width: wrap_content, weight: 1
Fila 2	width: wrap_content, weight: 100	width: wrap_content, weight: 100	width: wrap_content, weight: 100

	Botó esquerre	Botó dret
Fila 3	width: wrap_content, weight: 1	width: wrap_content, weight: 1
Fila 4	width: wrap_content, weight: 1	width: wrap_content, weight: 500
Fila 5	width: 0, weight: 1	width: wrap_content, weight: 0
Fila 6	width: wrap_content, weight: 500	width: 0, weight: 1

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 6 (Efectes de l'atribut weight)
Vegeu també: Android/Layouts predefinits pels adapters

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

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp">

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

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 1"
            android:id="@+id/button2"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 1"
            android:id="@+id/button3"
            android:layout_weight="1" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 100"
            android:id="@+id/button4"
            android:layout_weight="100" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 100"
            android:id="@+id/button5"
            android:layout_weight="100" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 100"
            android:id="@+id/button6"
            android:layout_weight="100" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 1"
            android:id="@+id/button7"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 2"
            android:id="@+id/button8"
            android:layout_weight="2" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Botó molt llarg amb pes 1"
            android:id="@+id/button9" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 500"
            android:id="@+id/button10"
            android:layout_weight="500" />

    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:text="PES 1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:id="@+id/button13"
            android:layout_weight="1" />

        <Button
            android:text="PES 0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/button14" />
    </LinearLayout>

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="Botó molt llarg amb pes 1"
            android:id="@+id/button11"
            android:layout_weight="1" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Pes 500"
            android:id="@+id/button12"
            android:layout_weight="500" />
    </LinearLayout>
</LinearLayout>

Gravity i layout_gravity

Gravity

Amb gravity configurem l'alineació del contingut de la propia view.

android:gravity="VALOR"

Possibles valors:

Codi XML
top
bottom
left
right
center_vertical
fill_vertical
center_horizontal
fill_horizontal
center
fill
clip_vertical
clip_horizontal
start
end

Layout_gravity

Configurem l'alineació de la view amb la seva view pare.

android:layout_gravity="VALOR"

Possibles valors:

Codi XML
top
bottom
left
right
center
center_vertical
center_horizontal

Exemple 7 : Efectes dels atributs gravity i layout_gravity

En el següent exemple podem veure els efectes dels atributs gravity i layout_gravity (figura 8).

En el primer cas tenim un TextView que ocupa tot l'ample de la pantalla (width: match_parent) amb gravity: right, com podem veure el seu contingut (en aquest cas un text) queda alineat a la dreta de la view.
En el segon cas tenim un altre TextView amb width: wrap_content, i l'atribut layout_gravity: right, en aquest cas és tota la view (TextView) la que es desplaça a l'esquerra del layout pare (LinearLayout).
Per últim tenim un LinearLayout horitzontal amb dos botons; el LinearLayout té l'atribut gravity: center, el que fa que els botons quedin situats al centre d'aquest.

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 7 (Efectes dels atributs gravity i layout_gravity)
Vegeu també: Android/Layouts predefinits pels adapters

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

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="gravity right"
        android:id="@+id/textView4"
        android:background="@android:color/holo_blue_bright"
        android:gravity="right"
        android:layout_marginBottom="20dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="layout:gravity right"
        android:id="@+id/textView5"
        android:background="@android:color/holo_blue_bright"
        android:layout_gravity="right"
        android:layout_marginBottom="20dp" />

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:background="@android:color/holo_green_light">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Botó1"
            android:id="@+id/button14" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Botó2"
            android:id="@+id/button13" />
    </LinearLayout>
</LinearLayout>

Padding i margins

Serveixen per modificar l'espaiat entre les diferents views. És recomanables especificar aquests valors utilitzant "dp" com a unitat de mesura (densitat de pixels). És una unitat de mesura relativa que permet una millor adaptabilitat a l'hora de visualitzar la nostra aplicació en dispositius amb pantalles de diferents mides.

Tant el padding com el margin es poden definir per a tots els costats de la view, o només per alguns específics. Per exemple: (layout_paddingBottom, layout_marginLeft, ...).

Padding

El padding es refereix a l'espaiat entre el contingut de la view i els marges d'aquesta mateixa. Es defineix de la següent manera:

android:padding="VALOR"

Margin

El margin es refereix a la separació entre la view amb la view veïna.

android:layout_margin="VALOR"

Exemple 8 : Efectes dels atributs padding i layout_margin

En el següent exemple podem veure com mitjançant la configuració d'aquests dos atributs (margin i padding) podem posicionar els elements en un LinearLayout vertical al nostre gust (figura 9).

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 8 (Efectes dels atributs padding i layout_margin)
Vegeu també: Android/Layouts predefinits pels adapters

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

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:ems="10"
        android:id="@+id/editText"
        android:hint="Nom d&apos;usuari"
        android:layout_marginBottom="30dp"
        android:layout_marginTop="50dp"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp" />

    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="textPassword"
        android:ems="10"
        android:id="@+id/editText2"
        android:hint="Password"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Entrar"
        android:id="@+id/button15"
        android:layout_marginTop="70dp"
        android:layout_gravity="center_horizontal"
        android:paddingRight="80dp"
        android:paddingLeft="80dp" />
</LinearLayout>

Introducció als ConstraintLayouts

Els ConstraintLayouts són una nova manera de dissenyar els layouts que ha sigut introduïda per Google a la versió d'Android Studio 2.2 preview. Podríem considerar que són una "ampliació" (o més bé un redisseny) dels RelativeLayouts, però, amb un seguit de noves característiques que ens proporcionen un major control sobre la posició de les views en el layout. Es retro-compatible fins l'Android API 9.

Què necessitem per utilitzar-los?

Com hem dit al principi és necessita la versió beta d'Android Studio 2.2 preview o superior. A part d'això hem d'incloure les biblioteques de suport dels ConstraintLayouts:

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
}

Paràmetres dels Constraint Layouts

En aquesta taula podem veure quins són alguns dels nous paràmetres introduïts pels ConstraintLayouts:

Paràmetre XML
layout_constraintTop_toTopOf	Alinea el cim de la View desitjada cap al cim d'una altra.
layout_constraintTop_toBottomOf	Alinea el cim de la View desitjada cap a la part inferior d'una altra.
layout_constraintBottom_toTopOf	Alinea la part inferior de la View desitjada cap al cim d'una altra.
layout_constraintBottom_toBottomOf	Alinea la part inferior de la View desitjada cap a la part inferior d'una altra.
layout_constraintLeft_toTopOf	Alinea l'esquerra de la View desitjada cap al cim d'una altra.
layout_constraintLeft_toBottomOf	Alinea l'esquerra de la View desitjada cap a la part inferior d'una altra.
layout_constraintLeft_toLeftOf	Alinea l'esquerra de la View desitjada cap a l'esquerra d'una altra.
layout_constraintLeft_toRightOf	Alinea l'esquerra de la View desitjada cap a la dreta d'una altra.
layout_constraintRight_toTopOf	Alinea la dreta de la View desitjada cap al cim d'una altra.
layout_constraintRight_toBottomOf	Alinea la dreta de la View desitjada cap a la part inferior d'una altra.
layout_constraintRight_toLeftOf	Alinea la dreta de la View desitjada cap a l'esquerra d'una altra.
layout_constraintRight_toRightOf	Alinea la dreta de la View desitjada cap a la dreta d'una altra.

També podem fer servir "start" i "end" en comptes de left i right.

Avantatges

L'objectiu de Google amb la implementació d'aquesta nova classe Constraint Layout es reduir el nombre de views niuades dins d'un layout. Quin sentit té aixó? Doncs a part d'afegir un grau de simplicitat al layout, també té una part important d'optimització. Quan construïm un layout realment el que estem fent és un arbre de "views", on els nodes poden ser viewgroups i tenir views com a fills (figura 10). També les views tenen com a fills el seu propi contingut. Si utilitzem els Constraints Layouts estem reduint el nombre de viewgroups amb views filles, per tant el resultat serà un arbre de menys profunditat, que a l'hora de recorre'l suposa un cost menor.

Creant un layout del tipus ConstraintLayout

Un cop tenim instal·lada la versió 2.2 d'Android Studio, hem d'obrir el SDK Manager i comprovar que tenim instal·lats els paquets referents als ConstraintLayouts (figura 11).

Per crear un nou layout del tipus ConstraintLayout hem d'especificar com a element arrel el següent (figura 12):

android.support.constraint.ConstraintLayout

És important recordar que hem d'afegir al gradle la dependència que s'ha citat més amunt. build.gradle;

apply plugin: 'com.android.application'

android {
    compileSdkVersion 23
    buildToolsVersion "23.0.3"
    defaultConfig {
        applicationId "com.example.victor.myapplication"
        minSdkVersion 23
        targetSdkVersion 23
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "android.support.test.runner.AndroidJUnitRunner"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

dependencies {
    compile 'com.android.support.constraint:constraint-layout:1.0.0-alpha8'
}

Actualització 06/10/2017: Amb les noves versions de l'Android Studio (3.0 Beta 6), ja no cal incloure manualment tals dependències.

Entorn de disseny

L'entorn de disseny dels ConstraintLayouts és diferent de l'entorn al qual estem acostumats per treballar amb LinearLayouts o RelativeLayouts. Ara a part de veure la pantalla amb les views que hem col·locat, a la dreta d'aquesta tenim una pantalla que mostra de forma esquemàtica les relacions entre les diferents views que tenim col·locades en el nostre layout (figura 13).

Constraints

Posicionament al costat

En els ConstraintLayouts podem definir la posició d'una determinada view dient "aquesta view va al costat dret d'aquesta altra" o "aquesta view va a sota d'aquesta", etc.

Això ho podem fer des de l'editor visual: seleccionant un dels costats de la view i arrossegant-to cap a una altra view, o bé des de el codi XML:

app:layout_constraintRight_toRightOf="parent"
<!--- o --->
app:layout_constraintRight_toLeftOf="@+id/button1"

Exemple 1 : Posicionament al costat amb constraint layouts

En aquest exemple podem veure com hem fet servir aquesta característica de posicionar elements respecte al costat dels altres elements en ConstraintLayout amb un EditText i un botó (figura 14).

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 1 (Posicionament al costat amb constraint layouts)
Vegeu també: Android/Layouts predefinits pels adapters

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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">

    <TextView
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:layout_editor_absoluteX="0dp"
        android:id="@+id/textView"
        tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse nec urna lacinia, dictum augue quis, porta est. Quisque quis lacinia nulla."
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button2"
        app:layout_constraintTop_toBottomOf="@+id/textView"
        android:layout_marginEnd="40dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="40dp" />
</android.support.constraint.ConstraintLayout>

Redimensionar

En els altres tipus de layouts per poder redimensionar un fill s'havien de tenir en compte els atributs i la posició del layout pare i dels altres fills. Tot això canvia amb l'ús dels ConstraintLayout, ja que a partir d'una interfície gràfica es pot manipular l'amplada i alçada d'un fills dintre un layout. Els atributs utilitzats per definir l'amplada i alçada dins del codi xml son els mateixos que s'utilitzen en els Linear Layouts:

android:layout_width
android:layout_height

Exemple 2 : Redimensionament amb constraint layouts

Fig 15. Redimensio elements constraint layout

En el següent exemple es pot comprovar la redimensio feta sobre 3 botons alineats verticalment. La redimensió tant sols s'ha fet a partir de l'interfície gràfica. En el codi xml es pot veure com s'han modificat els atributs android:layout_width i android:layout_height (Figura 15).

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 2 (Redimensionament amb constraint layouts)
Vegeu també: Android/Layouts predefinits pels adapters

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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">

    <Button
        android:text="Button"
        android:layout_width="263dp"
        android:layout_height="144dp"
        android:id="@+id/button"
        android:layout_marginTop="144dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:elevation="0dp"
        app:layout_constraintVertical_bias="0.13"
        app:layout_constraintHorizontal_bias="0.47" />

    <Button
        android:text="Button"
        android:layout_width="123dp"
        android:layout_height="51dp"
        android:id="@+id/button4"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintVertical_bias="0.13" />

    <Button
        android:text="Button"
        android:layout_width="341dp"
        android:layout_height="118dp"
        android:id="@+id/button6"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_marginTop="16dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.94" />

</android.support.constraint.ConstraintLayout>

Biaix vertical i horitzontal

Per definir la posició d'un objecte a la pantalla podem fer servir el biaix vertical i horitzontal, de tal manera que assignem a les views una posició relativa respecte a uns eixos X i Y que establim entre views. Això conjuntament amb els constraints de posicionar al costat ens permet crear layouts adaptatius a diferents pantalles.

Exemple 3 : Modificant biaix amb constraint layouts

En el següent exemple podem veure com hem fet servir el biaix per posicionar els elements a la pantalla. Veiem que es poden definir eixos entre dos views, o entre una view i el pare. També podem afegir padding als eixos. (figura 16).

Fragment de codi exemplificador (

)

Informació addicional

Link al repositori: Pàgina principal d'Android
Anotacions: Codi XML de l'exemple 3 (Modificant biaix amb constraint layouts)
Vegeu també: Android/Layouts predefinits pels adapters

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    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">

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="43dp"
        android:inputType="textPersonName"
        android:ems="10"
        android:id="@+id/editText3"
        android:hint="Nom"
        android:layout_marginTop="56dp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginStart="56dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintVertical_bias="0.0" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:ems="10"
        android:id="@+id/editText4"
        app:layout_constraintLeft_toLeftOf="@+id/editText3"
        android:layout_marginTop="24dp"
        app:layout_constraintTop_toBottomOf="@+id/editText3"
        android:hint="Password" />

    <Button
        android:text="Button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/button3"
        android:layout_marginTop="200dp"
        app:layout_constraintTop_toBottomOf="@+id/editText4"
        app:layout_constraintBottom_toBottomOf="parent"
        android:layout_marginBottom="16dp"
        app:layout_constraintVertical_bias="0.0"
        android:layout_marginStart="16dp"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginEnd="16dp"
        app:layout_constraintRight_toRightOf="parent" />
</android.support.constraint.ConstraintLayout>

Referències

↑ «Layouts predefinits pals adapters» (en català). [Consulta: 16/12/2016].

[1] «Layouts predefinits pals adapters» (en català). [Consulta: 16/12/2016].

[1]