UI mit Ansichten entwickeln

Mit dem Layout-Editor können Sie schnell View-basierte Layouts erstellen. Dazu ziehen Sie UI-Elemente in einen visuellen Designeditor, anstatt Layout-XML-Code zu schreiben. Mit dem Designeditor können Sie eine Vorschau Ihres Layouts auf verschiedenen Android-Geräten und -Versionen ansehen. Außerdem können Sie die Größe des Layouts dynamisch anpassen, um sicherzustellen, dass es bei verschiedenen Bildschirmgrößen richtig funktioniert.

Der Layout-Editor ist besonders nützlich, wenn Sie ein Layout mit ConstraintLayout erstellen.

Diese Seite bietet einen Überblick über den Layout-Editor. Weitere Informationen zu den Layoutgrundlagen finden Sie unter Layouts.

Einführung in den Layout-Editor

Der Layout-Editor wird angezeigt, wenn Sie eine XML-Layoutdatei öffnen.

1. Palette: Enthält verschiedene Ansichten und Ansichtsgruppen, die Sie in Ihr Layout ziehen können.
2. Komponentenstruktur: Zeigt die Hierarchie der Komponenten in Ihrem Layout an.
3. Symbolleiste: enthält Schaltflächen, mit denen Sie die Darstellung des Layouts im Editor konfigurieren und Layoutattribute ändern können.
4. Designeditor: Hiermit können Sie Ihr Layout in der Designansicht, in der Entwurfsansicht oder in beiden bearbeiten.
5. Attribute: enthält Steuerelemente für die Attribute der ausgewählten Ansicht.
6. Ansichtsmodus: Hier können Sie sich Ihr Layout im Modus Code, , Teilen oder Design ansehen. Im Split-Modus werden die Code- und Design-Fenster gleichzeitig angezeigt.
7. Steuerelemente zum Zoomen und Schwenken: Damit lassen sich Vorschaugröße und -position im Editor festlegen.

Wenn Sie eine XML-Layoutdatei öffnen, wird standardmäßig der Designeditor geöffnet, wie in Abbildung 1 dargestellt. Klicken Sie zum Bearbeiten der Layout-XML im Texteditor oben rechts im Fenster auf die Schaltfläche Code . Die Bereiche Palette, Komponentenstruktur und Attribute sind beim Bearbeiten des Layouts in der Code-Ansicht nicht verfügbar.

Tipp:Wenn Sie zwischen Design- und Texteditoren wechseln möchten, drücken Sie Alt (Control unter macOS) plus Shift und den Rechts- oder Linkspfeil.

Vorschaudarstellung ändern

Mit den Schaltflächen in der obersten Zeile des Designeditors können Sie die Darstellung Ihres Layouts im Editor konfigurieren.

1. Design und Blueprint: Wählen Sie aus, wie Ihr Layout im Editor angezeigt werden soll. Sie können auch auf B drücken, um zwischen diesen Ansichtstypen zu wechseln.
   • Wählen Sie Design aus, um eine gerenderte Vorschau Ihres Layouts zu sehen.
   • Wählen Sie Entwurf aus, wenn für jede Ansicht nur eine Umrisse angezeigt werden soll.
   • Wählen Sie Design + Blueprint aus, um beide Ansichten nebeneinander zu sehen.
2. Bildschirmausrichtung und Layoutvarianten: Wählen Sie zwischen Quer- oder Hochformat oder anderen Bildschirmmodi aus, für die Ihre App alternative Layouts bietet, z. B. den Nachtmodus. Dieses Menü enthält auch Befehle zum Erstellen einer neuen Layoutvariante, wie in einem Abschnitt auf dieser Seite beschrieben. Du kannst auch auf der Tastatur den Buchstaben O drücken, um die Ausrichtung zu ändern.

3. System-UI-Modus: Wenn Sie in Ihrer App dynamische Farben aktiviert haben, können Sie die Hintergründe wechseln und sehen, wie Ihre Layouts auf den vom Nutzer ausgewählten Hintergrund reagieren. Hinweis: Sie müssen zuerst das Design in ein dynamisches Farbdesign Material und dann den Hintergrund ändern.

