Stay organized with collections
Save and categorize content based on your preferences.
You can use Gemini to transform UI code within the Compose preview environment
using natural language directly in the preview.
To transform UI with Gemini, follow these steps:
In the Compose preview panel, right-click a preview and select Transform UI
with Gemini.
Accessing 'Transform UI with Gemini' menu
Enter your natural language request, such as "Center align these buttons," to
guide Gemini in adjusting your layout or styling, or select specific UI
elements in the preview for better context.
Applying a natural language transformation to a Compose preview
Gemini produces a diff with suggested code edits. You can review and further
refine the updates if needed before approving the changes.
Try prompts like the following:
"Add more spacing between the text"
"Make the icons 10% larger"
"Change the background color to <color>"
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."],[],[]]
