Skip to main content

Gemini in Android Studio can now turn UI mockups into code 

Besides the GDC 2025 announcements, Google announced today that Gemini in Android Studio “now supports multimodal inputs, which lets you attach images directly to your prompts” for visual help during the app development process.

Multimodal capabilities were first teased at I/O 2024, with Gemini in Android Studio now able to “understand simple wireframes, and transform them into working Jetpack Compose code.” The Ask Gemini field now has an “Attach Image File” (JPEG or PNG) option in the canary version of Android Studio Narwal. Google recommends images with “strong color contrasts” for the best results, and a “clear prompt.”

You can upload screenshots and user interfaces ranging from a simple wireframe to high-fidelity mockup, with developers able to specify expected functionality (as seen in the second calculator example: “make the interactions and calculations work as you’d expect”).

Examples of turning “visual designs into functional UI code” include:

Advertisement - scroll for more content
  1. “For this image provided, write Android Jetpack Compose code to make a screen that’s as close to this image as possible. Make sure to include imports, use Material3, and document the code.”
  2. “For this image provided, write Android Jetpack Compose code to make a screen that’s as close to this image as possible, be creative on the colors. Make the interactions and calculations work as you’d expect. Make sure to include imports, use Material3, and document the code.”
  • Gemini Android Studio images
  • Gemini Android Studio images

Google positions Gemini as providing an “initial design scaffold,” or first draft where “your edits and adjustments will be needed.”

Common refinements include ensuring correct drawable imports and importing icons. Consider the generated code a highly efficient starting point, accelerating your UI development workflow. 

Gemini’s visual analysis can also be used to identify and resolve bugs: “Upload a screenshot of the problematic UI, and Gemini will analyze the image and suggest potential solutions. You can also include relevant code snippets for more precise assistance.”

Gemini in Android Studio can also be used to upload architecture diagrams and get explanations or documentation, which is somewhat similar to Gemini Astra glasses example last I/O. 

Download Android Studio Narwhal canary today to try the new multimodal features!

FTC: We use income earning auto affiliate links. More.

You’re reading 9to5Google — experts who break news about Google and its surrounding ecosystem, day after day. Be sure to check out our homepage for all the latest news, and follow 9to5Google on Twitter, Facebook, and LinkedIn to stay in the loop. Don’t know where to start? Check out our exclusive stories, reviews, how-tos, and subscribe to our YouTube channel

Comments

Author

Avatar for Abner Li Abner Li

Editor-in-chief. Interested in the minutiae of Google and Alphabet. Tips/talk: [email protected]