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
- How to setup default
AdvancedPreview
and how it looks against standard @Preview
AdvancedPreview |
Standard @Preview |
|
|
- 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 |
|
|
- 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