Il layout di un'app Android

Vediamo adesso in che modo è possibile realizzare layout app Android.

Qualsiasi applicazione Android si voglia iniziare a sviluppare ha sempre bisogno di un proprio aspetto grafico.

Sempre!

Anche nei casi più semplici quando ci si limita a stampare il classico “Hello World”.

Ragion per cui nel momento della creazione di un’Activity è sempre indispensabile associare una determinata interfaccia grafica, che prende il nome di Layout.

Quindi il concetto di Layout è una delle competenza di cui un neo-programmatore Android ha necessariamente bisogno.

Indice dei Contenuti

L’interfaccia grafica

In Android Studio le interfacce utente possono essere classificate in: interfacce testuali e interfacce grafiche.

Le interfacce testuali, chiamate anche a riga di comando, si comportano esattamente come il “vecchio” MS-DOS o la classica shell di Linux.

Vale a dire implementare l’interfaccia grafica scrivendo le classiche righe di codice (per questo motivo chiamate testuali) a cui un programmatore standard è abituato.

Questa tipologia di interfaccia potrebbe essere di difficile lettura per un utente non-programmatore che si appresta ad iniziare questo nuovo percorso.

Ecco perchè negli ultimi anni hanno fatto la loro comparsa le interfacce grafiche.

A differenza delle interfacce testuali, le interfacce grafiche facilitano e di molto la creazione di un’interfaccia utente.

In questo caso non è più necessario scrivere righe di codice sconosciute a molti, ma si crea il layout desiderato semplicemente inserendo e spostando con l’aiuto del mouse i vari componenti che dovranno far parte dell’applicazione finale.

Android Studio permette la creazione di layout sia in modalità testuale, sia in modalità grafica e sia in modalità ibrida, dividendo in due lo schermo e permettendo di vedere in tempo reale sia il codice scritto che il risultato finale.

Per chi ancora non lo avesse fatto, può scaricare gratuitamente tutto il software necessario sul sito ufficiale del produttore e seguire le istruzioni per l’installazione e la configurazione.

Tipologie di Layout

Le tipologie di Layout disponibili sono cinque:

LinearLayout: è il layout manager più utilizzato; dispone ogni elemento in maniera sequenziale su una riga o su una colonna in base al valore android:orientation=”horizontal“ o android:orientation=”vertical” impostato nell’activity_main.xml.
TableLayout: dispone i componenti in forma tabellare ed è particolarmente adatto a mostrare strutture regolari suddivise per righe e colonne come se fosse una griglia. Ricorda molto le tabelle in una pagina HTML rappresentato dai tag <table> <tr> <td>.
RelativeLayout: è sicuramente il layout più moderno e flessibile tra quelli disponibili. E’ diventato il layout manager di default nei progetti Android, ragion per cui nell’esempio dell’articolo precedente non è stato impostato alcun layout all’interno dell’activity_main.xml. La parola “Relative” deriva dal fatto che gli elementi si dispongono in maniera relativa tra di loro o rispetto al loro contenitore, adattandosi quindi a ogni tipo di display.
AbsoluteLayout: è il layout più semplice da utilizzare ma anche il più vecchio e deprecato in quanto non permette un facile adattamento ai diversi schermi dei dispositivi.
FrameLayout: è il layout che permette la sovrapposizione degli oggetti contenuti all’interno dello schermo; è spesso utilizzato per creare dei semplici popup e messaggi di alert.

Tra queste cinque tipologie, le prime tre sono quelle più utilizzate e con le quali è possibile affrontare ogni situazione.

Nella figura successiva è possibile visualizzare il risultato finale di alcuni dei layout disponibili:

Come definire un Layout

Per poter definire il Layout desiderato per la nostra applicazione Android basta aprire il file activity_main.xml già visto precedentemente e definire il tag appropriato in base alle nostre esigenze.

Rispetto al classico esempio di base, in cui era stato omesso il Layout e quindi utilizzato il RelativeLayout di default, in questo caso viene esplicitamente indicato che deve essere utilizzato un LinearLayout.

<?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" tools:context="com.example.lentux.nuovoprogetto.MainActivity">
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" >
	<TextView android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Testo 1" />
	<LinearLayout android:layout_width="wrap_content" android:layout_height="wrap_content" android:orientation="horizontal" >
			<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Testo 2" />
			<TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Testo 3" />
	</LinearLayout>
</LinearLayout>

Nello specifico vengono utilizzati due LinearLayout annidati, uno verticale e quello successivo orizzontale.

Il risultato finale, come si può facilmente notare dalla figura successiva, mostrerà una stringa Testo 1 sulla prima riga contenuta nel primo LinearLayout verticale e, all’interno di un secondo LinearLayout orizzontale annidato, ledue stringhe Testo 2 e Testo 3.

Nello stesso modo è possibile definire qualsiasi altro tipo di Layout in base alle proprie necessità.

In questo primo esempio all’interno del tag “<LinearLayout” sono stati utilizzati soltanto alcuni dei più importanti attributi disponibili come android:layout_width, android:layout_height e android:orientation.

Nelle lezioni successive vedremo anche tutti gli altri attributi disponibili nel dettaglio.

Chi volesse già da ora dare uno sguardo a tutta la lista degli attributi disponibili per ogni tipologia di layout può visitare direttamente il sito ufficiale nella sezione Layouts di Android Developers.

Attributi layout_width e layout_height

All’interno di qualsiasi layout utilizzato, due degli attributi più importanti che devono essere utilizzati sono layout_width e layout_height.

I valori che possono assumere questi due attributi sono wrap_content e match_parent.

Prima delle API 8 al posto di match_parent veniva utilizzato il valore fill_parent che adesso è stato deprecato.

Wrap_content indica che l’altezza/larghezza di un determinato layout avrà una dimensione variabile in base a ciò che è contenuto al suo interno.

Match_parent invece indica che l’altezza/larghezza di un layout occupa l’intera altezza/larghezza del proprio contenitore.

Esempi pratici di utilizzo

Gli esempi seguenti mostrano un RelativeLayout con un semplice Bottone al suo interno.

1 – Layout con attributi match_parent sia per altezza che per larghezza e Button con attributi wrap_content sia per altezza che per larghezza.

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

    <Button android:id="@+id/btnButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Bottone"/>
     
</RelativeLayout>

2 – Layout con attributi match_parent sia per altezza che per larghezza e Button con attributo wrap_content per altezza e match_parent per larghezza.

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

    <Button android:id="@+id/btnButton1" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Bottone"/>
     
</RelativeLayout>

3 – Layout con attributi match_parent sia per altezza che per larghezza e Button con attributo wrap_content per larghezza e match_parent per altezza.

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

    <Button android:id="@+id/btnButton1" android:layout_width="wrap_content" android:layout_height="match_parent" android:text="Bottone"/>
     
</RelativeLayout>

4 – Layout con attributi match_parent sia per altezza che per larghezza e Button con attributi match_parent sia per altezza che per larghezza.

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

    <Button android:id="@+id/btnButton1" android:layout_width="match_parent" android:layout_height="match_parent" android:text="Bottone"/>
     
</RelativeLayout>

Poichè gli attributi layout_width e layout_height possono essere associati sia a un layout sia anche ad altri elementi in esso contenuti, ecco alcune possibili combinazioni e il relativo risultato finale.