UI mit Ansichten entwickeln

Jetpack Compose-Implementierung

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

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

Auf dieser Seite finden Sie eine Übersicht über den Layout-Editor. Weitere Informationen zu den Grundlagen von Layouts finden Sie unter Layouts.

Einführung in den Layout-Editor

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

Abbildung 1 Der Layout-Editor.

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.
3. Symbolleiste: Enthält Schaltflächen, mit denen Sie die Darstellung Ihres Layouts im Editor konfigurieren und Layoutattribute ändern können.
4. Design-Editor: Hier können Sie Ihr Layout in der Designansicht, der Blaupausenansicht oder in beiden Ansichten bearbeiten.
5. Attribute: Enthält Steuerelemente für die Attribute der ausgewählten Ansicht.
6. Ansichtsmodus: Hier können Sie Ihr Layout im Modus Code , Geteilt oder Design ansehen. Im Modus Geteilt werden die Fenster Code und Design gleichzeitig angezeigt.
7. Steuerelemente für Zoomen und Schwenken: Hier können Sie die Größe und Position der Vorschau im Editor steuern.

Wenn Sie eine XML-Layoutdatei öffnen, wird standardmäßig der Design-Editor geöffnet, wie in Abbildung 1 dargestellt. Wenn Sie die Layout-XML im Texteditor bearbeiten möchten, klicken Sie rechts oben im Fenster auf die Schaltfläche Code . Beachten Sie, dass die Bereiche Palette, Komponentenstruktur und Attribute nicht verfügbar sind, wenn Sie Ihr Layout in der Codeansicht bearbeiten.

Tipp: Drücken Sie Alt (Control unter macOS) + Shift und die Pfeiltaste nach rechts oder links, um zwischen dem Design- und dem Texteditor zu wechseln.

Darstellung der Vorschau ändern

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

Abbildung 2. Schaltflächen in der Symbolleiste des Layout-Editors, mit denen Sie die Darstellung des Layouts konfigurieren können.

1. Design und Blaupause: Wählen Sie aus, wie Ihr Layout im Editor angezeigt werden soll. Sie können auch 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 Blaupause aus, um nur die Umrisse der einzelnen Ansichten zu sehen.
   • Wählen Sie Design + Blaupause aus, um beide Ansichten nebeneinander zu sehen.
2. Bildschirmausrichtung und Layoutvarianten: Wählen Sie zwischen der Bildschirmausrichtung im 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. Sie können auch die Taste O auf Ihrer Tastatur drücken, um die Ausrichtung zu ändern.

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

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. Außerdem können Sie einen neuen AVD erstellen, indem Sie in der Liste Gerätedefinition hinzufügen auswählen, wie in Abbildung 3 dargestellt.

   • 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 wechseln.

   Wenn Sie Ihr Layout mit den Referenzgeräten in diesem Menü testen, lässt sich die Größe Ihrer App gut an Layoutzustände auf echten Geräten anpassen.

   

   Abbildung 3 Die Geräteliste mit Referenzgeräten.

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

6. App-Design: Wählen Sie aus, welches UI-Design auf die Vorschau angewendet werden soll. Das funktioniert nur für unterstützte Layoutstile. Viele Designs in dieser Liste führen daher zu einem Fehler.

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

Hinweis: Sofern Sie keine neue Layoutdatei unter Layout varianten hinzufügen, haben diese Konfigurationen keine Auswirkungen auf den Code oder das Manifest Ihrer App. Sie wirken sich nur auf die Layoutvorschau aus.

Neues Layout erstellen

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

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ü Datei > Neu > XML > Layout-XML-Datei aus.
3. Geben Sie im angezeigten Dialogfeld den Dateinamen, das Root-Layout-Tag und das Source-Set an, zu dem das Layout gehört.
4. Klicken Sie auf Fertig , 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 Kontextmenü auf Neu > Layout-Ressourcendatei.

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. Klicken Sie im Kontextmenü auf Neu > Layout-Ressourcendatei.

