Attach an image to your query

Attach an image to your query for Gemini in Android Studio to better understand an app's architecture and accelerate the UI development process.

To attach an image to your prompt, click Attach Image File Attach Image File icon and upload the image.

Here are just a few ways Gemini can help with images:

• If you have a mock-up of the UI you'd like, Gemini can provide the code that creates it. For example, if you provide Gemini a screenshot of the Now in Android app, it can provide the Compose code to create it. This example shows a screenshot of the app's feed (left) and Gemini's generated Jetpack Compose code (right) for that UI. To learn more, see Generate UI with image attachments.

  The 'Now in Android' app, showing a feed of articles with titles, topics, and bookmark icons. Gemini's code response displaying Jetpack Compose code that recreates the UI from the 'Now in Android' screenshot.

• If you want to learn how an app is constructed, Gemini can explain how the UI works in terms of its component parts. For example, you can ask Gemini to explain the composables and data flow behind another Now in Android screenshot. The left image shows a detail screen with a news item, and the right image displays Gemini's explanation of the Compose structure and data flow for that screen.

  A single news article detail in the 'Now in Android' app, showing a title, author, and description. Gemini's explanation of the Jetpack Compose composables and data flow for the news article detail screen.

• If you have an app architecture diagram, Gemini can suggest code to create the app based on the diagram, serving as a full stack development assistant. Gemini can also help document the diagram and explain the construction of the app, which helps when writing a design doc for your teammates to review. For instance, the following image shows a simplified architecture diagram depicting data flow between various app components like UI, ViewModel, Repository, and Data Source.

  A simplified app architecture diagram showing UI, ViewModel, Repository, and Data Source components with arrows indicating data flow.

• If you notice a UI bug, take a screenshot and ask Gemini to brainstorm solutions. You can help point out what's wrong by circling the area that has the error. The following example shows a screenshot of a mobile app with a red circle highlighting a misaligned UI element.

  A mobile app screenshot showing a UI bug where a text element is overlapping or misaligned, highlighted with a red circle.