Die Android Layout Klassen dienen zur Anordnung von Steuerelementen. Das folgende Kapitel liefert einen Überblick zu den zur Verfügung stehenden Layouts, deren Anwendungsfällen und wichtigsten Parametern.

Die verschiedenen Layouts können beliebig geschachtelt werden. Beim Erzeugen der Benutzerschnittstelle wird zur Laufzeit aus der Layout XML Datei eine Java Klasse erstellt. Da dieser Vorgang sehr rechen- und speicherintensiv ist, sollte die Benutzerschnittstelle so flach wie möglich gehalten werden.

Android LinearLayout:

Ordnet die eingebetteten Steuerelemente entweder horizontal (nebeneinander) oder vertikal (untereinander) an. Die Ausrichtung wird über den XML Parameter android:orientation festgelegt. Mögliche Werte sind horizontal und vertical. Fehlt android:orientation, wird horizontal verwendet.

Über die Parameter android:layout_width=“0dp“ und android:layout_weight=“1″ kann die Breite eingebetteter Elemente relativ zueinander festgelegt werden. Ein Steuerelement mit dem Wert android:layout_weight=“2″  erscheint dann doppelt so breit wie ein Steuerelement mit dem Wert android:layout_weight=“1″. Hierzu ein Beispiel:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >
 
        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="Button1" />
 
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button2" />
 
    </LinearLayout>
 
    <Button
        android:id="@+id/button3"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Button3" />
 
</LinearLayout>

Das Ergebnis der beiden geschachtelten LinearLayout sieht wie folgt aus:

Eine Android Layout Beispiel App mit zwei verschachtelten Android LinearLayout.

Android RelativeLayout

Positioniert die eingebetteten Steuerelemente relativ zueinander. Die Position und Anordnung der eingebetteten Element kann unter anderem mit den folgenden Parametern beeinflusst werden:

       
        android:layout_above
        android:layout_below
        android:layout_toLeftOf
        android:layout_toRightOf
        
        android:layout_alignLeft
        android:layout_alignTop
        android:layout_alignRight
        android:layout_alignBottom

Hierzu ein Beispiel:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Button1" />
 
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button1"
        android:layout_toRightOf="@+id/button1"
        android:text="Button2" />
 
    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button2"
        android:layout_below="@+id/button1"
        android:text="Button3" />
 
    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button1"
        android:layout_toLeftOf="@+id/button1"
        android:text="Button4" />
 
    <Button
        android:id="@+id/button5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button1"
        android:layout_toLeftOf="@+id/button1"
        android:text="Button5" />
 
</RelativeLayout>

Der folgende Screenshot stammt aus dem obigen RelativeLayout:

Eine Android Layout Beispiel App mit relativer Positionierung der Steuerelemente mittels der Android RelativeLayout Klasse.

Android TableLayout

Das TableLayout ähnelt einer HTML Tabelle und gruppiert die eingebetteten Steuerelemente innerhalb der Elemente vom Typ TableRow. Wie auch bei LinearLayouts kann über die Parameter android:layout_width und android:layout_weight die Größe der in einer TableRow eingebetteten Steuerelemente relativ zueinander festgelegt werden. Hierzu ein Beispiel:

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <TableRow
        android:id="@+id/tableRow1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >
 
        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />
 
        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="2"
            android:text="Button" />
 
    </TableRow>
</TableLayout>

Die Ausgabe des TableLayout sieht wie folgt aus:

Die Android TableLayout Beispiel-App 

Android GridLayout

In einem GridLayout werden die eingebetteten Elemente auf einem Raster positioniert, wobei sich ein Steuerelement über mehrere Zeilen und Spalten erstrecken kann. Beispiel:

<GridLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:columnCount="3" >
 
   <Button
        android:id="@+id/button1"
        android:layout_column="0"
        android:layout_gravity="left|top"
        android:layout_row="0"
        android:text="Button1" />
     
    <Button
        android:id="@+id/button2"
        android:layout_column="1"
        android:layout_gravity="left|top"
        android:layout_row="0"
        android:text="Button2" />
 
    <Button
        android:id="@+id/button3"
        android:layout_column="2"
        android:layout_gravity="fill_vertical"
        android:layout_row="0"
        android:layout_rowSpan="2"
        android:text="Button3" />
 
    <Button
        android:id="@+id/button4"
        android:layout_column="0"
        android:layout_columnSpan="2"
        android:layout_gravity="fill_horizontal"
        android:layout_row="1"
        android:text="Button4" />
</GridLayout>

Die aus der XML Datei generierte Benutzerschnittstelle sieht so aus:

Die Android GridLayout Beispiel-App.

Android FrameLayout

In einem FrameLayout werden die eingebetteten Elemente übereinander angezeigt. Im Programmcode können dann verschiedene Steuerelemente abhängig von der Benutzereingabe angezeigt oder ausgeblendet werden. Hier ein Beispiel eines FrameLayout:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:text="Button" />
    </RelativeLayout>
</FrameLayout>

Das obige FrameLayout führt zu folgender Ausgabe:

Android FrameLayout Demo-App.

Häufig verwendete Layout-Parameter:

Zu den am häufigsten verwendeten Parametern zählen:

  • android:layout_width und android:layout_height. Diese dienen zur Größenangabe von Layouts und deren Steuerelementen. Mehr dazu im gleich folgendem Abschnitt über Größenangaben.
  • Der XML Parameter android:gravity konfiguriert die Ausrichtung der eingebetteten Steuerelemente. Beispiel:
    android:gravity="bottom|right"

    Dadurch werden Kind-Elemente in der rechten unteren Ecke positioniert.

  • Über den Parameter android:singleLine=“true“ kann ein Zeilenumbruch innerhalb eines Steuerelementes verhindert werden.

Größenangaben:

Die beiden XML Parameter layout_width und layout_height, die zum Festlegen der Breite bzw. Höhe dienen, müssen für jedes Element gesetzt werden. Beispiel:

android:layout_width="match_parent"
android:layout_height="wrap_content"

Der Wert match_parent weist einem Steuerelement die gleich Breite bzw. Höhe wie dessen übergeordnetem Element zu. Mit wrap_content wird einem Steuerelement die minimale Größe, die zur Anzeige benötigt wird, zugewiesen.

Alternativ kann die Breite und Höhe eines Steuerelements auch in Pixel angegeben werden:

android:layout_width="128dp"
android:layout_width="128dip"
android:layout_width="128sp"
  •  128dp ist gleichbedeutend 128dip (Density-independent Pixels) Beide weisen eine Größe von 128 Geräte-unabhängigen Pixeln zu, wodurch das Layout auf Geräten mit unterschiedlichen Bildschirmauflösungen und Pixeldichten sehr ähnlich erscheint.
  • 128sp (Scale-independent Pixels), ähnlich wie dp/dip, wobei zusätzlich die Benutzereinstellungen zur Schriftgrößenskalierung mit einberechnet werden. Die Einheit sp wird hauptsächlich für Text verwendet.

Des Weiteren stehen noch die absoluten Einheiten px (Pixel), mm (Millimeter) und in (Inch/Zoll) zur Verfügung. Aufgrund der Vielzahl unterschiedlicher Bildschirmauflösungen und Pixeldichten sollte die Verwendung von absoluten Größen so weit wie möglich vermieden werden!

Links zur Dokumentation der Android Layout Klassen (Englisch)

Android LinearLayout
Android RelativeLayout
Android TableLayout
Android GridLayout
Android FrameLayout