Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Gemini in Android Studio ist speziell darauf ausgelegt, 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 werden die allgemeinen Schritte zum Erstellen einer App-Benutzeroberfläche mit Gemini beschrieben. Weitere Informationen zum Anhängen von Bildern und andere Ideen zur Verwendung der Funktion finden Sie unter Bild an Ihre Anfrage anhängen.
So generieren Sie eine Benutzeroberfläche mit Gemini:
Erstellen Sie ein Mockup der gewünschten App-Benutzeroberfläche. Ein Wireframe oder ein einfaches Design ist am besten. Sie können eine PNG-Datei aus einem Designtool exportieren oder sogar ein handgezeichnetes Bild verwenden.
Hängen Sie das Bild an Ihre Anfrage an. Klicken Sie dazu auf Bilddatei anhängen.
Bitten Sie Gemini 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 senden, schlägt Gemini Code vor, um die vorgeschlagene Benutzeroberfläche zu erstellen. Gemini stellt in der Regel auch den Code für die Compose-Vorschau bereit. So können Sie die Benutzeroberfläche schnell visualisieren, sobald Sie den Code in Ihr Projekt importiert haben. Wenn das nicht der Fall ist, bitten Sie Gemini, Compose-Vorschauen zu generieren.
Nachdem 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.
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2025-07-31 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2025-07-31 (UTC)."],[],[],null,["# Generate UI with image attachments\n\n| **Preview:** Enable image attachment through [Studio Labs](/studio/gemini/attach-image).\n| **Note:** Image attachment is currently available in Gemini's no-cost tier.\n\nGemini in Android Studio is uniquely equipped to help you make your Android app\nUI vision a reality, using Jetpack Compose and following Android best practices.\nThis page describes the general steps to creating an app UI with Gemini. For\nmore information about image attachment and other ideas for how to use the\nfeature, see [Attach an image to your query](/studio/gemini/attach-image).\n\nTo generate a UI with Gemini, follow these general steps:\n\n1. Create a mockup of the app UI that you want. A wireframe or basic design\n works best. You can export a PNG from a design tool or even use a hand drawn\n image.\n\n2. Attach the image to your query by clicking **Attach image file**\n .\n\n3. In the chat field, ask Gemini to generate the UI code, for example \"Generate\n Jetpack Compose code for the image provided.\" When you submit the query and\n image, Gemini suggests code to create the proposed UI. Gemini usually\n provides the code for the\n [Compose preview](/develop/ui/compose/tooling/previews) too, so you can\n quickly visualize the UI once you import the into your project---if it doesn't,\n ask it to\n [generate Compose the previews](/studio/gemini/generate-compose-previews).\n\n4. Once you import the code and can see the Compose preview in the preview\n panel, you can iterate on the UI by clicking directly on the preview and\n [asking Gemini to transform it](/studio/gemini/transform-ui)."]]
.
