L'agent IA est spécialement conçu pour vous aider à concrétiser votre vision de l'UI de votre application Android, en utilisant Jetpack Compose et en suivant les bonnes pratiques Android. Cette page explique comment créer une UI d'application et l'améliorer avec l'IA.
Pour générer une UI avec l'IA, procédez comme suit :
Créez une maquette de l'UI de l'application souhaitée. Vous pouvez exporter un PNG à partir d'un outil de conception ou même utiliser une image dessinée à la main.
Figure 1 : Wireframe d'une interface utilisateur d'application Joignez l'image à votre requête en cliquant sur le bouton Attach image file
. Vous pouvez également cliquer sur Generate Code From Screenshot (Générer du code à partir d'une capture d'écran) directement depuis le panneau Preview (Aperçu) d'un fichier sans aperçu existant.
Figure 2 : Générer du code à partir d'une capture d'écran dans un panneau d'aperçu vide. Dans le champ de chat, demandez à l'agent IA de générer le code de l'UI, par exemple "Générer du code Jetpack Compose pour l'image fournie". Lorsque vous envoyez la requête et l'image, l'agent IA suggère du code pour créer l'UI proposée. L'agent IA fournit généralement également le code pour l'aperçu Compose. Vous pouvez ainsi visualiser rapidement l'UI une fois que vous l'avez importée dans votre projet. Si ce n'est pas le cas, demandez-lui de générer les aperçus Compose.
Figure 2 : Gemini générant du code Jetpack Compose à partir d'une image jointe Une fois que vous avez importé le code et que vous pouvez voir l'aperçu Compose dans le panneau d'aperçu, vous pouvez améliorer l'UI en cliquant directement sur l'aperçu et en demandant à Gemini de la transformer. Si vous avez une image de ce que vous souhaitez obtenir, vous pouvez également améliorer l'UI en effectuant un clic droit sur l'aperçu et en sélectionnant AI Actions > Match UI to Target Image (Actions IA > Faire correspondre l'UI à l'image cible).
Figure 5 : Utiliser Gemini pour transformer des éléments d'UI directement à partir de l'aperçu Compose 
Figure 6 : Exemple d'utilisation de "Match UI to Target Image" (Faire correspondre l'UI à l'image cible)
Identifier et corriger les problèmes de qualité de l'UI
L'agent IA peut également vous aider à vous assurer que votre UI est de haute qualité et accessible. Effectuez un clic droit sur votre aperçu Compose, puis sélectionnez AI Actions > Fix all UI check issues (Actions IA > Corriger tous les problèmes de vérification de l'UI). L'agent vérifie votre UI pour détecter les problèmes courants, tels que les problèmes d'accessibilité, et propose des corrections de code pour les résoudre.