4. Gerätetyp und -größe: Wählen Sie den Gerätetyp (Smartphone/Tablet, Android TV oder Wear OS) und die Bildschirmkonfiguration (Größe und Dichte) aus. Sie können aus mehreren vorkonfigurierten Gerätetypen und Ihren eigenen AVD-Definitionen auswählen. Sie können auch einen neuen AVD erstellen, indem Sie in der Liste Gerätedefinition hinzufügen auswählen (siehe Abbildung 3).

   • Wenn Sie die Größe des Geräts ändern möchten, ziehen Sie die rechte untere Ecke des Layouts.
   • Drücken Sie D, um durch die Geräteliste zu blättern.

   Wenn du dein Layout mit den Referenzgeräten in diesem Menü testest, kann deine App gut für den Layoutstatus auf echten Geräten skalieren.

   

5. API-Version: Wählen Sie die Android-Version aus, um eine Vorschau Ihres Layouts anzuzeigen. Die Liste der verfügbaren Android-Versionen hängt davon ab, welche SDK-Plattformversionen Sie mit SDK Manager installiert haben.

6. App-Design: Wählen Sie aus, welches UI-Design auf die Vorschau angewendet werden soll. Dies funktioniert nur bei unterstützten Layoutstilen, weshalb viele Designs in dieser Liste zu einem Fehler führen.

7. Sprache: Wählen Sie die Sprache aus, die für Ihre UI-Strings angezeigt werden soll. In dieser Liste werden nur die in Ihren Stringressourcen verfügbaren Sprachen angezeigt. Wenn Sie die Übersetzungen bearbeiten möchten, klicken Sie im Menü auf Übersetzungen bearbeiten. Weitere Informationen zum Arbeiten mit Übersetzungen finden Sie unter UI mit dem Translations Editor lokalisieren.

Neues Layout erstellen

Wenn Sie ein neues Layout für Ihre App hinzufügen, müssen Sie zuerst eine Standardlayoutdatei im Standardverzeichnis layout/ Ihres Projekts erstellen, damit sie für alle Gerätekonfigurationen verwendet wird. Sobald Sie ein Standardlayout erstellt haben, können Sie für bestimmte Gerätekonfigurationen, z. B. für große Bildschirme, Layoutvarianten erstellen, wie in einem Abschnitt auf dieser Seite beschrieben.

Sie haben folgende Möglichkeiten, ein neues Layout zu erstellen:

Hauptmenü von Android Studio verwenden

1. Klicken Sie im Fenster Projekt auf das Modul, dem Sie ein Layout hinzufügen möchten.
2. Wählen Sie im Hauptmenü File > New > XML > Layout XML File aus.
3. Geben Sie im angezeigten Dialogfeld den Dateinamen, das Stamm-Layout-Tag und den Quellsatz an, zu dem das Layout gehört.
4. Klicken Sie auf Fertigstellen, um das Layout zu erstellen.

Projektansicht verwenden

1. Wählen Sie im Fenster Projekt die Ansicht Projekt aus.
2. Klicken Sie mit der rechten Maustaste auf das Layoutverzeichnis, dem Sie das Layout hinzufügen möchten.
3. Klicken Sie im angezeigten Kontextmenü auf Neu > Layoutressourcendatei.

Android-Ansicht verwenden

1. Wählen Sie im Fenster Projekt die Ansicht Android aus.
2. Klicken Sie mit der rechten Maustaste auf den Ordner layout.
3. Wählen Sie im angezeigten Kontextmenü Neu > Layout-Ressourcendatei aus.

Resource Manager verwenden

1. Wählen Sie in Resource Manager den Tab Layout aus.
2. Klicken Sie auf die Schaltfläche + und dann auf Layout-Ressourcendatei.

Layoutvarianten zur Optimierung für verschiedene Bildschirme verwenden

Eine Layoutvariante ist eine alternative Version eines vorhandenen Layouts, das für eine bestimmte Bildschirmgröße oder -ausrichtung optimiert ist.

Vorgeschlagene Layoutvariante verwenden

Android Studio bietet gängige Layoutvarianten, die Sie in Ihrem Projekt verwenden können. So verwenden Sie eine vorgeschlagene Layoutvariante:

1. Öffnen Sie Ihre Standardlayoutdatei.
2. Klicken Sie oben rechts im Fenster auf das Designsymbol .
3. Der Name der Layoutdatei wird im Drop-down-Menü Aktion zum Wechseln und Erstellen von Qualifier für Layoutdateien angezeigt. Öffne das Drop-down-Menü.
4. Wählen Sie in der Drop-down-Liste eine Variante aus, z. B. Querformatauswahl erstellen oder Tablet-Qualifier erstellen.

   

Ein neues Layoutverzeichnis wird erstellt.

Eigene Layoutvariante erstellen

