Layout

Das automatisch responsive Android-AR-Framework passt App-Layouts an die Bildschirmgröße von Autos an.

Die Benutzeroberfläche und die Funktionen der App, z. B. Medienwiedergabe und Wiedergabe, werden in Android Auto – kompatiblen Autos für Apps, die vom Smartphone eines Nutzers projiziert werden – automatisch angepasst.

Übersicht

  • Layouts werden an bestimmten Haltepunkten an die Bildschirmgröße angepasst
  • Abstand mit 8-dp-Schritten anwenden
  • 12 dp sparsam platzieren

Layout bestimmen

Das AR-Framework von Android Auto verwendet adaptives und responsives Design:

  • Für den linken und rechten Rand wird das responsive Design verwendet (die genaue Bildschirmgröße bestimmt das Layout).
  • Für das Layout wird das adaptive Design verwendet, bei dem die Höhe und Breite des Bildschirms bestimmt werden.

Das Layout wird mithilfe von Messungen bestimmt, die als Haltepunkte bezeichnet werden. Haltepunkte sind strategisch definierte Messungen von Bildschirmhöhe und -breite, mit denen festgelegt wird, wann ein bestimmtes Layout angezeigt wird. Das Layout wird für jeden Haltepunktbereich an die Bildschirmgröße und -ausrichtung angepasst.

Adaptive Haltepunktanimation

Adaptiv

Beim adaptiven Design wird mithilfe von Haltepunkten das Layout eines Bildschirms bestimmt. Für einen definierten Bereich von Bildschirmgrößen (z. B. mit einer Breite von weniger als 1.280 dp) wird ein bestimmtes Layout angezeigt.
Animation des responsiven Haltepunkts

Responsive Anzeigen

Beim responsiven Webdesign wird das Layout an die jeweilige Bildschirmgröße angepasst. Die Komponenten haben flexible Bereiche, die auf die jeweilige Bildschirmgröße maximiert oder verkleinert werden können.

Adaptive Haltepunkte

Android Auto nutzt adaptive Haltepunkte, um das Bildschirmlayout zu bestimmen. Diese werden anhand der Größe des App-Fensters und nicht anhand des gesamten Bildschirms berechnet.

Haltepunkte auf verschiedenen Bildschirmgrößen
Adaptive Haltepunkte auf schmalen Bildschirmgrößen (0–600 dp), Standard (600–930 dp), breit (930–1.280 dp) und extrabreit (1.280 dp)

Responsive Margen

Android Auto verwendet je nach Größe des gesamten Autodisplays responsive Ränder. Der linke und rechte Rand passen sich an 12% der Bildschirmbreite an und enthalten in der Regel Bildlaufleisten und Steuerelemente für die Navigation. Der verbleibende Bildschirmbereich, der sogenannte App-Canvas, enthält App-Inhalte.

Der rechte Rand kann bei kleineren Bildschirmen entfernt werden, um mehr Platz zu schaffen. Die App kann von der App als sekundärer Bereich für zusätzliche Informationen genutzt werden.

Animation für responsive Ränder
Bei responsiven Rändern wird ihre Breite an die Größe des Bildschirms angepasst.

Das Layoutraster

In Android Auto-Layouts werden UI-Elemente auf einem 8-dp-Raster ausgerichtet, wobei einige kleinere Komponenten auf ein 4dp-Raster ausgerichtet sind.

Abstand

Der Abstand bezieht sich auf den Abstand zwischen UI-Elementen. Die Abstände des Android Auto-Abstands werden auf ein Vielfaches von 8 dp bis zu einer Abstände von 96 dp angewendet. Größere Abstände sollten ebenfalls ein Vielfaches von 8 dp sein.

In dieser Tabelle sind die typischen Werte für die Abstände aufgeführt, die in der automatischen UI angezeigt werden. Größenschritte werden in aufsteigender Reihenfolge aufgelistet, gekennzeichnet durch Labels, die mit dem Buchstaben „P“ beginnen:

P0 P1 P2 P3 P4 P5 P6 P7 P8
4dp 8dp 12dp 16dp 24dp 32dp 48dp 64dp 96dp
Werte in einem Layout auffüllen
In diesem Layout werden die Werte für die Abstände in der Tabelle oben durch P1, P3 und P5 dargestellt.

Abstand für kleinere Komponenten

Für eine bessere Ausrichtung und ausreichenden Abstand können kleinere Komponenten sparsam einen Abstand von 12 dp verwenden.

Werte in einer Komponente auffüllen
In diesem Widget verwenden Elemente die Abstände von P2, P3, P4 und P5 in der Tabelle oben.

Keylines

Keylines sind Messwerte, mit denen eine Benutzeroberfläche organisiert wird. Sie zeigen, wo Elemente und Komponenten horizontal in einem Layout (entlang der x-Achse) platziert werden müssen. Sie sind mit Labels gekennzeichnet, die mit dem Buchstaben „KL."

Keylines können an einer beliebigen Stelle in einem Layout platziert werden. Sie können verwendet werden, um den Abstand zwischen zwei vertikalen Rändern (der Elemente, Komponenten oder des Bildschirms selbst) anzugeben. Die Komponenten und Elemente sind am linken oder rechten Rand an der nächstgelegenen Keyline ausgerichtet.

Keylines innerhalb einer Komponente
In dieser Komponente gleicht KL0 alle Listensymbole und Texte in einem einheitlichen Abstand zueinander aus. Mit KL1 werden alle Listenelemente am linken und rechten Rand der Komponente ausgerichtet.

Mit Keylines messen

Die Keylines ändern sich je nach Bildschirmbreite und ermöglichen es UI-Elementen, ihre Position auf verschiedenen Bildschirmgrößen einheitlich zu skalieren.

Die folgenden Keylines werden für einen Bereich von Bildschirmgrößen empfohlen, gekennzeichnet durch die mit „KL(n)" gekennzeichneten Labels. Sie werden in der Reihenfolge angezeigt, in der die Schlüsselzeile größer wird:

KL(n) Schmale Bildschirme
(0–600 dp)		 Standardbildschirme
(600–930 dp)		 Breitbild
(930–1280 dp)		 Extrabreiter Bildschirm
(1.280 dp+)
KL0 16dp 24dp 24dp 32dp
KL1 24dp 32dp 32dp 48dp
KL2 96dp 112dp 112dp –
KL3 112dp 128dp 128dp 152dp
KL4 148dp 168dp 168dp –