Practical Tips and Tricks to Improve Your Compose Previews (Droidcon Lisbon 2025)

@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 @istvanjuhos.dev

@istvanjuhos.dev #dclx25 Context and tooling

Food for thought 🍲💭

@istvanjuhos.dev #dclx25 XML preview

@istvanjuhos.dev #dclx25 Compose preview

@istvanjuhos.dev #dclx25 @Preview @Composable private fun PreviewListItem() { AppTheme {
ListItem( text = "List item", onClick = {}, ) } } Compose preview

ListItem( text = "List item", onClick = {}, ) } } • Code Compose preview

@istvanjuhos.dev #dclx25 • Code, that • will never reach production
@Preview @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview

@istvanjuhos.dev #dclx25 • Code, that • will never reach productio
n … 🤞 @Preview @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview

@istvanjuhos.dev #dclx25 • Code, that • will never reach production…
• others will read 🤞 @Preview @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview

• others will read • needs to be maintained 🤞 @Preview @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview

• others will read • needs to be maintained • communicates via tooling 🤞 @Preview @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Compose preview

Consider IDE themes 🎨

@istvanjuhos.dev #dclx25 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) ) } }

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) ) } }

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,

@istvanjuhos.dev #dclx25 Consider IDE themes @Preview @Composable private fun PreviewListItem()
{ AppTheme { ListItem( text = "List item", onClick = {}, ) } }

ListItem( text = "List item", onClick = {}, ) } } Consider IDE themes

@istvanjuhos.dev #dclx25 @Preview( showBackground = true, ) @Composable private fun
PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Consider IDE themes

PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Consider IDE themes vs

Use annotation parameters ⚙

PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Use annotation parameters

@istvanjuhos.dev #dclx25 @Preview( showBackground = true, backgroundColor = 0xFF_E7ECF4, )
@Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Use annotation parameters

@istvanjuhos.dev #dclx25 @Preview( showBackground = true, backgroundColor = 0xFF_E7ECF4, //
gray.w500 ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } Use annotation parameters

@istvanjuhos.dev #dclx25 Use annotation parameters @Preview( showBackground = true, backgroundColor
= GRAY_W500, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } } const val GRAY_W500 = 0xFF_E7ECF4 ...

= GRAY_W500, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }

= GRAY_W500, uiMode = Configuration.UI_MODE_NIGHT_YES, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }

= GRAY_W500, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, ) } }

= GRAY_W500, ) @Preview( showBackground = true, backgroundColor = GRAY_W500, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, )

= GRAY_W500, ) @Preview( showBackground = true, backgroundColor = DARK_GRAY_W500, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {}, )

= GRAY_W500, ) @Preview( showBackground = true, backgroundColor = DARK_GRAY_W500, uiMode = Configuration.UI_MODE_NIGHT_YES, ) @Composable private fun PreviewListItem() { AppTheme { ListItem( text = "List item", onClick = {},

@istvanjuhos.dev #dclx25 Preview annotation parameters android x .compose.ui.tooling.preview @Preview( ...
) ✅

@istvanjuhos.dev #dclx25 Preview annotation parameters android x .compose.ui.tooling.preview @Preview( ...
)

@istvanjuhos.dev #dclx25 Preview annotation parameters org.jetbrain s .compose.ui.tooling.preview @Preview

@istvanjuhos.dev #dclx25 Preview annotation parameters ✅ org.jetbrain s .compose.ui.tooling.preview @Preview(
... ) CMP 1.9-beta01+

@istvanjuhos.dev #dclx25 Preview annotation parameters jetbrains.com/help/kotlin-multiplatform-dev/whats-new-compose-190.html CMP 1.9-beta01+

@istvanjuhos.dev #dclx25 Preview annotation parameters android x .compose.ui.tooling.preview org.jetbrain s
.compose.ui.tooling.preview @Preview( name = "", group = "", widthDp = 360, heightDp = 640, locale = "pt_PT", showBackground = true, backgroundColor = 0xFFFFFF, showSystemUi = true, apiLevel = 35, fontScale = 1f, uiMode = UI_MODE_NIGHT_YES, device = PIXEL_9_PRO_FOLD, wallpaper = GREEN_DOMINATED_EXAMPLE, ) @Preview( name = "", group = "", widthDp = 360, heightDp = 640, locale = "pt_PT", showBackground = true, backgroundColor = 0xFFFFFF )

