O agente de IA pode te ajudar a concretizar sua ideia de interface de app Android. Para isso, use o Jetpack Compose e siga as práticas recomendadas do Android. Esta página descreve como criar e iterar uma interface de app com IA.
Para gerar uma interface com IA, siga estas etapas gerais:
Crie um modelo da interface do app que você quer. Você pode exportar um PNG de uma ferramenta de design ou até mesmo usar uma imagem desenhada à mão.
Figura 1: um wireframe da interface do usuário de um app. Anexe a imagem à consulta clicando no botão para anexar arquivo de imagem
. Você também pode clicar em
Generate Code From Screenshot (Gerar código da captura de tela) no painel Preview (Prévia)
em um arquivo sem uma visualização.
Figura 2: gere código de uma captura de tela em um painel de prévia vazio. No campo de conversa, peça ao agente de IA para gerar o código da interface, por exemplo, "Gere código do Jetpack Compose para a imagem fornecida". Quando você envia a consulta e a imagem, o agente de IA sugere um código para criar a interface proposta. O agente de IA geralmente fornece o código para a prévia do Compose também. Assim, você pode visualizar rapidamente a interface depois de importá-la para o projeto. Se isso não acontecer, peça para gerar as prévias do Compose.
Figura 2: o Gemini gerando código do Jetpack Compose com base em uma imagem anexada. Depois de importar o código e ver a prévia do Compose no painel correspondente, clique nela e peça para o Gemini transformar a interface. Se você tiver uma imagem do que quer, clique com o botão direito do mouse na prévia e selecione AI Actions (Ações de IA) > Match UI to Target Image (Deixar interface igual à imagem de destino).
Figura 5: uso do Gemini para transformar elementos da interface diretamente da prévia do Compose.
Figura 6: exemplo de uso da opção para deixar a interface igual à imagem de destino.
Encontrar e corrigir problemas de qualidade da interface
O agente de IA também pode ajudar você a garantir que sua interface seja de alta qualidade e acessível. Clique com o botão direito do mouse na prévia do Compose e selecione AI Actions (Ações de IA) > Fix all UI check issues (Corrigir todos os problemas de verificação da interface). O agente audita sua interface do usuário em busca de problemas comuns, como questões de acessibilidade, e propõe correções de código para resolvê-los.