Resource Manager verwenden

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

Layoutvarianten verwenden, um für verschiedene Bildschirme zu optimieren

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

Vorgeschlagene Layoutvariante verwenden

Android Studio enthält 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 rechts oben im Fenster auf das Symbol Design .
3. Der Name der Layoutdatei wird im Drop-down-Menü Aktion zum Wechseln und Erstellen von Qualifizierern für Layoutdateien angezeigt. Öffnen Sie das Drop-down-Menü.
4. Wählen Sie in der Drop-down-Liste eine Variante aus, z. B. Querformat-Qualifizierer erstellen oder Tablet-Qualifizierer erstellen.

   

   Abbildung 4 Drop-down-Liste der Layoutqualifizierer.

Ein neues Layoutverzeichnis wird erstellt.

Eigene Layoutvariante erstellen

So erstellen Sie eine eigene Layoutvariante:

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

4. Wählen Sie in 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 einen Qualifizierer aus der Liste Verfügbare Qualifizierer aus.
   2. Klicken Sie auf die Schaltfläche Hinzufügen .
   3. Geben Sie alle erforderlichen Werte ein.
   4. Wiederholen Sie diese Schritte, um weitere Qualifizierer hinzuzufügen.

6. Wenn Sie alle Qualifizierer hinzugefügt haben, klicken Sie auf OK.

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

Weitere Informationen zum Erstellen von Layouts für verschiedene Displays finden Sie unter Verschiedene Displaygrößen unterstützen.

Ansicht oder Layout konvertieren

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

1. Klicken Sie rechts oben 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 den neuen Ansichts- oder Layouttyp aus und klicken Sie dann auf Anwenden.

Layout in ConstraintLayout konvertieren

Um die Layoutleistung zu verbessern, konvertieren Sie ältere Layouts in ConstraintLayout. 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 rechts oben im Editorfenster auf das Symbol Design .
3. Klicken Sie in der Komponentenstruktur mit der rechten Maustaste auf das Layout und dann auf in ConstraintLayout konvertieren.your-layout-type

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

Elemente in der Palette suchen

Wenn Sie in der Palette nach einer Ansicht oder Ansichtsgruppe suchen möchten, klicken Sie oben in der Palette auf die Schaltfläche Suchen . Alternativ können Sie den Namen des Elements eingeben, wenn das Fenster Palette den Fokus hat.

In der Palette finden Sie häufig verwendete Elemente in der Allgemein Kategorie. Wenn Sie ein Element zu dieser Kategorie hinzufügen möchten, klicken Sie in der Palette mit der rechten Maustaste auf eine Ansicht oder Ansichtsgruppe und dann im Kontextmenü auf Favorit.

Dokumentation über die Palette öffnen

Wenn Sie die Referenzdokumentation für Android-Entwickler für eine Ansicht oder eine Gruppe anzeigen öffnen möchten, wählen Sie das UI-Element in der Palette aus und drücken Sie Shift+F1.

Wenn Sie die Dokumentation zu den Material-Richtlinien für eine Ansicht oder Ansichtsgruppe aufrufen möchten, klicken Sie in der Palette mit der rechten Maustaste auf das UI-Element und wählen Sie im Kontextmenü Material-Richtlinien aus. Wenn kein bestimmter Eintrag für das Element vorhanden ist, wird mit dem Befehl die Startseite der Material Guidelines documentation geöffnet.

Ansichten zum Layout hinzufügen

Wenn Sie mit der Erstellung Ihres Layouts beginnen möchten, ziehen Sie Ansichten und Ansichtsgruppen aus der Palette in den Design-Editor. Wenn Sie eine Ansicht im Layout platzieren, werden im Editor Informationen zur Beziehung der Ansicht zum Rest des Layouts angezeigt.

