Guida completa ai layout XML in Android

In Android, innanzitutto la definizione dell’interfaccia utente passa spesso attraverso file XML di layout. Inoltre, questa guida ti spiega in modo pratico cos’è un layout XML, le differenze tra LinearLayout, RelativeLayout e ConstraintLayout, con esempi e consigli per creare layout responsive adatti a schermi diversi.

Cos’è un layout XML in Android

Un file di layout XML in Android, in particolare, descrive la struttura grafica di una schermata (Activity), di una porzione di UI (Fragment) o di un singolo elemento (ad esempio una riga di una lista). In pratica, grazie a questo file definisci:

• Quali viste compongono l’interfaccia (TextView, Button, ImageView, ecc.).
• Come sono disposte sullo schermo (in colonna, in riga, relative tra loro, ancorate ai bordi, ecc.).
• Le loro proprietà principali (testo, dimensioni, margini, padding, colori, id, ecc.).

Un layout XML viene solitamente salvato nella cartella res/layout (es. activity_main.xml) e, di conseguenza, caricato nel codice Kotlin/Java con setContentView(R.layout.activity_main) o tramite LayoutInflater.

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

    <TextView
        android:id="@+id/titleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Ciao Android!" /
>

</LinearLayout>

In sintesi, ogni layout ha un container radice (qui un LinearLayout) che contiene a sua volta altre viste o altri layout annidati.

LinearLayout Android: struttura lineare in riga o colonna

LinearLayout dispone i figli uno dopo l’altro, in verticale (colonna) o in orizzontale (riga). In altre parole, è semplice da usare ed è ideale per layout lineari non troppo complessi.

In particolare, gli attributi chiave sono:

• android:orientation: vertical o horizontal.
• layout_weight: per distribuire lo spazio tra i figli.
• gravity e layout_gravity: per allineare il contenuto.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp">

    <TextView
        android:id="@+id/labelName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Nome" /
>

    <EditText
        android:id="@+id/inputName"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" /
>

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

</LinearLayout>

Ad esempio, ecco un esempio con pesi per dividere lo spazio orizzontale in due campi uguali:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <EditText
        android:id="@+id/inputFirstName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Nome" /
>

    <EditText
        android:id="@+id/inputLastName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:hint="Cognome" /
>

</LinearLayout>

RelativeLayout Android: posizionamento relativo tra viste

RelativeLayout (oggi meno usato rispetto a ConstraintLayout) permette di posizionare le viste relative ad altre viste o ai bordi del container. In passato è stato per anni il layout flessibile di riferimento, ma è stato di fatto sostituito da ConstraintLayout.

Per quanto riguarda RelativeLayout, gli attributi chiave (prefisso android:) sono:

• layout_alignParentTop, layout_alignParentBottom, layout_alignParentStart, layout_alignParentEnd.
• layout_toStartOf, layout_toEndOf, layout_above, layout_below.
• layout_centerInParent, layout_centerHorizontal, layout_centerVertical.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="64dp"
        android:layout_height="64dp"
        android:layout_alignParentStart="true"
        android:layout_marginEnd="16dp"
        android:src="@drawable/ic_avatar" /
>

    <TextView
        android:id="@+id/userName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@id/avatar"
        android:layout_alignTop="@id/avatar"
        android:text="Mario Rossi" /
>

    <Button
        android:id="@+id/btnFollow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:text="Segui" /
>

</RelativeLayout>

Usalo, in pratica, solo se mantieni un progetto legacy o se devi modificare vecchi layout. Per nuovi progetti, invece, è preferibile usare direttamente ConstraintLayout.

ConstraintLayout Android: il layout XML flessibile e moderno

ConstraintLayout è il layout consigliato da Google per schermate complesse. Inoltre, permette di definire vincoli (constraints) tra le viste e il container o tra viste, per ottenere layout potenti e facilmente adattabili a schermi diversi.

In sintesi, i vantaggi principali sono:

• Puoi costruire layout complessi con meno livelli annidati (migliore performance).
• Editor visuale potente in Android Studio (drag & drop, anteprima vari dispositivi).
• Supporto a linea guida, barriere, catene di viste (chains), bias, percentuali, ecc.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/titleText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Benvenuto"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" /
>

    <Button
        android:id="@+id/btnStart"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Inizia"
        app:layout_constraintTop_toBottomOf="@id/titleText"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent" /
>

</androidx.constraintlayout.widget.ConstraintLayout>