So erstellen Sie eine eigene Layoutvariante:

1. Öffnen Sie Ihre Standardlayoutdatei.
2. Klicken Sie oben rechts im Fenster auf das Designsymbol .
3. Der Name der Layoutdatei wird im Drop-down-Menü Aktion zum Wechseln und Erstellen von Qualifier für Layoutdateien angezeigt. Öffne das Drop-down-Menü.

4. Wählen Sie aus der Drop-down-Liste Ressourcenqualifizierer hinzufügen aus. (siehe Abbildung 4 oben).

   Das Dialogfeld Ressourcenverzeichnis auswählen wird angezeigt.

5. Definieren Sie im Dialogfeld Ressourcenverzeichnis auswählen die Ressourcenqualifizierer für die Variante:

   1. Wählen Sie in der Liste Verfügbare Qualifier einen Qualifier aus.
   2. Klicken Sie auf die Schaltfläche Hinzufügen .
   3. Geben Sie alle erforderlichen Werte ein.
   4. Wiederholen Sie diese Schritte, um weitere Qualifier hinzuzufügen.

6. Nachdem Sie alle Qualifier hinzugefügt haben, klicken Sie auf OK.

Wenn Sie mehrere Varianten desselben Layouts haben, können Sie zwischen ihnen wechseln, indem Sie eine Variante aus dem Drop-down-Menü Aktion zum Wechseln und Erstellen von Qualifier für Layoutdateien auswählen.

Weitere Informationen zum Erstellen von Layouts für verschiedene Bildschirme findest du unter Unterstützung verschiedener Bildschirmgrößen.

Ansicht oder Layout konvertieren

Sie können eine Ansicht in eine andere Ansicht und ein Layout in eine andere Art von Layout konvertieren:

1. Klicken Sie oben rechts im Editorfenster auf die Schaltfläche Design.
2. Klicken Sie in der Komponentenstruktur mit der rechten Maustaste auf die Ansicht oder das Layout und dann auf Ansicht konvertieren.
3. Wählen Sie im angezeigten Dialogfeld die neue Art der Ansicht oder das neue Layout aus und klicken Sie dann auf Anwenden.

Layout in ConstraintLayout konvertieren

Konvertieren Sie ältere Layouts in das Format ConstraintLayout, um die Layoutleistung zu verbessern. ConstraintLayout verwendet ein einschränkungsbasiertes Layoutsystem, mit dem Sie die meisten Layouts ohne verschachtelte Ansichtsgruppen erstellen können.

So konvertieren Sie ein vorhandenes Layout in ein ConstraintLayout:

1. Öffnen Sie ein vorhandenes Layout in Android Studio.
2. Klicken Sie oben rechts im Editorfenster auf das Designsymbol .
3. Klicken Sie in der Komponentenstruktur mit der rechten Maustaste auf das Layout und dann auf your-layout-type in ConstraintLayout konvertieren.

Weitere Informationen zu ConstraintLayout finden Sie unter Responsive UI mit ConstraintLayout erstellen.

Elemente in der Palette suchen

Um nach einer Ansicht oder Ansichtsgruppe anhand des Namens in der Palette zu suchen, klicken Sie oben in der Palette auf die Schaltfläche Suchen . Alternativ kannst du den Namen des Elements eingeben, wenn das Fenster Palette hervorgehoben ist.

Auf der Palette finden Sie häufig verwendete Elemente in der Kategorie Common. Um dieser Kategorie ein Element hinzuzufügen, klicken Sie mit der rechten Maustaste auf eine Ansicht oder Ansichtsgruppe in der Palette und klicken Sie dann im Kontextmenü auf Favorit.

Dokumentation über die Palette öffnen

Wählen Sie zum Öffnen der Android Developers-Referenzdokumentation für eine Ansicht oder Ansichtsgruppe das UI-Element in der Palette aus und drücken Sie Shift+F1.

Wenn du die Materialrichtlinien-Dokumentation für eine Ansicht oder Ansichtsgruppe aufrufen möchtest, klicke in der Palette mit der rechten Maustaste auf das UI-Element und wähle im Kontextmenü Material Guidelines aus. Wenn kein bestimmter Eintrag für das Element vorhanden ist, öffnet der Befehl die Startseite der Dokumentation zu den Materialrichtlinien.

Ansichten zum Layout hinzufügen

Zum Erstellen Ihres Layouts ziehen Sie Ansichten und Ansichtsgruppen von der Palette in den Designeditor. Wenn Sie eine Ansicht in das Layout einfügen, zeigt der Editor Informationen über die Beziehung der Ansicht zum Rest des Layouts an.

