/compose-advanced-preview

Customisable Preview of system UI decoration for Jetpack Compose.

Primary LanguageKotlinApache License 2.0Apache-2.0

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