| **Note:** Image attachment is only available in Gemini's no-cost tier.

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](https://developer.android.com/studio/gemini/attach-image).

To generate a UI with Gemini, follow these general steps:

1. 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.

   ![](https://developer.android.com/static/studio/gemini/images/app-wireframe.png)
2. Attach the image to your query by clicking **Attach image file**
   ![Attach Image File icon](https://developer.android.com/static/studio/images/attach-image-file.png).

3. 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](https://developer.android.com/develop/ui/compose/tooling/previews) 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](https://developer.android.com/studio/gemini/generate-compose-previews).

   ![](https://developer.android.com/static/studio/gemini/images/generate-compose-code.png)
4. 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](https://developer.android.com/studio/gemini/transform-ui).

   ![](https://developer.android.com/static/studio/gemini/images/transform-ui.png)