Ad esempio, ecco un esempio con una card centrata e un pulsante ancorato in basso:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/card"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="16dp"
        android:background="@android:color/white"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toTopOf="@id/btnSubmit"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintVertical_bias="0.4">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Titolo" /
>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Descrizione della card" /
>

    </LinearLayout>

    <Button
        android:id="@+id/btnSubmit"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="Invia"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        android:layout_margin="16dp" /
>

</androidx.constraintlayout.widget.ConstraintLayout>

Quando usare i layout XML Android: LinearLayout, RelativeLayout e ConstraintLayout

In generale, una regola pratica moderna è la seguente:

Per approfondire, invece, consulta la documentazione ufficiale Android sui layout XML.

• Usa LinearLayout per strutture semplici, perfettamente lineari (liste verticali di campi, righe con pochi elementi).
• Usa ConstraintLayout per schermate più complesse, in cui hai elementi sovrapposti, allineamenti multipli o devi mantenere poche annidature.
• Usa RelativeLayout solo se stai lavorando su codice esistente che lo utilizza già.

In pratica, alcuni esempi pratici sono:

• Form di login con due campi e un pulsante: LinearLayout verticale va benissimo.
• Toolbar con titolo centrato e pulsanti ai lati: molto più semplice con ConstraintLayout.
• Card con immagine, titolo, sottotitolo e badge nell’angolo: ConstraintLayout o un mix di ConstraintLayout esterno + layout semplici interni.

Consigli per layout XML Android responsive

Perché un layout sia davvero usabile su diversi dispositivi (smartphone piccoli, grandi, tablet), in generale serve qualche accortezza.

1. Usa dimensioni relative e non assolute

Evita, dove possibile, px. Invece, usa:

• dp per dimensioni, margini e padding.
• sp per le dimensioni del testo (rispettano le preferenze di accessibilità dell’utente).
• match_parent e wrap_content per lasciare al sistema la gestione degli spazi.

2. Sfrutta ConstraintLayout Android per allineamenti flessibili

In pratica, alcune tecniche utili in ConstraintLayout sono:

• Catene (chains): per distribuire più viste orizzontalmente o verticalmente usando 0dp come larghezza/altezza e vincoli agli estremi.
• Linee guida (Guideline): definisci distanze in percentuale rispetto al genitore (es. 30% da sinistra) per allineare elementi in modo proporzionale.
• Bias: sposti un elemento tra due vincoli (es. più verso l’alto o verso il basso) senza usare margini fissi.

3. Prevedi orientamenti diversi (portrait/landscape)

Per supportare bene sia verticale che orizzontale, in particolare puoi:

• Evita layout troppo fissi in una sola direzione.
• Se serve, crea varianti di layout in res/layout-land per l’orientamento landscape.
• Tieni conto che in landscape hai più spazio orizzontale ma meno verticale.

4. Usa risorse separate per dimensioni e valori

Non scrivere direttamente tutte le dimensioni nei layout. Invece, metti valori riutilizzabili in res/values/dimens.xml, ad esempio:

<resources>
    <dimen name="spacing_small">8dp</dimen>
    <dimen name="spacing_medium">16dp</dimen>
    <dimen name="text_size_title">20sp</dimen>
</resources>

Nel layout, di conseguenza, userai:

android:padding="@dimen/spacing_medium"
android:textSize="@dimen/text_size_title"

5. Considera densità di schermo e multi-window

Testa i tuoi layout su più emulatori con densità e dimensioni diverse. Inoltre, Android Studio offre anteprime per vari dispositivi e modalità (incluso split-screen / multi-window). Assicurati che:

• Il testo non venga tagliato.
• I pulsanti restino facilmente cliccabili (dimensioni minime consigliate intorno a 48dp).
• Gli elementi importanti non restino troppo vicini ai bordi.

Riepilogo: layout XML Android a confronto

In Android, i layout XML sono la base dell’interfaccia utente. Per questo motivo, impara a usare bene LinearLayout per strutture semplici, passa a ConstraintLayout per schermate flessibili e moderne e tratta RelativeLayout come una tecnologia principalmente legacy. Infine, concentrati su dimensioni relative, riuso di risorse e test su più dispositivi per ottenere layout davvero responsive.

Guide correlate

• Creare il Primo Progetto Android in Java
• Activity e Ciclo di Vita in Android
• Fragment in Android
• RecyclerView Android
• ConstraintLayout Android (guida avanzata)