Android Studio - Layout telefono e tablet

In questo articolo vedremo come realizzare un layout diverso se l'app viene eseguita su un telefono oppure su un tablet.

PROCEDIMENTO 1:

1. Cliccare sul simbolo Orientation for Preview

2. Cliccare poi su Create Tablet Variation

Ora all'interno della cartella layout verrà aggiunto il file con lo stesso nome dell'originale ma con l'aggiunta della scritta (sw600dp) che sta ad indicare che quel file è per tablet a partire da uno schermo con una densità in pixel pari a 600dp.

• activity_main.xml - layout principale in modalità portrait (verticale) per telefono
• activity_main.xml (land) - layout principale in modalità landscape (orizzontale) per telefono
• activity_main.xml (sw600dp) - layout principale in modalità portrait (verticale) per tablet

Ecco come si presenta il file activity_main.xml

	<?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:orientation="vertical"
	tools:context=".MainActivity">
	<TextView
	android:id="@+id/textView1"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 1"
	android:textColor="#000000"
	android:textSize="16sp"/>
	<TextView
	android:id="@+id/textView2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 2"
	android:textColor="#000000"
	android:textSize="16sp"/>
	<TextView
	android:id="@+id/textView3"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 3"
	android:textColor="#000000"
	android:textSize="16sp"/>
	<Button
	android:id="@+id/button"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Button" />
	</LinearLayout>

view raw activity_main_layout2.xml hosted with ❤ by GitHub

Ecco come si presenta il file activity_main.xml (land)

	<?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">
	<TextView
	android:id="@+id/textView1"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 1"
	android:textColor="#000000"
	android:textSize="16sp"/>
	<TextView
	android:id="@+id/textView2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 2"
	android:textColor="#000000"
	android:textSize="16sp"/>
	<TextView
	android:id="@+id/textView3"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 3"
	android:textColor="#000000"
	android:textSize="16sp"/>
	<Button
	android:id="@+id/button"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Button" />
	</LinearLayout>

view raw activity_main_layout2_l.xml hosted with ❤ by GitHub

Ecco come si presenta il file activity_main.xml (sw600dp)

	<?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="horizontal">
	<LinearLayout
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:orientation="vertical">
	<TextView
	android:id="@+id/textView1"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 1"
	android:textColor="#000000"
	android:textSize="16sp" />
	<TextView
	android:id="@+id/textView2"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 2"
	android:textColor="#000000"
	android:textSize="16sp" />
	<TextView
	android:id="@+id/textView3"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Hello World! 3"
	android:textColor="#000000"
	android:textSize="16sp" />
	</LinearLayout>
	<LinearLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:orientation="vertical">
	<Button
	android:id="@+id/button"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Button" />
	</LinearLayout>
	</LinearLayout>

view raw activity_main_layout2_t.xml hosted with ❤ by GitHub

Aspetto in modalità portrait (verticale) per telefono

Aspetto in modalità landscape (orizzontale) per telefono

Aspetto in modalità modalità portrait (verticale) e landscape (orizzontale) per tablet

Come si può vedere il layout per tablet viene utilizzato per entrambe le modalità portrait e landscape ma è possibile avere anche per i tablet due layout diversi uno per portrait e uno per landscape che vedremo in un questo articolo.

Download Project
Download file APK

---

PROCEDIMENTO 2:

1. Selezionare la cartella layout

2. Cliccare con il tasto destro
3. Selezionare New
4. Selezionare Layout resource file

Nella finestra che appare

inserire nel campo File name: il nome del layout (inserire lo stesso nome del layout principale)
Selezionare Smallest Screen Width dalla lista Available qualifiers
Quindi premere i pulsante con le doppie frecce verso destra

inserire nel campo Screen width: il valore 600

Cliccare sul pulsante Finish per concludere la creazione del layout.
Il risultato sarà un file che si chiama activity_main.xml (sw600dp) come visto nel procedimento 1 ma con la differenza che questo file è completamente vuoto e quindi va riempito copiando il contenuto del file activity_main.xml all'interno del file appena creato activity_main.xml (sw600dp). Modificare poi il layout in modo da renderlo adatto ai tablet.

Attenzione: è importante che l'id dei vari elementi del layout tablet sia uguale all'id degli elementi del layout phone (telefono):

DIMENSIONI TIPICHE DEGLI SCHERMI
Maggiori informazioni si possono trovare a questo indirizzo (in inglese)

Ecco come altri valori di larghezza schermo (Smallest Screen Width) corrispondono alle dimensioni tipiche di schermo:

• 320dp: un tipico schermo di telefono (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, ecc.)
• 480dp: un grande schermo di telefono ~ 5"(480x800 mdpi)
• 600dp: un tablet da 7 "(600x1024 mdpi)
• 720dp: un tablet da 10 "(720x1280 mdpi, 800x1280 mdpi, ecc.)

Fonte: Andorid Studio

---

Vedi anche Layout varticale e orizzontale
Vedi anche Layout telefono/tablet verticale/orizzontale