Wenn Sie ConstraintLayout verwenden, können Sie mit den Funktionen für Ableitungseinschränkungen und automatische Verbindung Einschränkungen automatisch erstellen.

Ansichtsattribute bearbeiten

Sie können Ansichtsattribute über das Steuerfeld Attribute des Layout-Editors bearbeiten. Dieses Fenster ist nur verfügbar, wenn der Designeditor geöffnet ist. Rufen Sie Ihr Layout daher entweder im Modus Design oder Split auf, um es zu verwenden.

Wenn Sie eine Ansicht auswählen, sei es durch Klicken in der Komponentenstruktur oder im Designeditor, wird im Bereich Attribute Folgendes angezeigt (siehe Abbildung 5):

1. Deklarierte Attribute: Listet die in der Layoutdatei angegebenen Attribute auf. Um ein Attribut hinzuzufügen, klicken Sie oben im Abschnitt auf die Schaltfläche Hinzufügen .
2. Layout: Enthält Steuerelemente für die Breite und Höhe der Ansicht. Wenn sich die Ansicht in einer ConstraintLayout befindet, zeigt dieser Abschnitt auch die Einschränkungsverzerrung an und listet die Einschränkungen auf, die in der Ansicht verwendet werden. Weitere Informationen zum Festlegen der Größe von Ansichten mit ConstraintLayout finden Sie unter Ansichtsgröße anpassen.
3. Allgemeine Attribute: Listet allgemeine Attribute für die ausgewählte Ansicht auf. Maximieren Sie unten im Fenster den Abschnitt Alle Attribute, um alle verfügbaren Attribute zu sehen.
4. Suche: Damit können Sie nach einem bestimmten Ansichtsattribut suchen.

5. Die Symbole rechts neben jedem Attributwert geben an, ob die Attributwerte Ressourcenverweise sind. Diese Indikatoren sind durchgehend , wenn der Wert ein Ressourcenverweis ist, und ein leeres , wenn der Wert hartcodiert ist. So können Sie hartcodierte Werte auf einen Blick erkennen.

   Klicken Sie auf Indikatoren in beiden Status, um das Dialogfeld Ressourcen zu öffnen. Dort können Sie eine Ressourcenreferenz für das entsprechende Attribut auswählen.

6. Eine rote Markierung um einen Attributwert herum weist auf einen Fehler bei dem Wert hin. Ein Fehler kann beispielsweise auf einen ungültigen Eintrag für ein Layout-definierendes Attribut hinweisen.

   Wenn der Wert orange ist, wird eine Warnung angezeigt. Beispielsweise kann eine Warnung angezeigt werden, wenn Sie einen hartcodierten Wert verwenden, bei dem ein Ressourcenverweis erwartet wird.

Beispieldaten zur Datenansicht hinzufügen

Da viele Android-Layouts auf Laufzeitdaten basieren, kann es beim Entwerfen der App schwierig sein, das Erscheinungsbild eines Layouts zu visualisieren. Über den Layout-Editor können Sie einem TextView, einem ImageView oder einem RecyclerView Beispielvorschaudaten hinzufügen.

Klicken Sie zum Aufrufen des Fensters Design-Time View Attributes mit der rechten Maustaste auf einen dieser Ansichtstypen und wählen Sie Set Sample Data (Beispieldaten festlegen) aus (siehe Abbildung 6).

Für ein TextView können Sie zwischen verschiedenen Beispieltextkategorien wählen. Wenn Sie Beispieltext verwenden, füllt Android Studio das text-Attribut von TextView mit den ausgewählten Beispieldaten. Beachten Sie, dass Sie nur dann Beispieltext über das Fenster Design-Time View Attributes auswählen können, wenn das Attribut text leer ist.

Für ein ImageView können Sie zwischen verschiedenen Beispielbildern wählen. Wenn Sie ein Beispielbild auswählen, füllt Android Studio das Attribut tools:src von ImageView (oder tools:srcCompat bei Verwendung von AndroidX) aus.

Für eine RecyclerView können Sie aus einer Reihe von Vorlagen auswählen, die Beispielbilder und -texte enthalten. Wenn Sie diese Vorlagen verwenden, fügt Android Studio Ihrem res/layout-Verzeichnis recycler_view_item.xml eine Datei hinzu, die das Layout für die Beispieldaten enthält. In Android Studio werden dem RecyclerView außerdem Metadaten hinzugefügt, damit die Beispieldaten korrekt angezeigt werden.

