Previews em Tempo Real com @Preview
Faça iterações na interface sem recompilar o aplicativo inteiro.
Previews em Tempo Real com @Preview é uma aula grátis de Jetpack Compose Academy no CoddyKit. Esta é a aula 2 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 Jetpack Compose Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Jetpack Compose Academy inclui 4 aulas no total.
Partes desta aula ainda não foram traduzidas e aparecem em inglês.
See UI Without Running
Rebuilding the whole app to check one button is slow. The @Preview annotation renders your Composable right inside Android Studio. ⚡
Add the Annotation
Put @Preview above a Composable that takes no required parameters. Android Studio then shows it in the design pane beside your code.
@Preview
@Composable
fun GreetingPreview() {
Greeting("Compose")
}Previews Need No Arguments
A previewed Composable must be callable with no arguments. That is why you usually make a small wrapper that supplies sample data.
Wrap Your Real Composable
Keep your real Composable parameterized, then write a tiny preview wrapper that calls it with fixed values for the design pane.
@Preview
@Composable
fun CardPreview() {
ProfileCard(name = "Ada")
}Name It With a Title
Add name to label the preview in the panel. Helpful when one file shows several previews at once.
@Preview(name = "Dark card")
@Composable
fun DarkPreview() { /* ... */ }Show System Decorations
Set showSystemUi to true to render the status bar and full device frame, so you see the Composable in a realistic phone shell.
@Preview(showSystemUi = true)
@Composable
fun ScreenPreview() { /* ... */ }Just the Background
If you only want a surface behind your UI, use showBackground instead. It adds a plain backdrop without the whole device chrome.
@Preview(showBackground = true)
@Composable
fun ItemPreview() { /* ... */ }Many Previews at Once
Stack several @Preview annotations on one function to compare states side by side, like light and dark or small and large fonts.
Preview Different Sizes
Pass widthDp and heightDp to test how your Composable looks on narrow or wide screens without launching an emulator.
@Preview(widthDp = 320, heightDp = 200)
@Composable
fun NarrowPreview() { /* ... */ }Interactive Preview
Click the interactive mode icon in the preview pane to tap and scroll your UI without a full app run. Great for quick checks.
Previews Stay Out of the App
Code under @Preview is for tooling only. It never ships in your released app, so add as many previews as you find useful.
Quick Check
A quick check on how previews work.
Recap
You can now iterate fast: add @Preview, supply sample data in a wrapper, and tune name, sizes, and backgrounds to see your UI instantly. 🎨
Perguntas Frequentes
A aula “Previews em Tempo Real com @Preview” é grátis?
Sim — o texto completo de “Previews em Tempo Real com @Preview” é 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 Jetpack Compose Academy, atualize para CoddyKit PRO. O curso de Jetpack Compose Academy inclui 4 aulas no total.
O que vou aprender em “Previews em Tempo Real com @Preview”?
Faça iterações na interface sem recompilar o aplicativo inteiro. Você pratica Jetpack Compose 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 Jetpack Compose Academy?
Nenhuma experiência prévia é necessária. Jetpack Compose 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 2 de 4.
Quanto tempo leva a aula “Previews em Tempo Real com @Preview”?
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 Jetpack Compose Academy?
Sim. Cada aula de Jetpack Compose 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.
Todas as aulas deste curso
- Escrevendo uma Função @Composable
- Previews em Tempo Real com @Preview
- Chamando Composables a partir de Composables
- setContent: Onde sua Interface Começa