Visualizando sua UI
Use @Preview para iterar rapidamente.
Visualizando sua UI é uma aula grátis de Android Academy no CoddyKit. Esta é a aula 3 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Android Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Android Academy inclui 4 aulas no total.
Por que as visualizações ajudam
Criar e executar um aplicativo em um dispositivo leva tempo. O Compose oferece uma maneira mais rápida de ver sua interface: a visualização.
Uma visualização renderiza um elemento composto diretamente no Android Studio, permitindo verificar o layout sem iniciar o aplicativo completo em um emulador ou telefone.
A anotação @Preview
Para visualizar um elemento composto, você cria uma função separada e a marca com @Preview. O Android Studio então mostra o resultado renderizado no painel de design.
A própria função de visualização também é um elemento composto, por isso recebe tanto @Preview quanto @Composable.
@Preview
@Composable
fun GreetingPreview() {
Greeting("World")
}As visualizações não recebem parâmetros
Uma função de visualização não deve receber parâmetros. O Compose precisa chamá-la por conta própria, portanto não pode fornecer argumentos.
Por isso, você cria um invólucro: a visualização chama seu elemento composto real e fornece dados de exemplo para exibição.
@Preview
@Composable
fun ProfilePreview() {
ProfileCard(name = "Ada")
}Dando nomes às funções de visualização
Uma convenção comum é dar à visualização o nome do elemento composto que ela mostra, terminando em Preview. Para Greeting, você escreveria GreetingPreview.
Assim, fica claro a qual elemento composto cada visualização pertence, especialmente à medida que o arquivo cresce.
@Preview
@Composable
fun HeaderPreview() {
Header()
}Dando um nome à visualização
Você pode identificar uma visualização com o parâmetro name. Esse título aparece acima da visualização renderizada no Android Studio.
Nomes úteis tornam várias visualizações fáceis de distinguir rapidamente.
@Preview(name = "Light Mode")
@Composable
fun CardPreview() {
ProfileCard("Ada")
}Exibindo o plano de fundo
Por padrão, uma visualização pode ser renderizada sobre um fundo transparente. Defina showBackground = true para desenhar uma superfície sólida atrás do seu elemento composto.
Isso facilita muito avaliar o espaçamento e as cores no painel de design.
@Preview(showBackground = true)
@Composable
fun TextPreview() {
Text("Hello!")
}Várias visualizações de uma vez
Você pode adicionar várias anotações @Preview a uma função ou escrever várias funções de visualização. Cada uma é renderizada separadamente.
Isso é útil para verificar a mesma interface com diferentes dados de exemplo, como um nome curto e um nome longo.
@Preview
@Composable
fun ShortNamePreview() {
Greeting("Ada")
}
@Preview
@Composable
fun LongNamePreview() {
Greeting("Grace Hopper")
}Visualizando tamanhos diferentes
Os parâmetros widthDp e heightDp definem o tamanho da tela de visualização. Isso permite testar a aparência do layout em uma área pequena ou grande.
Definir o tamanho da visualização ajuda a identificar textos que quebram de forma estranha ou conteúdos que transbordam.
@Preview(widthDp = 200, heightDp = 100)
@Composable
fun SmallPreview() {
Greeting("Hi")
}Visualizações no modo escuro
Você pode visualizar a aparência da sua interface no tema escuro usando o parâmetro uiMode definido para o modo noturno. Isso identifica cores que ficam inadequadas sobre fundos escuros.
Verificar as visualizações clara e escura desde o início evita surpresas mais tarde.
@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun DarkPreview() {
ProfileCard("Ada")
}Visualizações interativas e ao vivo
O Android Studio pode atualizar a visualização enquanto você digita, fazendo com que as alterações apareçam quase instantaneamente. Há também um modo interativo para clicar e navegar sem uma compilação completa.
As visualizações não substituem a execução do aplicativo, mas tornam o design das telas muito mais rápido.
As visualizações servem apenas para depuração
As funções de visualização são ferramentas de desenvolvimento. Elas não fazem parte do aplicativo distribuído e não aparecerão para os usuários.
Portanto, sinta-se à vontade para adicionar quantas visualizações quiser com dados de exemplo. Elas afetam apenas o que você vê no ambiente de desenvolvimento.
@Preview(showBackground = true, name = "Final")
@Composable
fun FinalPreview() {
InfoBlock()
}Verificação rápida
Vamos revisar uma regra importante sobre as funções de visualização.
Recapitulação
Você aprendeu que @Preview renderiza um elemento composto dentro do Android Studio, sem precisar de um dispositivo. As funções de visualização não recebem parâmetros, por isso envolvem seu elemento composto real com dados de exemplo.
Entre as opções úteis estão name, showBackground, widthDp, heightDp e uiMode para o modo escuro. As visualizações são ferramentas exclusivas de depuração. Em seguida, você combinará tudo para criar um cartão de perfil real.
Perguntas Frequentes
A aula “Visualizando sua UI” é grátis?
Sim — o texto completo de “Visualizando sua UI” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Android Academy, atualize para CoddyKit PRO. O curso de Android Academy inclui 4 aulas no total.
O que vou aprender em “Visualizando sua UI”?
Use @Preview para iterar rapidamente. Você pratica Android Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Android Academy?
Nenhuma experiência prévia é necessária. Android Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 3 de 4.
Quanto tempo leva a aula “Visualizando sua UI”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Android Academy?
Sim. Cada aula de Android Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.