Wenn Sie ConstraintLayout verwenden, können Sie mit den Funktionen „Einschränkungen ableiten“ und „Automatisch verbinden“ automatisch Einschränkungen erstellen.

Ansichtsattribute bearbeiten

Abbildung 5 Der Bereich Attribute.

Sie können Ansichtsattribute im Bereich Attribute im Layout-Editor bearbeiten. Dieses Fenster ist nur verfügbar, wenn der Design-Editor geöffnet ist. Sie müssen Ihr Layout also im Modus Design oder Geteilt ansehen, um es verwenden zu können.

Wenn Sie eine Ansicht auswählen, entweder durch Klicken auf die Ansicht in der Komponentenstruktur oder im Design-Editor, werden im Bereich Attribute die folgenden Informationen angezeigt (siehe Abbildung 5):

1. Deklarierte Attribute: Hier werden die in der Layoutdatei angegebenen Attribute aufgeführt. Wenn Sie ein Attribut hinzufügen möchten, klicken Sie oben im Bereich 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 einem ConstraintLayout befindet, werden in diesem Bereich auch die Einschränkungsvoreingenommenheit und die Einschränkungen aufgeführt, die von der Ansicht verwendet werden. Weitere Informationen zum Steuern der Größe von Ansichten mit ConstraintLayout finden Sie unter Größe der Ansicht anpassen.
3. Allgemeine Attribute: Hier werden allgemeine Attribute für die ausgewählte Ansicht aufgeführt. Wenn Sie alle verfügbaren Attribute sehen möchten, maximieren Sie unten im Fenster den Bereich Alle Attribute.
4. Suchen: Hier können Sie nach einem bestimmten Ansichtsattribut suchen.

5. Die Symbole rechts neben den einzelnen Attributwerten geben an, ob es sich bei den Attributwerten um Ressourcenverweise handelt. Diese Symbole sind ausgefüllt , wenn der Wert ein Ressourcenverweis ist und leer , wenn der Wert fest codiert ist. So können Sie fest codierte Werte auf einen Blick erkennen.

   Klicken Sie auf die Symbole in einem der beiden Zustände, um das Dialogfeld Ressourcen zu öffnen. Dort können Sie einen Ressourcenverweis für das entsprechende Attribut auswählen.

6. Eine rote Markierung um einen Attributwert weist auf einen Fehler mit dem Wert hin. Ein Fehler kann beispielsweise auf eine ungültige Eingabe für ein Layout definierendes Attribut hindeuten.

   Eine orangefarbene Markierung weist auf eine Warnung für den Wert hin. Eine Warnung kann beispielsweise angezeigt werden, wenn Sie einen fest codierten Wert verwenden, obwohl ein Ressourcenverweis erwartet wird.

Beispieldaten zur Ansicht hinzufügen

Da viele Android-Layouts auf Laufzeitdaten basieren, kann es schwierig sein, sich das Aussehen eines Layouts vorzustellen, während Sie Ihre App entwerfen. Sie können einem TextView, einem ImageView oder einem RecyclerView im Layout-Editor Beispieldaten für die Vorschau hinzufügen.

Hinweis: Wenn Sie einer View Beispieldaten hinzufügen, nimmt Android Studio Änderungen an Ihrem Projekt vor, als würden Sie Ihre eigenen Daten verwenden. Sie können diese Änderungen dann nach Bedarf anpassen.

Wenn Sie das Fenster Ansichtsattribute zur Designzeit aufrufen möchten, klicken Sie mit der rechten Maustaste auf einen dieser Ansichtstypen und wählen Sie Beispieldaten festlegen aus, wie in Abbildung 6 dargestellt.

Abbildung 6. Das Fenster Ansichtsattribute zur Designzeit

