Previews en vivo con @Preview
Itere sobre la interfaz sin recompilar toda la app.
Previews en vivo con @Preview es una lección gratuita de Jetpack Compose Academy en CoddyKit. Esta es la lección 2 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Jetpack Compose Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en 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. 🎨
Preguntas frecuentes
¿La lección «Previews en vivo con @Preview» es gratis?
Sí — el texto completo de «Previews en vivo con @Preview» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Jetpack Compose Academy, actualiza a CoddyKit PRO. El curso de Jetpack Compose Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Previews en vivo con @Preview»?
Itere sobre la interfaz sin recompilar toda la app. Practicas Jetpack Compose Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Jetpack Compose Academy?
No se requiere experiencia previa. Jetpack Compose Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 2 de 4.
¿Cuánto tiempo toma la lección «Previews en vivo con @Preview»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Jetpack Compose Academy?
Sí. Cada lección de Jetpack Compose Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Escribir una función @Composable
- Previews en vivo con @Preview
- Llamar Composables desde otros Composables
- setContent: donde comienza su interfaz