L'agent d'IA est particulièrement bien équipé pour vous aider à concrétiser votre vision de l'UI de votre application Android, en utilisant Jetpack Compose et en suivant les bonnes pratiques d'Android. Cette page explique comment créer et itérer sur une interface utilisateur d'application avec l'IA.
Pour générer une UI avec l'IA, suivez ces étapes générales :
Créez une maquette de l'interface utilisateur de l'application que vous souhaitez. Vous pouvez exporter un fichier PNG depuis 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 Joindre un fichier image
. 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.
Illustration 2 : Générer du code à partir d'une capture d'écran dans un panneau d'aperçu vide. Dans le champ de discussion, demandez à l'agent d'IA de générer le code de l'UI, par exemple "Génère le code Jetpack Compose pour l'image fournie". Lorsque vous envoyez la requête et l'image, l'agent d'IA suggère du code pour créer l'UI proposée. L'agent d'IA fournit généralement 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ère 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 itérer sur l'UI en cliquant directement sur l'aperçu et en demandant à Gemini de le transformer. Si vous avez une image de ce que vous voulez, vous pouvez également itérer sur l'UI en effectuant un clic droit sur l'aperçu et en sélectionnant Actions d'IA > Faire correspondre l'UI à l'image cible.
Figure 5 : Utilisation de Gemini pour transformer des éléments d'UI directement depuis l'aperçu Compose. 
Figure 6 : Exemple d'utilisation de "Faire correspondre l'UI à l'image cible"
Identifier et corriger les problèmes de qualité de l'UI
L'agent d'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 Actions d'IA > Corriger tous les problèmes de vérification de l'UI. L'agent audite 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.