Name your previews 👤

@istvanjuhos.dev #dclx25 @Preview @Composable private fun PreviewListItem() { ... }
Name your previews

@istvanjuhos.dev #dclx25 @Preview( ... ) @Preview( ... ) @Composable private
fun PreviewListItem() { ... } Name your previews

@istvanjuhos.dev #dclx25 @Preview( name = "Light - Primary", ... )
@Preview( name = "Dark - Primary", ... ) @Composable private fun PreviewListItem() { ... } Name your previews

@istvanjuhos.dev #dclx25 @Preview( name = "Light - Secondary", ... )
@Preview( name = "Dark - Secondary", ... ) @Composable private fun PreviewListItem() { ... } Name your previews

@istvanjuhos.dev #dclx25 @Preview( ... ) @Preview( ... ) @Preview( ...
) @Preview( ... ) @Composable private fun PreviewListItem() { ... } Name your previews

Group your previews 🏘

@istvanjuhos.dev #dclx25 @Preview @Composable private fun PreviewListItem() { ... }
Group your previews

@istvanjuhos.dev #dclx25 @Preview( name = "Light - Primary", group =
"Light/Dark - Primary", ... ) @Preview( name = "Dark - Primary", group = "Light/Dark - Primary”, ... ) @Composable private fun PreviewListItem() { ... } Group your previews

@istvanjuhos.dev #dclx25 @Preview( name = "Light - Secondary", group =
"Light/Dark - Secondary", ... ) @Preview( name = "Dark - Secondary", group = "Light/Dark - Secondary", ... ) @Composable private fun PreviewListItem() { ... } Group your previews

) @Preview( ... ) @Composable private fun PreviewListItem() { ... } Group your previews

Create multipreviews 👥

) @Preview( ... ) @Composable private fun PreviewListItem() { ... } Create multipreviews

@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

@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

@PreviewPrimaryBackground @PreviewSecondaryBackground @Composable private fun PreviewListItem() { AppTheme { ListItem(
text = "List item", onClick = {}, ) } } Create multipreviews

@istvanjuhos.dev #dclx25 @PreviewPrimaryBackground @PreviewSecondaryBackground @Composable private fun PreviewListItem() { AppTheme
{ ListItem( text = "List item", onClick = {}, ) } } Create multipreviews

@istvanjuhos.dev #dclx25 @Composable private fun PreviewListItem() { AppTheme { ListItem(
text = "List item", onClick = {}, ) } } Create multipreviews @PreviewPrimaryBackground @PreviewSecondaryBackground annotation class PreviewAllBackgrounds

@istvanjuhos.dev #dclx25 @PreviewAllBackgrounds @Composable private fun PreviewListItem() { AppTheme {
ListItem( text = "List item", onClick = {}, ) } } Create multipreviews @PreviewPrimaryBackground @PreviewSecondaryBackground annotation class PreviewAllBackgrounds

Check out Multipreview templates 👥

@istvanjuhos.dev #dclx25 @PreviewLightDark @PreviewFontScale @Previe w ScreenSizes Multipreview templates androidx.compose.ui.tooling.preview

@istvanjuhos.dev #dclx25 Multipreview templates @PreviewLightDark @PreviewFontScale @Previe w ScreenSizes androidx.compose.ui.tooling.preview

@istvanjuhos.dev #dclx25 androidx.compose.ui.tooling.preview @PreviewLightDark @PreviewFontScale @Previe w ScreenSizes @PreviewDynamicColors Multipreview
templates

@istvanjuhos.dev #dclx25 Multipreview templates androidx.compose.ui.tooling.preview @PreviewLightDark @PreviewFontScale @Previe w ScreenSizes
@PreviewDynamicColors ✅ developer.android.com/develop/ui/compose/tooling/previews#multipreview-templates

