Android Studio - Layout: Relative Layout

In Android Studio la prima cosa che dobbiamo fare per  creare l'app è definire il layout che deve assumere.
In questo Android ha la possibilità di creare diversi layout, cioè come vengono disposti gli oggetti all'interno dell'app:

• Linear Layout
• Table Layout
• Relative Layout

Il Relative Layout è il layout più versatile rispetto al Linear Layout perché permette di disporre gli oggetti in riferimento ad altri oggetti.

ESEMPIO 1:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:id="@+id/RLayout"
	tools:context=".MainActivity">
	<TextView
	android:id="@+id/lblMessaggio"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:text="Messaggio"
	tools:ignore="HardcodedText" />
	<EditText
	android:id="@+id/txtMessaggio"
	android:layout_width="match_parent"
	android:layout_height="170px"
	android:layout_alignLeft="@+id/lblMessaggio"
	android:layout_below="@+id/lblMessaggio"
	android:layout_centerHorizontal="true"
	android:textSize="18sp" />
	<Button
	android:id="@+id/btnInvia"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignRight="@+id/txtMessaggio"
	android:layout_below="@+id/txtMessaggio"
	android:text="Invia"
	tools:ignore="HardcodedText"/>
	<Button
	android:id="@+id/btnCancella"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignLeft="@+id/txtMessaggio"
	android:layout_below="@+id/txtMessaggio"
	android:text="Cancella"
	tools:ignore="HardcodedText"/>
	</RelativeLayout>

view raw RelativeLayout1.xml hosted with ❤ by GitHub

In questo tipo di layout per ogni vista possono essere valorizzati attributi che specificano la propria posizione rispetto alle altre viste. Questi attributi sono i seguenti:

• layout_alignParentTop - allineamento in alto true o false
• layout_alignParentLeft - allineamento a sinistra true o false
• layout_alignLeft - allineamento a sinistra rispetto alla View con id....
• layout_alignRight - allineamento a destra rispetto alla View con id....
• layout_below - allineamento sotto rispetto alla View con id....
• layout_CenterHorizontal - allineamento centrato nel layout true o false

---

ESEMPIO 2:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:id="@+id/RLayout"
	tools:context=".MainActivity">
	<TextView
	android:id="@+id/lblMessaggio"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:text="Messaggio"
	tools:ignore="HardcodedText" />
	<EditText
	android:id="@+id/txtMessaggio"
	android:layout_width="match_parent"
	android:layout_height="170px"
	android:layout_alignLeft="@+id/lblMessaggio"
	android:layout_below="@+id/lblMessaggio"
	android:layout_centerHorizontal="true"
	android:textSize="18sp" />
	<Button
	android:id="@+id/btnInvia"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignRight="@+id/txtMessaggio"
	android:layout_below="@+id/txtMessaggio"
	android:text="Invia"
	tools:ignore="HardcodedText"/>
	<Button
	android:id="@+id/btnCancella"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignLeft="@+id/txtMessaggio"
	android:layout_below="@+id/txtMessaggio"
	android:text="Cancella"
	tools:ignore="HardcodedText"/>
	<TextView
	android:id="@+id/txtMessaggio2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignLeft="@+id/btnCancella"
	android:layout_below="@+id/btnCancella"
	android:layout_centerHorizontal="true"
	android:textSize="18sp"
	android:text="Inserire un messaggio all'interno della casella di testo"/>
	</RelativeLayout>

view raw RelativeLayout2.xml hosted with ❤ by GitHub

In questo esempio è stato aggiunto un TextView allineata a sinistra e posizionata sotto al pulsante Cancella tramite gli attributi layout_alignLeft e layout_below inoltre è stato aggiunto l'attributo layout_CenterHorizontal="true" per fare in modo che il testo sia largo come lo schermo.

Download Project
Download file APK

---

ESEMPIO 3:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:id="@+id/RLayout"
	tools:context=".MainActivity">
	<TextView
	android:id="@+id/lblMessaggio"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:text="Messaggio"
	tools:ignore="HardcodedText" />
	<EditText
	android:id="@+id/txtMessaggio"
	android:layout_width="match_parent"
	android:layout_height="170px"
	android:layout_alignLeft="@+id/lblMessaggio"
	android:layout_below="@+id/lblMessaggio"
	android:layout_centerHorizontal="true"
	android:textSize="18sp" />
	<Button
	android:id="@+id/btnInvia"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignRight="@+id/txtMessaggio"
	android:layout_below="@+id/txtMessaggio"
	android:text="Invia"
	tools:ignore="HardcodedText"/>
	<Button
	android:id="@+id/btnCancella"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignLeft="@+id/txtMessaggio"
	android:layout_below="@+id/txtMessaggio"
	android:text="Cancella"
	tools:ignore="HardcodedText"/>
	<TextView
	android:id="@+id/txtMessaggio2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignRight="@+id/btnCancella"
	android:layout_below="@+id/btnCancella"
	android:textSize="18sp"
	android:text="Inserire un messaggio all'interno della casella di testo"/>
	</RelativeLayout>

view raw RelativeLayout3.xml hosted with ❤ by GitHub

In questo esempio è stato tolto l'attributo layout_CenterHorizontal="true" ed il risultato è quello mostrato nell'immagine

---

ESEMPIO 4:

	<?xml version="1.0" encoding="utf-8"?>
	<RelativeLayout
	xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	xmlns:app="http://schemas.android.com/apk/res-auto"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:id="@+id/RLayout"
	tools:context=".MainActivity">
	<TextView
	android:id="@+id/lblMessaggio"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignParentLeft="true"
	android:layout_alignParentTop="true"
	android:text="Messaggio"
	tools:ignore="HardcodedText" />
	<EditText
	android:id="@+id/txtMessaggio"
	android:layout_width="match_parent"
	android:layout_height="170px"
	android:layout_alignLeft="@+id/lblMessaggio"
	android:layout_below="@+id/lblMessaggio"
	android:layout_centerHorizontal="true"
	android:textSize="18sp" />
	<Button
	android:id="@+id/btnInvia"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignRight="@+id/txtMessaggio"
	android:layout_below="@+id/txtMessaggio"
	android:text="Invia"
	tools:ignore="HardcodedText"/>
	<Button
	android:id="@+id/btnCancella"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignLeft="@+id/txtMessaggio"
	android:layout_below="@+id/txtMessaggio"
	android:text="Cancella"
	tools:ignore="HardcodedText"/>
	<TextView
	android:id="@+id/txtMessaggio2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:layout_alignLeft="@+id/btnInvia"
	android:layout_below="@+id/btnInvia"
	android:textSize="18sp"
	android:text="Inserire un messaggio all'interno della casella di testo"/>
	</RelativeLayout>

view raw RelativeLayout4.xml hosted with ❤ by GitHub

In questo esempio è stato modificato l'allineamento a sinistra, facendo riferimento al pulsante Invia e non al pulsante Cancella.