Genera IU con archivos adjuntos de imágenes

Gemini en Android Studio está equipado de forma única para ayudarte a hacer realidad tu visión de la IU de la app para Android, usando Jetpack Compose y siguiendo las prácticas recomendadas de Android. En esta página, se describen los pasos generales para crear la IU de una app con Gemini. Para obtener más información sobre cómo adjuntar imágenes y otras ideas para usar la función, consulta Cómo adjuntar una imagen a tu búsqueda.

Para generar una IU con Gemini, sigue estos pasos generales:

  1. Crea una maqueta de la IU de la app que deseas. Un esquema o un diseño básico son los más adecuados. Puedes exportar un PNG desde una herramienta de diseño o incluso usar una imagen dibujada a mano.

    Esquema de página dibujado a mano de la interfaz de usuario de una app
    Figura 1: Esquema de página dibujado a mano de la interfaz de usuario de una app.
  2. Haz clic en el botón Adjuntar archivo de imagen Ícono de Adjuntar archivo de imagen para adjuntar la imagen a tu búsqueda.

  3. En el campo de chat, pídele a Gemini que genere el código de la IU, por ejemplo, "Genera código de Jetpack Compose para la imagen proporcionada". Cuando envías la consulta y la imagen, Gemini sugiere código para crear la IU propuesta. Por lo general, Gemini también proporciona el código para la vista previa de Compose, por lo que puedes visualizar rápidamente la IU una vez que la importes a tu proyecto. Si no lo hace, pídele que genere las vistas previas de Compose.

    Interfaz de chat de Gemini que muestra el código de Jetpack Compose generado en función de una imagen.
    Figura 2: Gemini genera código de Jetpack Compose a partir de una imagen adjunta.
  4. Una vez que importes el código y puedas ver la vista previa de Compose en el panel de vista previa, puedes iterar en la IU haciendo clic directamente en la vista previa y pidiéndole a Gemini que la transforme.

    Android Studio muestra una vista previa de Compose con un elemento de la IU seleccionado y el chat de Gemini.
    Figura 3: Uso de Gemini para transformar elementos de la IU directamente desde la vista previa de Compose.