Practical Tips and Tricks to Improve Your Compose Previews (KKON 2024)

Jetpack Compose Preview is a powerful tool that provides real-time feedback on how our composables are rendered and even on how they behave and animate in certain conditions. While writing useful previews seems like a straightforward task, there are some things that we need to keep in mind. Preview code won't reach users of your app (hopefully!); however, it's more likely that the author of the preview and future peers as well might have to work with them eventually.

This talk will touch on the following topics:
- Recap on the main features and limitations of Compose previews
- How we can overcome the limitations of @Preview being an annotation
- How we can make our previews developer-friendly
- What we can use our previews for besides checking how our composables are rendered and how they behave

1. @Preview(device = "spec:width=960dp,height=1080dp,dpi=480") @Composable private fun TitleSlidePreview() { PreviewBox { TitleSlide() } } @Composable private fun TitleSlide() { Column( modifier = Modifier .fillMaxSize() .paint( painter = painterResource( id = R.drawable.glenn_carstens_peters, ), contentScale = ContentScale.FillBounds, ) .padding(32.dp) ) { Title( modifier = Modifier .fillMaxWidth() .padding(top = 32.dp), fontSize = 70.sp, ) Column( horizontalAlignment = CenterHorizontally, modifier = Modifier .fillMaxWidth() ) { Name( modifier = Modifier .weight(1f) .padding(bottom = 66.dp), imageHeight = 66.dp, textSize = 70.sp, ) Contacts( modifier = Modifier .padding( bottom = 16.dp, end = 16.dp, ), fontSize = 50.sp, ) } } } Practical Tips and Tricks to Improve Your Compose Previews István Juhos @stewemetal istvanjuhos.dev
2. Food for thought 🍲💭
3. #KKON @stewemetal XML preview
4. #KKON @stewemetal Compose preview
5. #KKON @stewemetal @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview
6. #KKON @stewemetal @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview
7. #KKON @stewemetal @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } • Code Compose preview
8. #KKON @stewemetal • Code, that • will never reach production @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview
9. #KKON @stewemetal • Code, that • will never reach productio n​ … 🤞 @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview
10. #KKON @stewemetal • Code, that • will never reach production… • others will read 🤞 @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview
11. #KKON @stewemetal • Code, that • will never reach production… • others will read • needs to be maintained 🤞 @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview
12. #KKON @stewemetal • Code, that • will never reach production… • others will read • needs to be maintained • might be duplicated 🤞 @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview
13. #KKON @stewemetal • Code, that • will never reach production… • others will read • needs to be maintained • might be duplicated • might be used for other purposes 🤞 @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview
14. #KKON @stewemetal Agenda • Developer experience • Annotation limitations • Custom tooling
15. #KKON @stewemetal Agenda • Developer experience • Annotation limitations • Custom tooling
16. #KKON @stewemetal Agenda • Developer experience • Annotation limitations • Custom tooling
17. #KKON @stewemetal Agenda • Developer experience • Annotation limitations • Custom tooling
18. #KKON @stewemetal Agenda • Developer experience • Annotation limitations • Custom tooling
19. Consider IDE themes 🎨
20. #KKON @stewemetal Consider IDE themes @Composable fun ListItem( text: String, onClick: () -> Unit, modifier: Modifier = Modifier, ) { Row( verticalAlignment = Alignment.CenterVertically, modifier = modifier .clickable(onClick = onClick) .padding(16.dp), ) { Text( text = text, style = PreviewTheme.typography.bodyMedium, color = PreviewTheme.colors.text, modifier = Modifier.weight(1f), ) Image( imageVector = KeyboardArrowRight, contentDescription = null, colorFilter = ColorFilter.tint(PreviewTheme.colors.text) ) } }
21. Consider IDE themes • Render Composable functions annotated with @Preview @Composable fun ListItem( text: String, onClick: () -> Unit, modifier: Modifier = Modifier, ) { Row( verticalAlignment = Alignment.CenterVertically, modifier = modifier .clickable(onClick = onClick) .padding(16.dp), ) { Text( text = text, style = PreviewTheme.typography.bodyMedium, color = PreviewTheme.colors.text, modifier = Modifier.weight(1f), ) Image( imageVector = KeyboardArrowRight, contentDescription = null, colorFilter = ColorFilter.tint(PreviewTheme.colors.text) ) } }
22. Consider IDE themes • Render Composable functions annotated with @Preview @Composable fun ListItem( text: String, onClick: () -> Unit, modifier: Modifier = Modifier, ) { Row( verticalAlignment = Alignment.CenterVertically, modifier = modifier .clickable(onClick = onClick) .padding(16.dp), ) { Text( text = text, style = PreviewTheme.typography.bodyMedium, color = PreviewTheme.colors.text,
23. Consider IDE themes • Render Composable functions annotated with @Preview @Composable fun ListItem( text: String, onClick: () -> Unit, modifier: Modifier = Modifier, ) { Row( verticalAlignment = Alignment.CenterVertically, modifier = modifier .clickable(onClick = onClick) .padding(16.dp), ) { Text( text = text, style = PreviewTheme.typography.bodyMedium, color = PreviewTheme.colors.text,
24. #KKON @stewemetal Consider IDE themes @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
25. #KKON @stewemetal Consider IDE themes @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
26. #KKON @stewemetal Consider IDE themes @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
27. #KKON @stewemetal @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Consider IDE themes
28. #KKON @stewemetal @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Consider IDE themes
29. #KKON @stewemetal @Preview @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Consider IDE themes
30. #KKON @stewemetal @Preview( showBackground = true, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Consider IDE themes
31. #KKON @stewemetal @Preview( showBackground = true, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Consider IDE themes vs
32. Use annotation parameters ⚙
33. #KKON @stewemetal @Preview( showBackground = true, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Use annotation parameters
34. #KKON @stewemetal @Preview( showBackground = true, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Use annotation parameters
35. #KKON @stewemetal @Preview( showBackground = true, backgroundColor = 0xFF_E7ECF4, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Use annotation parameters
36. #KKON @stewemetal @Preview( showBackground = true, backgroundColor = 0xFF_E7ECF4, // gray.w500 ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Use annotation parameters
37. #KKON @stewemetal Use annotation parameters @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } const val GRAY_W500 = 0xFF_E7ECF4 ...
38. #KKON @stewemetal Use annotation parameters @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
39. #KKON @stewemetal Use annotation parameters @Preview( showBackground = true, backgroundColor = GRAY_W500, uiMode = Configuration.UI_MODE_NIGHT_YES, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
40. #KKON @stewemetal Use annotation parameters @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }
41. #KKON @stewemetal Use annotation parameters @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, )
42. #KKON @stewemetal Use annotation parameters @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Preview( showBackground = true, backgroundColor = DARK_GRAY_W500, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, )
43. #KKON @stewemetal Use annotation parameters @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Preview( showBackground = true, backgroundColor = DARK_GRAY_W500, uiMode = Configuration.UI_MODE_NIGHT_YES, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {},
44. #KKON @stewemetal Use annotation parameters @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Preview( showBackground = true, backgroundColor = DARK_GRAY_W500, uiMode = Configuration.UI_MODE_NIGHT_YES, ) @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {},
45. #KKON @stewemetal Preview annotation parameters android x​ .compose.ui.tooling.preview @Preview( ... ) ✅
46. #KKON @stewemetal No Preview annotation parameters org.jetbrain s​ .compose.ui.tooling.preview @Preview (​ ) 😢 ❌
47. Group your previews 🏘
48. #KKON @stewemetal @Preview @Composable private fun ListItemPreview() { ... } Group your previews
49. #KKON @stewemetal @Preview( name = "Light - Primary", group = "Light/Dark - Primary", showBackground = true, backgroundColor = GRAY_W500, ) @Preview( name = "Dark - Primary", group = "Light/Dark - Primary”, showBackground = true, backgroundColor = DARK_GRAY_W500, uiMode = UI_MODE_NIGHT_YES, ) @Composable private fun ListItemPreview() { ... } Group your previews
50. #KKON @stewemetal @Preview( name = "Light - Secondary", group = "Light/Dark - Secondary", showBackground = true, backgroundColor = GRAY_W100, ) @Preview( name = "Dark - Secondary", group = "Light/Dark - Secondary", showBackground = true, backgroundColor = DARK_GRAY_W100, uiMode = UI_MODE_NIGHT_YES, ) @Composable private fun ListItemPreview() { ... } Group your previews
51. #KKON @stewemetal @Preview( ... ) @Preview( ... ) @Preview( ... ) @Preview( ... ) @Composable private fun ListItemPreview() { ... } Group your previews
52. #KKON @stewemetal @Preview( ... ) @Preview( ... ) @Preview( ... ) @Preview( ... ) @Composable private fun ListItemPreview() { ... } Group your previews
53. Create multipreviews 👥
54. #KKON @stewemetal @Preview( ... ) @Preview( ... ) @Preview( ... ) @Preview( ... ) @Composable private fun ListItemPreview() { ... } Create multipreviews
55. @Preview( name = "Light - Primary", group = "Light/Dark - Primary", showBackground = true, backgroundColor = GRAY_W500, ) @Preview( name = "Dark - Primary", group = "Light/Dark - Primary", showBackground = true, backgroundColor = DARK_GRAY_W500, uiMode = UI_MODE_NIGHT_YES, ) annotation class PreviewPrimaryBackground Create multipreviews
56. @Preview( name = "Light - Secondary", group = "Light/Dark - Secondary", showBackground = true, backgroundColor = GRAY_W100, ) @Preview( name = "Dark - Secondary", group = "Light/Dark - Secondary", showBackground = true, backgroundColor = DARK_GRAY_W100, uiMode = UI_MODE_NIGHT_YES, ) annotation class PreviewSecondaryBackground Create multipreviews
57. @Preview( name = "Light - Secondary", group = "Light/Dark - Secondary", showBackground = true, backgroundColor = GRAY_W100, ) @Preview( name = "Dark - Secondary", group = "Light/Dark - Secondary", showBackground = true, backgroundColor = DARK_GRAY_W100, uiMode = UI_MODE_NIGHT_YES, ) annotation class PreviewSecondaryBackground Create multipreviews
58. @PreviewPrimaryBackground @PreviewSecondaryBackground @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Create multipreviews
59. #KKON @stewemetal @PreviewPrimaryBackground @PreviewSecondaryBackground @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Create multipreviews
60. #KKON @stewemetal @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Create multipreviews @PreviewPrimaryBackground @PreviewSecondaryBackground annotation class PreviewAllBackgrounds
61. #KKON @stewemetal @PreviewAllBackgrounds @Composable private fun ListItemPreview() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Create multipreviews @PreviewPrimaryBackground @PreviewSecondaryBackground annotation class PreviewAllBackgrounds
62. #KKON @stewemetal @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes Multipreview templates
63. #KKON @stewemetal Multipreview templates @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes
64. #KKON @stewemetal Multipreview templates @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes
65. #KKON @stewemetal Multipreview templates @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes
66. #KKON @stewemetal Multipreview templates @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes
67. #KKON @stewemetal Multipreview templates @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes
68. #KKON @stewemetal Multipreview templates @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes
69. #KKON @stewemetal @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes @PreviewDynamicColors Multipreview templates
70. #KKON @stewemetal Multipreview templates androidx.compose.ui.tooling.preview @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes @PreviewDynamicColors ✅ developer.android.com/develop/ui/compose/tooling/previews#multipreview-templates
71. #KKON @stewemetal No multipreview support yet @Preview @Preview annotation class PreviewPrimaryBackground @PreviewLightDark @PreviewFontScale @Previe w​ ScreenSizes @PreviewDynamicColors 😢 ❌
72. Build custom tools 🪛
73. #KKON @stewemetal Build custom tools - a new example @Composable fun PrimaryButton( text: String, @DrawableRes leadingIcon: Int? = null, onClick: () - > Unit, modifier: Modifier = Modifier ) { Button( colors = ButtonDefaults.buttonColors().copy( containerColor = AppTheme.colors.background, ), elevation = ButtonDefaults.buttonElevation(4.dp), modifier = modifier, onClick = onClick, ) { Row(verticalAlignment = CenterVertically) { leadingIcon ?. let { Image( painter = painterResource(id = leadingIcon), contentDescription = null, colorFilter = ColorFilter.tint(AppTheme.colors.primaryButtonText), modifier = Modifier.size(24.dp) ) } Text( text = text, style = AppTheme.typography.labelMedium, color = AppTheme.colors.primaryButtonText, modifier = Modifier.padding(start = 8.dp) ) } } }
74. #KKON @stewemetal Let’s build our preview @PreviewLightDark @Composable private fun PrimaryButtonPreview() { PrimaryButton( text = "Primary Button", leadingIcon = R.drawable.ic_add, onClick = {}, ) }
75. #KKON @stewemetal Let’s build our preview @PreviewLightDark @Composable private fun PrimaryButtonPreview() { PrimaryButton( text = "Primary Button", leadingIcon = R.drawable.ic_add, onClick = {}, ) }
76. #KKON @stewemetal Something’s missing… @PreviewLightDark @Composable private fun PrimaryButtonPreview() { PrimaryButton( text = "Primary Button", leadingIcon = R.drawable.ic_add, onClick = {}, ) }
77. #KKON @stewemetal @PreviewLightDark @Composable private fun PrimaryButtonPreview() { AppTheme { PrimaryButton( text = "Primary Button", leadingIcon = R.drawable.ic_add, onClick = {} ) } } Something’s missing… the theme 🤦
78. #KKON @stewemetal @PreviewLightDark @Composable private fun PrimaryButtonPreview() { AppTheme { PrimaryButton( text = "Primary Button", leadingIcon = R.drawable.ic_add, onClick = {} ) } } … and flexibility 💧
79. #KKON @stewemetal @Preview @Composable private fun PrimaryButtonPreview() { PreviewBox { PrimaryButton( ... ) } } Let’s build tools!
80. #KKON @stewemetal @Preview @Composable private fun PrimaryButtonPreview() { PreviewBox { PrimaryButton( ... ) } } Let’s build tools!
81. #KKON @stewemetal Building preview tools @Composable fun PreviewBox( modifier: Modifier = Modifier, content: @Composable () -> Unit, ) { }
82. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, content: @Composable () -> Unit, ) { AppTheme { content() } } Building preview tools
83. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, content: @Composable () -> Unit, ) { AppTheme { Box { content() } } } Building preview tools
84. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: Color = AppTheme.colors.backgroundSecondary, content: @Composable () -> Unit, ) { AppTheme { Box { content() } } } Building preview tools
85. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: Color = AppTheme.colors.backgroundSecondary, content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor), ) { content() } } } Building preview tools
86. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: Color = AppTheme.colors.backgroundSecondary, content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor), ) { content() } } } Building preview tools
87. #KKON @stewemetal Building preview tools AppTheme.colors.backgroundSecondary
88. #KKON @stewemetal Building preview tools - theme insights AppTheme.colors.backgroundSecondary
89. #KKON @stewemetal Building preview tools - theme insights AppTheme.colors.backgroundSecondary object AppTheme { val colors: AppColors @Composable @ReadOnlyComposable get() = LocalAppColors.current //... }
90. #KKON @stewemetal Building preview tools - theme insights AppTheme.colors.backgroundSecondary object AppTheme { val colors: AppColors @Composable @ReadOnlyComposable get() = LocalAppColors.current //... } val LocalAppColors = staticCompositionLocalOf<AppColors> { error("Make sure to use this value in an AppTheme.") }
91. #KKON @stewemetal Building preview tools - theme insights AppTheme.colors.backgroundSecondary object AppTheme { val colors: AppColors @Composable @ReadOnlyComposable get() = LocalAppColors.current //... } val LocalAppColors = staticCompositionLocalOf<AppColors> { lightColors() }
92. #KKON @stewemetal AppTheme.colors.backgroundSecondary Building preview tools
93. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: Color = AppTheme.colors.backgroundSecondary, content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor), ) { content() } } } Building preview tools
94. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: Color = AppTheme.colors.backgroundSecondary, content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor), ) { content() } } } Building preview tools
95. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: @Composable () -> Color = { AppTheme.colors.backgroundSecondary }, content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor), ) { content() } } } Building preview tools
96. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: @Composable () -> Color = { AppTheme.colors.backgroundSecondary }, content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor()), ) { content() } } } Building preview tools
97. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: @Composable () -> Color = { AppTheme.colors.backgroundSecondary }, content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor()), ) { content() } } } Building preview tools
98. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: @Composable () -> Color = { AppTheme.colors.backgroundSecondary }, content: @Composable () -> Unit, ) { AppTheme { Box( ... ) { content() } } } Building preview tools
99. #KKON @stewemetal @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor: @Composable () -> Color = { AppTheme.colors.backgroundSecondary }, paddingValues: PaddingValues = PaddingValues(4.dp), content: @Composable () -> Unit, ) { AppTheme { Box( ... ) { content() } } } Building preview tools
100. #KKON @stewemetal @Composable fun Previe w​ Box( ... content: @Composable () -> Unit, ) { AppTheme { Box( ... ) { content() } } } Building preview tools
101. #KKON @stewemetal @Composable fun Previe w​ Column( ... content: @Composable () -> Unit, ) { AppTheme { Column( ... ) { content() } } } Building preview tools
102. Override CompositionLocals 🗺
103. #KKON @stewemetal Override CompositionLocals @Composable fun PreviewColumn( ... content: @Composable () -> Unit, ) { AppTheme { Column( ... ) { content() } } }
104. #KKON @stewemetal Override CompositionLocals @Composable fun PreviewColumn( ... layoutDirection: LayoutDirection = LayoutDirection.Ltr, content: @Composable () -> Unit, ) { AppTheme { Column( ... ) { content() } } }
105. #KKON @stewemetal Override CompositionLocals @Composable fun PreviewColumn( ... layoutDirection: LayoutDirection = LayoutDirection.Ltr, content: @Composable () -> Unit, ) { CompositionLocalProvider( LocalLayoutDirection provides layoutDirection, ) { AppTheme { Column( ... ) { content() } } } }
106. #KKON @stewemetal Override CompositionLocals @PreviewLightDark @Composable private fun PreviewColumnPreview() { PreviewColumn { PrimaryButton( ... ) ListItem( ... ) } }
107. #KKON @stewemetal Override CompositionLocals @PreviewLightDark @Composable private fun PreviewColumnPreview() { PreviewColumn( layoutDirection = LayoutDirection.Rtl, ) { PrimaryButton( ... ) ListItem( ... ) } }
108. #KKON @stewemetal Override CompositionLocals @PreviewLightDark @Composable private fun PreviewColumnPreview() { PreviewColumn( layoutDirection = LayoutDirection.Rtl, ) { PrimaryButton( ... ) ListItem( ... ) } }
109. #KKON @stewemetal Override CompositionLocals @PreviewLightDark @Composable private fun PreviewColumnPreview() { PreviewColumn( layoutDirection = LayoutDirection.Rtl, ) { PrimaryButton( .. . ) ListItem( .. . ) } }
110. #KKON @stewemetal Override CompositionLocals @Preview @Composable private fun PreviewColumnPreview() { PreviewColumn( layoutDirection = LayoutDirection.Rtl, ) { PrimaryButton( .. . ) ListItem( .. . ) } }
111. #KKON @stewemetal Override CompositionLocals @Preview @Composable private fun PreviewColumnPreview() { PreviewColumn( layoutDirection = LayoutDirection.Rtl, ) { PrimaryButton( .. . ) ListItem( .. . ) } }
112. Some more ideas 💡
113. #KKON @stewemetal Some more ideas • Check the behavior of components in interactive mode
114. #KKON @stewemetal Some more ideas • Check the behavior of components in interactive mode
115. #KKON @stewemetal Some more ideas • Use previews for preliminary accessibility checks
116. #KKON @stewemetal Some more ideas • Use previews for preliminary accessibility checks
117. #KKON @stewemetal Some more ideas • Generate previews with PreviewParemeterProviders • Providing Composables as preview parameters 🤯
118. #KKON @stewemetal Some more ideas • Generate previews with PreviewParemeterProviders • Providing Composables as preview parameters 🤯 proandroiddev.com/using-previewparameters-and-providing-composables-to-jetpack-compose-previews-5b1f5a8fe192
119. #KKON @stewemetal Some more ideas • Use previews to build a component showcase
120. #KKON @stewemetal Some more ideas • Use previews to build a component showcase github.com/airbnb/Showkase
121. #KKON @stewemetal Some more ideas • Use previews for screenshot testing
122. #KKON @stewemetal Some more ideas • Use previews for screenshot testing developer.android.com/studio/preview/compose-screenshot-testing
123. #KKON @stewemetal Some more ideas • … or just make the whole app runnable in Preview 🤷
124. #KKON @stewemetal Some more ideas • … or just make the whole app runnable in Preview 🤷 medium.com/whatnot-engineering/preview-driven-development-with-compose-f7a5beee95aa
125. Wrapping up 📦
126. Worth the effort? 🤔
127. It depends 🤷
128. #KKON @stewemetal Resources • developer.android.com/develop/ui/compose/tooling/previews • developer.android.com/topic/performance/rendering/overdraw • proandroiddev.com/using-previewparameters-and-providing-composables- to-jetpack-compose-previews-5b1f5a8fe192 • github.com/airbnb/Showkase • developer.android.com/studio/preview/compose-screenshot-testing • medium.com/whatnot-engineering/preview-driven-development-with- compose-f7a5beee95aa • Good old fi eld experience 😅
129. Practical Tips and Tricks to Improve Your Compose Previews • Compose previews are code • Simplify previews as much as possible (but go wild if it’s worth it!) • Compose custom reusable tools istvanjuhos.dev @stewemetal István Juhos Photo by Glenn Carstens-Peters