Mit dem Layout Inspector in Android Studio können Sie das Layout in einer laufenden App auf einem Emulator oder physischen Gerät untersuchen und Fehler beheben. Sie können die Attribute jeder Komponente prüfen, das App-Layout mit Design-Mockups vergleichen und eine vergrößerte Ansicht Ihrer App anzeigen.
Außerdem können Sie mit dem Layout Inspector prüfen, wie oft eine zusammensetzbare Funktion neu zusammengesetzt oder übersprungen wird. So lassen sich Probleme mit Ihrer App leichter erkennen. Einige Programmierfehler können beispielsweise dazu führen, dass die Benutzeroberfläche zu oft neu zusammengesetzt wird, was sich negativ auf die Leistung auswirken kann. Andere Programmierfehler können verhindern, dass die Benutzeroberfläche neu zusammengesetzt wird, und somit auch, dass Änderungen an der Benutzeroberfläche auf dem Bildschirm angezeigt werden.
Weitere Informationen finden Sie unter Compose-Benutzeroberfläche debuggen.
Jetzt starten
Wenn Sie den Layout Inspector starten möchten, führen Sie Ihre App aus, rufen Sie das
Running Devices Fenster auf und klicken Sie auf Toggle Layout Inspector
. Wenn Sie zwischen mehreren Geräten oder Projekten wechseln, stellt der Layout Inspector automatisch eine Verbindung zu den debugfähigen Prozessen her, die im Vordergrund des verbundenen Geräts ausgeführt werden.
So führen Sie einige häufige Aufgaben aus:
- In den Toolfenstern Component Tree (Komponentenstruktur) und Attributes (Attribute) können Sie die Hierarchie ansehen und die Attribute der einzelnen Komponenten prüfen. Der Layout Inspector erfordert möglicherweise einen Neustart der Aktivität, um auf die Attribute zugreifen zu können.
- Wenn Sie Komponenten auswählen möchten, aktivieren Sie zuerst Toggle Deep Inspect
und klicken Sie dann auf die
Komponenten. Alternativ können Sie auch auf die Komponenten doppelklicken, um zum Code zu gelangen. - Wenn Sie mit der App interagieren möchten, deaktivieren Sie Toggle Deep Inspect (Detaillierte Prüfung ein-/ausschalten)
. - Wenn Sie physische Geräte prüfen möchten, aktivieren Sie die Geräte-Spiegelung.
- Wenn Sie Live-Updates aktivieren möchten, während Sie die Benutzeroberfläche Ihrer App aktualisieren, muss Live Edit aktiviert sein.
Komponente auswählen oder isolieren
Eine Komponente zeichnet in der Regel etwas, das der Nutzer sehen und mit dem er interagieren kann. In der Component Tree (Komponentenstruktur) wird die Hierarchie Ihrer App in Echtzeit mit jeder zusammensetzbaren Komponente angezeigt. So können Sie das Layout Ihrer App debuggen, da Sie die Elemente in Ihrer App und die zugehörigen Werte visualisieren können.
Wenn Sie eine Komponente auswählen möchten, klicken Sie in der Component Tree (Komponentenstruktur) oder in der Layout Display (Layoutanzeige) darauf. Alle Layoutattribute für die ausgewählte Komponente werden im Bereich Attributes (Attribute) angezeigt.
Wenn Ihr Layout überlappende Komponenten enthält, können Sie alle Komponenten
in einem Bereich sehen, wenn Sie im Modus Deep Inspect mit der rechten Maustaste klicken
. Wenn Sie eine Komponente auswählen möchten, die nicht im Vordergrund ist, klicken Sie in der Component Tree (Komponentenstruktur) darauf.
Bei komplexen Layouts können Sie einzelne Komponenten isolieren, sodass in der Component Tree (Komponentenstruktur) nur eine Teilmenge des Layouts angezeigt und in der Layout Display (Layoutanzeige) gerendert wird. Wenn Sie eine Komponente isolieren möchten, klicken Sie in der Component Tree (Komponentenstruktur) mit der rechten Maustaste auf die Komponente und wählen Sie Show Only Subtree (Nur Unterstruktur anzeigen) oder Show Only Parents (Nur übergeordnete Elemente anzeigen) aus. Wenn Sie zur vollständigen Ansicht zurückkehren möchten, klicken Sie mit der rechten Maustaste auf die Komponente und wählen Sie Show All (Alle anzeigen) aus.
Layoutgrenzen ausblenden und Labels ansehen
Wenn Sie den Begrenzungsrahmen oder die Komponentenlabels für ein Layout-Element ausblenden möchten, klicken Sie
View Options
oben in der Layout Display (Layoutanzeige) und aktivieren oder deaktivieren Sie Show Borders (Rahmen anzeigen) oder Show View
Label (Label der Ansicht anzeigen).
Snapshots der Layout-Hierarchie aufnehmen
Mit dem Layout Inspector können Sie Snapshots der Layout-Hierarchie Ihrer laufenden App speichern, um sie mit anderen zu teilen oder später darauf zurückzugreifen.
Snapshots enthalten die Daten, die Sie normalerweise sehen, wenn Sie den Layout Inspector verwenden, einschließlich einer detaillierten Darstellung Ihres Layouts, der Komponentenstruktur Ihres Compose-, View- oder Hybrid-Layouts und detaillierter Attribute für jede Komponente Ihrer Benutzeroberfläche. Wenn Sie einen Snapshot speichern möchten, klicken Sie auf Snapshot Export/Import
und dann
Export Snapshot (Snapshot exportieren).
Wenn Sie einen zuvor gespeicherten Layout Inspector-Snapshot laden möchten, klicken Sie auf Import Snapshot (Snapshot importieren).
App-Layout mit einer Referenzbild-Überlagerung vergleichen
Wenn Sie Ihr App-Layout mit einem Referenzbild wie einem UI-Mockup vergleichen möchten, können Sie im Layout Inspector eine Bitmap-Bild-Overlay laden.
- Wenn Sie eine Überlagerung laden möchten, wählen Sie in der Symbolleiste des Layout Inspector (Layout Inspector) die Option Load Overlay (Überlagerung laden)
aus. Die Überlagerung wird so skaliert, dass sie zum Layout passt. - Mit dem Schieberegler Overlay Alpha (Alpha der Überlagerung) können Sie die Transparenz der Überlagerung anpassen.
- Wenn Sie die Überlagerung entfernen möchten, klicken Sie auf Clear Overlay.

Eigenständiger Layout Inspector
Für eine optimale Leistung empfehlen wir, den Layout Inspector im eingebetteten Standardmodus zu verwenden. Wenn Sie den Layout Inspector ausbetten möchten, rufen Sie File (Datei) (Android Studio unter macOS) > Settings (Einstellungen) > Tools (Tools) > Layout Inspector (Layout Inspector) auf und deaktivieren Sie das Kästchen Enable embedded Layout Inspector (Eingebetteten Layout Inspector aktivieren).
Aktivieren Sie im eigenständigen Modus Live-Updates, indem Sie in der Symbolleiste des Layout Inspector
auf die Option Live Updates
klicken.