DEV Community

myougaTheAxo
myougaTheAxo

Posted on

Compose Preview Guide — Multi-Preview & Debug

#android #kotlin #jetpackcompose #preview

Leverage Compose Preview for efficient UI development and testing.

Basic @Preview 

@Preview
@Composable
fun MyScreenPreview() {
    MyScreen()
}
Enter fullscreen mode Exit fullscreen mode

Multi-Preview Annotations

Create reusable preview groups:

@Preview(name = "Phone", widthDp = 360, heightDp = 800)
@Preview(name = "Tablet", widthDp = 820, heightDp = 1180)
@Preview(name = "Landscape", widthDp = 1280, heightDp = 720)
annotation class ThemePreview

@Preview(name = "Light", uiMode = UI_MODE_NIGHT_NO)
@Preview(name = "Dark", uiMode = UI_MODE_NIGHT_YES)
annotation class ThemeVariant

@ThemePreview
@ThemeVariant
@Composable
fun MyScreenPreview() {
    MyScreen()
}
Enter fullscreen mode Exit fullscreen mode

PreviewParameterProvider

Test components with multiple data states:

class UserPreviewProvider : PreviewParameterProvider<User> {
    override val values = sequenceOf(
        User(id = 1, name = "Alice"),
        User(id = 2, name = "Bob"),
        User(id = 3, name = "Charlie")
    )
}

@Preview
@Composable
fun UserCardPreview(
    @PreviewParameter(UserPreviewProvider::class) user: User
) {
    UserCard(user)
}
Enter fullscreen mode Exit fullscreen mode

PreviewData Objects

Create semantic preview data:

object PreviewData {
    val sampleUser = User(id = 1, name = "John", avatar = "avatar.png")
    val sampleUsers = listOf(sampleUser, sampleUser.copy(id = 2, name = "Jane"))
}

@Preview
@Composable
fun UserListPreview() {
    UserList(PreviewData.sampleUsers)
}
Enter fullscreen mode Exit fullscreen mode

Debug with showSystemUi

Visualize system UI elements:

@Preview(showSystemUi = true)
@Composable
fun MyScreenPreview() {
    MyScreen()
}
Enter fullscreen mode Exit fullscreen mode

This displays status bar, navigation bar, and safe areas.

Preview with Theme

Test different themes:

@Preview(uiMode = UI_MODE_NIGHT_YES)
@Composable
fun MyScreenDarkPreview() {
    MyTheme(darkTheme = true) {
        MyScreen()
    }
}
Enter fullscreen mode Exit fullscreen mode

Master Preview to iterate fast and catch UI issues before runtime.

8 production-ready Android app templates on Gumroad.

Browse templates → Gumroad

Top comments (0)