@istvanjuhos.dev #dclx25 Multipreview support with CMP org.jetbrain s .compose.ui.tooling.preview @Preview

@Preview

@Preview 🤔

@istvanjuhos.dev #dclx25 Multipreview support with CMP CMP 1.9-beta01+ org.jetbrain s
.compose.ui.tooling.preview @Preview

@istvanjuhos.dev #dclx25 Multipreview support with CMP org.jetbrain s .compose.ui.tooling.preview @Preview(
name = "Example preview name", group = "Example preview group", showBackground = true, backgroundColor = GRAY_W500, widthDp = 1080, heightDp = 1920, locale = "pt_PT", ) CMP 1.9-beta01+

@istvanjuhos.dev #dclx25 Multipreview examples - MultiThemePreview @Preview( name = "Dark
mode", group = "Theme", uiMode = Configuration .UI_MODE_NIGHT_YES ) @Preview( name = "Default", group = "Theme", ) annotation class MultiThemePreview

@istvanjuhos.dev #dclx25 Multipreview examples - MultiLocationPreview @Preview( name = "Greek",
group = "Locale", locale = "el", ) ... @Preview( name = "Portuguese", group = "Locale", locale = "pt", ) @Preview( name = "Arabic", group = "Locale", locale = "ar", ) @Preview( name = "(Default locale)", group = "Locale", ) annotation class MultiLocalePreview

Build custom tools 🪛

@istvanjuhos.dev #dclx25 @PreviewLightDark @Composable private fun PrimaryButtonPreview() { AppTheme {
PrimaryButton( text = "Primary Button", leadingIcon = R.drawable.ic_add, onClick = {}, ) } } Let’s build our preview

@istvanjuhos.dev #dclx25 @PreviewLightDark @Composable private fun PrimaryButtonPreview() { PreviewBox {
PrimaryButton( ... ) } } Let’s build tools!

@istvanjuhos.dev #dclx25 Building preview tools @Composable fun PreviewBox( modifier: Modifier
= Modifier, content: @Composable () -> Unit, ) { }

@istvanjuhos.dev #dclx25 @Composable fun PreviewBox( modifier: Modifier = Modifier, content:
@Composable () -> Unit, ) { AppTheme { content() } } Building preview tools

@istvanjuhos.dev #dclx25 @Composable fun PreviewBox( modifier: Modifier = Modifier, content:
@Composable () -> Unit, ) { AppTheme { Box { content() } } } Building preview tools

@istvanjuhos.dev #dclx25 @Composable fun PreviewBox( modifier: Modifier = Modifier, backgroundColor:
@Composable () -> Color = content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor()), ) { content() } } } Building preview tools

@Composable () -> Color = { AppTheme.colors.backgroundSecondary }, content: @Composable () -> Unit, ) { AppTheme { Box( modifier = modifier .background(backgroundColor()), ) { content() } } } Building preview tools

@Composable () -> Color = { AppTheme.colors.backgroundSecondary }, content: @Composable () -> Unit, ) { AppTheme { Box( ... ) { content() } } } Building preview tools

@Composable () -> Color = { AppTheme.colors.backgroundSecondary }, paddingValues: PaddingValues = PaddingValues(4.dp), content: @Composable () -> Unit, ) { AppTheme { Box( ... ) { content() } } } Building preview tools

@istvanjuhos.dev #dclx25 @Composable fun Previe w Box( ... content: @Composable
() -> Unit, ) { AppTheme { Box( ... ) { content() } } } Building preview tools

@istvanjuhos.dev #dclx25 @Composable fun Previe w Column( ... content: @Composable
() -> Unit, ) { AppTheme { Column( ... ) { content() } } } Building preview tools

@istvanjuhos.dev #dclx25 @Composable fun PreviewDialog( modifier: Modifier = Modifier, factory:
(context: Context) -> Dialog, ) { PreviewBox( contentPadding = PaddingValues(), ) { AndroidView( modifier = modifier, factory = { context -> val dialog = factory(context) dialog.create() val view = dialog.findViewById<View>(android.R.id.content) (view.parent as ViewGroup).removeView(view) view }, ) } } Building preview tools