Layoutwarnungen und -fehler anzeigen

Im Layout-Editor werden Sie über Layoutprobleme neben der entsprechenden Ansicht in der Komponentenstruktur informiert. Dazu wird ein rotes, kreisförmiges Ausrufezeichen für Fehler oder ein orangefarbenes, dreieckiges Ausrufezeichen für Warnungen verwendet. Klicken Sie auf das Symbol, um weitere Details zu sehen.

Wenn Sie alle bekannten Probleme in einem Fenster unter dem Editor sehen möchten, klicken Sie in der Symbolleiste auf Warnungen und Fehler anzeigen ( oder ).

Schriftarten herunterladen und auf Text anwenden

Wenn Sie Android 8.0 (API-Level 26) oder die Jetpack Core-Bibliothek verwenden, können Sie so aus Hunderten von Schriftarten auswählen:

1. Klicken Sie im Layout-Editor auf das Symbol Design , um das Layout im Designeditor aufzurufen.
2. Wählen Sie eine Textansicht aus.
3. Maximieren Sie im Bereich Attribute den Bereich textAppearance und dann das Feld fontFamily.
4. Scrollen Sie zum Ende der Liste und klicken Sie auf Weitere Schriftarten, um das Dialogfeld Ressourcen zu öffnen.
5. Wählen Sie im Dialogfeld Ressourcen eine Schriftart in der Liste aus oder geben Sie oben in der Suchleiste eine Schriftart ein. Wenn Sie unter Herunterladbare Schriftart eine Schriftart auswählen, können Sie entweder auf Herunterladbare Schriftart erstellen klicken, um die Schriftart zur Laufzeit als herunterladbare Schriftart zu laden, oder auf Schriftart zum Projekt hinzufügen klicken, um die TTF-Schriftartdatei in Ihr APK zu packen. Die unter Android aufgeführten Schriftarten werden vom Android-System bereitgestellt. Sie müssen also nicht heruntergeladen oder in Ihr APK gebündelt werden.
6. Klicken Sie abschließend auf OK.

Layoutvalidierung

Die Layout Validation ist ein visuelles Tool, mit dem Sie Layouts für verschiedene Geräte und Anzeigekonfigurationen gleichzeitig in der Vorschau anzeigen können. So lassen sich Probleme in Ihren Layouts früher erkennen. Klicken Sie rechts oben im IDE-Fenster auf den Tab Layoutvalidierung, um auf diese Funktion zuzugreifen:

Abbildung 10: Tab „Layoutvalidierung“.

Wenn Sie zwischen den verfügbaren Konfigurationssätzen wechseln möchten, wählen Sie oben im Fenster "Layout Validation" (Layoutvalidierung) im Drop-down-Menü Referenzgeräte eine der folgenden Optionen aus:

• Referenzgeräte
• Benutzerdefiniert
• Farbenblind
• Schriftgrößen

Abbildung 11. auf das Drop-down-Menü „Referenzgeräte“.

Referenzgeräte

Referenzgeräte sind eine Reihe von Geräten, mit denen wir dir empfehlen. Dazu gehören Smartphones, faltbare Smartphones, Tablets und Computer. In der Vorschau siehst du, wie dein Layout auf diesen Referenzgeräten aussieht:

Abbildung 12: Verweisen Sie auf Gerätevorschauen im Layout Validation Tool.

Benutzerdefiniert

Um eine Anzeigekonfiguration für die Vorschau anzupassen, wählen Sie aus verschiedenen Einstellungen wie Sprache, Gerät oder Bildschirmausrichtung aus:

Abbildung 16: Konfigurieren Sie eine benutzerdefinierte Anzeige im Tool zur Layoutvalidierung.

Farbenblind

Validieren Sie Ihr Layout mit Simulationen gängiger Arten von Farbenblindheit, um die Barrierefreiheit Ihrer Anwendung für farbenblinde Nutzer zu verbessern:

Abbildung 13: Vorschauen von Simulationen der Farbenblindheit im Tool Layout Validation

Schriftgrößen

Validieren Sie Ihre Layouts in verschiedenen Schriftgrößen und verbessern Sie die Barrierefreiheit Ihrer App für sehbehinderte Nutzer, indem Sie Ihre Layouts mit größeren Schriftarten testen:

Abbildung 14: Vorschau mit variabler Schriftgröße im Tool Layout Validation