Für ein TextView können Sie zwischen verschiedenen Beispieldatenkategorien auswählen. Wenn Sie Beispieldaten verwenden, füllt Android Studio das Attribut text des TextView mit den ausgewählten Beispieldaten. Beachten Sie, dass Sie Beispieldaten nur über das Fenster Ansichtsattribute zur Designzeit auswählen können, wenn das Attribut text leer ist.

Abbildung 7 Ein TextView mit Beispieldaten.

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

Abbildung 8. Ein ImageView mit Beispieldaten.

Für ein RecyclerView können Sie aus einer Reihe von Vorlagen mit Beispielbildern und ‑texten auswählen. Wenn Sie diese Vorlagen verwenden, fügt Android Studio Ihrer res/layout-Datei eine Datei namens recycler_view_item.xml hinzu, die das Layout für die Beispieldaten enthält. Android Studio fügt dem RecyclerView auch Metadaten hinzu, damit die Beispieldaten richtig angezeigt werden.

Abbildung 9 Ein RecyclerView mit Beispieldaten.

Layoutwarnungen und ‑fehler anzeigen

Der Layout-Editor informiert Sie über Layoutprobleme neben der entsprechenden Ansicht in der Komponentenstruktur mit einem roten Kreis mit Ausrufezeichen für Fehler oder einem orangefarbenen Dreieck mit Ausrufezeichen für Warnungen. Klicken Sie für weitere Informationen auf das Symbol.

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 aus Hunderten von Schriftarten auswählen . Gehen Sie dazu so vor:

1. Klicken Sie im Layout-Editor auf das Symbol Design , um Ihr Layout im Design Editor anzusehen.
2. Wählen Sie eine Textansicht aus.
3. Maximieren Sie im Bereich Attribute die Option textAppearance und dann das Feld fontFamily.
4. Scrollen Sie ans Ende der Liste und klicken Sie auf Weitere Schriftarten , um das Dialogfeld Ressourcen zu öffnen.
5. Wenn Sie im Dialogfeld Ressourcen eine Schriftart auswählen möchten, suchen Sie in der Liste oder geben Sie oben in der Suchleiste etwas ein. Wenn Sie eine Schriftart unter Herunterladbar, 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 eingebunden werden.
6. Klicken Sie auf OK , um den Vorgang abzuschließen.

Layoutvalidierung

Die Layoutvalidierung ist ein visuelles Tool, mit dem Sie gleichzeitig eine Vorschau von Layouts für verschiedene Geräte und Displaykonfigurationen ansehen können. So lassen sich Probleme in Ihren Layouts früher im Prozess erkennen. Wenn Sie auf diese Funktion zugreifen möchten, klicken Sie rechts oben im IDE-Fenster auf den Tab Layoutvalidierung:

Abbildung 10. Tab „Layoutvalidierung“.

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

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

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

Referenzgeräte

Referenzgeräte sind eine Reihe von Geräten, die wir für Tests empfehlen. Dazu gehören Smartphone-, Faltgerät-, Tablet- und Desktop-Oberflächen. Sie sollten eine Vorschau Ihres Layouts auf diesen Referenzgeräten ansehen:

Abbildung 12. Vorschauen von Referenzgeräten im Tool „Layoutvalidierung“.

Benutzerdefiniert

Wenn Sie eine Displaykonfiguration für die Vorschau anpassen möchten, können Sie aus einer Vielzahl von Einstellungen auswählen, z. B. Sprache, Gerät oder Bildschirmausrichtung:

Abbildung 16. Benutzerdefinierte Displayanzeige im Tool „Layoutvalidierung“ konfigurieren.

Farbenblind

Um Ihre App für farbenblinde Nutzer zugänglicher zu machen, können Sie Ihr Layout mit Simulationen gängiger Arten von Farbenblindheit validieren:

Abbildung 13. Vorschauen der Farbenblindheitssimulation im Tool „Layoutvalidierung“.

Schriftgrößen

Validieren Sie Ihre Layouts mit 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. Vorschauen mit variabler Schriftgröße im Tool „Layoutvalidierung“.