Générer une UI avec des pièces jointes d'images

Gemini dans Android Studio 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 Android. Cette page décrit les étapes générales à suivre pour créer une interface utilisateur d'application avec Gemini. Pour en savoir plus sur les pièces jointes d'images et d'autres idées d'utilisation de cette fonctionnalité, consultez Joindre une image à votre requête.

Pour générer une UI avec Gemini, suivez ces étapes générales :

  1. Créez une maquette de l'interface utilisateur de l'application que vous souhaitez. Une maquette fonctionnelle ou une conception de base est idéale. Vous pouvez exporter un fichier PNG à partir d'un outil de conception ou même utiliser une image dessinée à la main.

    Armature d'une interface utilisateur d'application dessinée à la main
    Figure 1 : Wireframe dessiné à la main d'une interface utilisateur d'application.
  2. Joignez l'image à votre demande en cliquant sur le bouton Joindre un fichier image Icône Joindre un fichier image.

  3. Dans le champ de discussion, demandez à Gemini de générer le code de l'UI, par exemple "Génère du code Jetpack Compose pour l'image fournie". Lorsque vous envoyez la requête et l'image, Gemini suggère du code pour créer l'UI proposée. Gemini 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.

    Interface de Gemini Chat affichant le code Jetpack Compose généré à partir d'une image.
    Figure 2 : Gemini génère du code Jetpack Compose à partir d'une image jointe.
  4. 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.

    Android Studio affichant un aperçu Compose avec un élément d'UI sélectionné et le chat Gemini.
    Figure 3 : Utilisation de Gemini pour transformer des éléments d'UI directement depuis l'aperçu Compose.