AdvancedPreview

Release

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

GitHub

View Github