AdvancedPreview

Customisable Preview of system UI decoration for Jetpack Compose.

Use cases

• Want the Preview in Android Studio to look more like in real app on device.
• Save preview output for marketing or documentation purposes.
• You have automated capturing of Composables in code and would like them to be decorated with system UI.

Documentation

@Composable
fun AdvancedPreview(
    device: Device,
    statusBar: StatusBar,
    navigationBar: NavigationBar,
    backgroundColor: Color,
    time: StatusBarTime,
    content: @Composable () -> Unit
)

Device

Property	Description
screenWidth screenHeight	Configure specific screen size. Default size is the same as @Preview(showSystemUi = true)
statusBarSize	Specify custom StatusBar size. Default value is 24.dp
navigationType	Choose between navigation types: NavigationType.ThreeButtons or NavigationType.Gesture

StatusBar / NavigationBar

Property	Description
color	Control the background color
darkIcons	Control whether icons are light of dark
overlaysContent	Draw content behind the bar, allowing for edge-to-edge content. There's a build-in support for Accompanist-inset.

Time

Property	Description
hours and minutes	Customize time displayed on StatusBar

... other

Property	Description
backgroundColor	Specify background color for entire Preview

Usage

Simply wrap your screen Composable with AdvancedPreview.
Configuration should be done in AdvancedPreview instead of passing arguments to @Preview annotation.

@Preview
@Composable
private fun SampleScreenPreview() {
    YourAppTheme {
        AdvancedPreview {
            SampleScreen()
        }
    }
}

Samples

Sample1 demonstrates:

• How to setup default AdvancedPreview and how it looks against standard @Preview

AdvancedPreview	Standard @Preview

Sample2 demonstrates:

• Translucent StatusBar and NavigationBar that overlay the screen's content.
• Screen uses Accompanist-inset which works out-of-the-box with AdvancedPreview.

AdvancedPreview	Standard @Preview

Sample3 demonstrates:

• Light background with dark icons on StatusBar and NavigationBar.
• Tall StatusBar
• Gesture Navigation.

AdvancedPreview	Standard @Preview

Download

repositories {
    maven { url 'https://jitpack.io' }
}

dependencies {
    implementation "com.mobnetic:compose-advanced-preview:<version>"
}