Stay organized with collections
Save and categorize content based on your preferences.
Gemini in Android Studio is uniquely equipped to help you make your Android app
UI vision a reality, using Jetpack Compose and following Android best practices.
This page describes the general steps to creating an app UI with Gemini. For
more information about image attachment and other ideas for how to use the
feature, see Attach an image to your query.
To generate a UI with Gemini, follow these general steps:
Create a mockup of the app UI that you want. A wireframe or basic design
works best. You can export a PNG from a design tool or even use a hand drawn
image.
Attach the image to your query by clicking Attach image file.
In the chat field, ask Gemini to generate the UI code, for example "Generate
Jetpack Compose code for the image provided." When you submit the query and
image, Gemini suggests code to create the proposed UI. Gemini usually
provides the code for the
Compose preview too, so you can
quickly visualize the UI once you import the into your project—if it doesn't,
ask it to
generate Compose the previews.
Once you import the code and can see the Compose preview in the preview
panel, you can iterate on the UI by clicking directly on the preview and
asking Gemini to transform it.
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-07-31 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 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)."]]
.