Override CompositionLocals 🗺

@istvanjuhos.dev #dclx25 Override CompositionLocals @Composable fun PreviewColumn( ... content: @Composable
() -> Unit, ) { AppTheme { Column( ... ) { content() } } }

@istvanjuhos.dev #dclx25 Override CompositionLocals @Composable fun PreviewColumn( ... layoutDirection: LayoutDirection
= LayoutDirection.Ltr, content: @Composable () -> Unit, ) { AppTheme { Column( ... ) { content() } } }

@istvanjuhos.dev #dclx25 Override CompositionLocals @Composable fun PreviewColumn( ... layoutDirection: LayoutDirection
= LayoutDirection.Ltr, content: @Composable () -> Unit, ) { CompositionLocalProvider( LocalLayoutDirection provides layoutDirection, ) { AppTheme { Column( ... ) { content() } } } }

@istvanjuhos.dev #dclx25 Override CompositionLocals @PreviewLightDark @Composable private fun PreviewColumnPreview() {
PreviewColumn { PrimaryButton( ... ) ListItem( ... ) } }

PreviewColumn( layoutDirection = LayoutDirection.Ltr, ) { PrimaryButton( ... ) ListItem( ... ) } }

PreviewColumn( layoutDirection = LayoutDirection.Rtl, ) { PrimaryButton( ... ) ListItem( ... ) } }

PreviewColumn( layoutDirection = LayoutDirection.Rtl, ) { PrimaryButton( .. . ) ListItem( .. . ) } }

Make previews interactive 🎮

Circuit Route Planner / Circuit for Teams

Make previews interactive 🎮

@istvanjuhos.dev #dclx25 Make previews interactive @Composable fun FloatingPinMapOverlay( isLifted: Boolean,
modifier: Modifier = Modifier, ) { ... }

modifier: Modifier = Modifier, ) { /* Some beautifully animated content */ }

modifier: Modifier = Modifier, ) { /* Some beautifully animated content */ } @Preview @Composable private fun PreviewFloatingPinMapOverlay() { var isLifted by remember { mutableStateOf(false) } PreviewBox( . .. modifier = Modifier.clickable { isLifted = !isLifted }, ) { FloatingPinMapOverlay( isLifted = isLifted, ) } }

@istvanjuhos.dev #dclx25 Make previews interactive ... . ..

@istvanjuhos.dev #dclx25 Make previews interactive ... . .. ✅

@istvanjuhos.dev #dclx25 Make previews interactive ✅

@istvanjuhos.dev #dclx25 Make previews interactive

Some more ideas 💡

@istvanjuhos.dev #dclx25 Some more ideas • Use previews for screenshot
testing

@istvanjuhos.dev #dclx25 Some more ideas • Use previews for screenshot
testing github.com/sergio-sastre/ComposablePreviewScanner

@istvanjuhos.dev #dclx25 Some more ideas • … make the whole
app runnable in Preview 🤷

@istvanjuhos.dev #dclx25 Some more ideas • … make the whole
app runnable in Preview 🤷 medium.com/whatnot-engineering/preview-driven-development-with-compose-f7a5beee95aa

Wrapping up 📦

Worth the effort? 🤔

It depends 🤷

It depends 🤷 🫸

It sure does! 🤩 👌

It sure does! 🤩

@istvanjuhos.dev #dclx25 🛝 🛝 + resources istvanjuhos.dev

Practical Tips and Tricks to Improve Your Compose Previews •
Think of Previews as a form of communication • Create at least one Preview per unit of UI • Compose reusable tools to ease Preview development istvanjuhos.dev István Juhos Photo by Glenn Carstens-Peters

Practical Tips and Tricks to Improve Your Compo...

Practical Tips and Tricks to Improve Your Compose Previews (Droidcon Lisbon 2025)

More Decks by István Juhos

Other Decks in Programming

Featured

Transcript