Der KI-Agent ist einzigartig ausgestattet, um Sie bei der Umsetzung Ihrer Vision für die Benutzeroberfläche Ihrer Android-App zu unterstützen. Dabei werden Jetpack Compose und Android-Best Practices verwendet. Auf dieser Seite wird beschrieben, wie Sie mit KI eine App-Benutzeroberfläche erstellen und optimieren.
So generieren Sie eine Benutzeroberfläche mit KI:
Erstellen Sie ein Mockup der gewünschten App-Benutzeroberfläche. Sie können eine PNG-Datei aus einem Designtool exportieren oder sogar ein handgezeichnetes Bild verwenden.
Abbildung 1: Wireframe einer App-Benutzeroberfläche. Hängen Sie das Bild an Ihre Anfrage an. Klicken Sie dazu auf die Schaltfläche Bilddatei anhängen
. Sie können auch direkt im Bereich Vorschau einer Datei ohne vorhandene Vorschau auf Code aus Screenshot generieren klicken.
Abbildung 2: Code aus einem Screenshot in einem leeren Vorschaubereich generieren Bitten Sie den KI-Agenten im Chatfeld, den UI-Code zu generieren, z. B. „Generate Jetpack Compose code for the image provided.“ (Generiere Jetpack Compose-Code für das bereitgestellte Bild). Wenn Sie die Anfrage und das Bild einreichen, schlägt der KI-Agent Code zum Erstellen der vorgeschlagenen Benutzeroberfläche vor. Der KI-Agent stellt in der Regel auch den Code für die Compose-Vorschau bereit. So können Sie die Benutzeroberfläche schnell visualisieren, sobald Sie sie in Ihr Projekt importiert haben. Wenn das nicht der Fall ist, bitten Sie den KI-Agenten, die Compose-Vorschau zu generieren.
Abbildung 2: Gemini generiert Jetpack Compose-Code aus einem angehängten Bild. Sobald Sie den Code importiert haben und die Compose-Vorschau im Vorschaufenster sehen, können Sie die Benutzeroberfläche bearbeiten, indem Sie direkt auf die Vorschau klicken und Gemini bitten, sie zu transformieren. Wenn Sie ein Bild von dem haben, was Sie möchten, können Sie auch die Benutzeroberfläche durchlaufen, indem Sie mit der rechten Maustaste auf die Vorschau klicken und KI-Aktionen > Benutzeroberfläche an Zielbild anpassen auswählen.
Abbildung 5: UI-Elemente mit Gemini direkt über die Compose-Vorschau transformieren. 
Abbildung 6: Beispiel für die Verwendung von „Match UI to Target Image“ (Benutzeroberfläche an Zielbild anpassen)
Probleme mit der Qualität der Benutzeroberfläche finden und beheben
Der KI-Agent kann Ihnen auch dabei helfen, eine hochwertige und barrierefreie Benutzeroberfläche zu erstellen. Klicken Sie mit der rechten Maustaste auf die Compose-Vorschau und wählen Sie AI Actions > Fix all UI check issues aus. Der Agent prüft Ihre Benutzeroberfläche auf häufige Probleme wie Barrierefreiheitsprobleme und schlägt Codekorrekturen vor, um diese zu beheben.
