Android Studio - Layout: Table 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 Table Layout permette di disporre gli oggetti all'interno di una tabella dove le dimensioni della tabella sono date dalla dimensione della View più grande (sia in larghezza che altezza) contenuta in una riga e/o colonna
Table Layout vuole inserito all'interno di un Linear Layout.

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout
	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:orientation="vertical"
	tools:context=".MainActivity">
	<TableLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TableRow
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView
	android:text="Nome"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/textView"/>
	<EditText
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:inputType="textPersonName"
	android:ems="10"
	android:id="@+id/editText2"/>
	</TableRow>
	<TableRow
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView
	android:text="Cognome"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/textView2"/>
	<EditText
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:inputType="textPersonName"
	android:ems="10"
	android:id="@+id/editText3"/>
	</TableRow>
	</TableLayout>
	</LinearLayout>

view raw TableLayout2.xml hosted with ❤ by GitHub

Pre creare la struttura tabella bisogna iniziare con il tag <TableLayout e poi al suo interno prima del tag di chiusura </TableLayout> bisogna inserire le righe della tabella utilizzando il tag <TableRow ed al suo interno prima del tag di chiusura </TableRow> inserire le View dell'app.
Le View all'interno del tag <TableRow sono disposte in orizzontale definendo le colonne della tabella. Tramite gli esempi qui sotto si può capire meglio il funzionamento.

ESEMPIO 1:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout
	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:orientation="vertical"
	tools:context=".MainActivity">
	<TableLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TableRow
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView
	android:text="Nome"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/textView"/>
	<EditText
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:inputType="textPersonName"
	android:ems="10"
	android:id="@+id/editText2"/>
	</TableRow>
	<TableRow
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView
	android:text="Cognome"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/textView2"/>
	<EditText
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:inputType="textPersonName"
	android:ems="10"
	android:id="@+id/editText3"/>
	</TableRow>
	</TableLayout>
	</LinearLayout>

view raw TableLayout2.xml hosted with ❤ by GitHub

In questo modo viene definita una tabella con due righe e due colonne. La larghezza delle colonne viene definita dalla View con larghezza maggiore.
In questo caso la larghezza della prima colonna è data dalla parola Cognome.

---

ESEMPIO 2:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout
	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:orientation="vertical"
	tools:context=".MainActivity">
	<TableLayout
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TableRow
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView
	android:text="Nome"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/textView"/>
	<EditText
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:inputType="textPersonName"
	android:ems="10"
	android:id="@+id/editText2"/>
	</TableRow>
	<TableRow
	android:layout_width="match_parent"
	android:layout_height="match_parent">
	<TextView
	android:text="Cognome"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/textView2"/>
	<EditText
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:inputType="textPersonName"
	android:ems="10"
	android:id="@+id/editText3"/>
	</TableRow>
	<TableRow
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center_horizontal">
	<Button
	android:text="Button"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/button"/>
	</TableRow>
	</TableLayout>
	</LinearLayout>

view raw TableLayout3.xml hosted with ❤ by GitHub

A differenza del primo esempio è stato aggiunta una terza riga contenente un pulsante posizionato al centro. Per fare questo bisogna inserire questa riga di codice all'interno del tag <TableRow come visualizzato nella riga 47 utilizzando l'attributo gravity="center_horizontal"

android:gravity="center_horizontal">

view raw TableLayout4.xml hosted with ❤ by GitHub

Download Project
Download file APK

---

ESEMPIO 3:

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout
	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:orientation="vertical"
	tools:context=".MainActivity">
	<TableLayout
	android:layout_height="match_parent"
	android:layout_width="match_parent" >
	<TableRow>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Nome:"
	android:width="120dp"/>
	<EditText
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:id="@+id/txtNome"
	android:width="200dp"/>
	</TableRow>
	<TableRow>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text="Cognome:"/>
	<EditText
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:id="@+id/txtCognome"/>
	</TableRow>
	<TableRow>
	<TextView
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:text=""/>
	<RadioGroup>
	<RadioButton
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/chkMaschio"
	android:text="Maschio"/>
	<RadioButton
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/chkFemmina"
	android:text="Femmina"/>
	</RadioGroup>
	</TableRow>
	<TableRow>
	<Button
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:id="@+id/buttonIscriviti"
	android:text="Iscriviti"/>
	</TableRow>
	</TableLayout>
	</LinearLayout>

view raw TableLayout5.xml hosted with ❤ by GitHub

In questo esempio sono state definite due colonne e quattro righe. Da notare la definizione di una TextView vuota nella terza riga (vedi riga da 36 a 39) per far si che i due RadioButton siano incolonnati a destra.