Guida Programmazione Android – Lezione 17: Layout

Oggi vedremo come creare Layout più complessi per dare un migliore tocco estetico alla nostra applicazione!

Fin’ora ci siamo soffermati molto sui contenuti e le funzionalità delle nostre applicazioni, ma poco sulla forma. Poiché anche l’occhio vuole la sua parte, e sicuramente un’applicazione esteticamente curata sarà anche più apprezzata, vediamo oggi come utilizzare un tipo di Layout molto semplice ma molto usato come il LinearLayout.
Per prima cosa come sempre creiamo un nuovo progetto. Abbiamo scelto come nome per questa lezione EsempioLayout.

Inseriamo 3 immagini nella cartella drawable, 1 2 e 3.
Apriamo il nostro activity_main.xml nella modalità testuale,cancelliamo tutto e scriviamo:

<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:orientation="vertical" >

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/num1" />

    <ImageView

        android:id="@+id/imageView2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/num2" />

    <ImageView

        android:id="@+id/imageView3"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:src="@drawable/num3" />

</LinearLayout>

Il tutto apparirà così:

Questo perché abbiamo impostato nel campo orientation: vertical. Cambiando solo questo campo in horizontal avremo:

Le immagini risultano piccole. Per altezza e larghezza abbiamo infatti impostato “wrap_content”, una parola chiave che significa più o meno “riserva spazio per quest’immagine giusto per contenerla”. Quindi se un’immagine è piccola, occuperà poco spazio. Mettiamo però l’esempio che noi vogliamo occupare tutto lo spazio a disposizione verticalmente, e che quindi vogliamo che ogni immagine sia grande 1 terzo del totale. Come fare?

Con l’attributo weight:

<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:orientation="vertical" >

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:src="@drawable/num1" />

    <ImageView

        android:id="@+id/imageView2"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:src="@drawable/num2" />

    <ImageView

        android:id="@+id/imageView3"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="1"

        android:src="@drawable/num3" />

</LinearLayout>

Così infatti settando ad 1 il campo weight ogni elemento “peserà” 1, cioè occuperà 1 terzo dello spazio.

Possiamo anche impostare lo sfondo inserendo il campo android:background, ad esempio:

<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:orientation="vertical" 
    android:background="@drawable/androidblog">

Per cui si avrà:

Possiamo inoltre inserire LinearLayout dentro altri LinearLayout, anche con orientation diverse, e inserire al loro interno altri elementi con “pesi” diversi. Ad esempio dentro ad un LinearLayout verticale ne inserisco 3 orizzontali, aggiungendo immagini di numeri in modo da ottenere una griglia 3×3 utile per definire il layout di una calcolatrice.

Puoi guardare tutte le lezioni passate consultando l’indice del corso di programmazione android