Customisable Preview of system UI decoration for Jetpack Compose.

Related tags

Jetpack Compose compose-advanced-preview
Overview

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>"
}
You might also like...
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose
Jetpack-Compose-Demo - Instagram Profile UI using Jetpack Compose

Jetpack-Compose-Demo Instagram Profile UI using Jetpack Compose

omar 1 Aug 11, 2022
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose
Jetpack-compose-animations-examples - Cool animations implemented with Jetpack compose

Jetpack-compose-animations-examples This repository consists of 4 animations: St

Canopas Software 180 Jan 2, 2023
Compose-navigation - Set of utils to help with integrating Jetpack Compose and Jetpack's Navigation

Jetpack Compose Navigation Set of utils to help with integrating Jetpack Compose

Adam Kobus 5 Apr 5, 2022
Jetpack-compose-uis - A collection of some UIs using Jetpack Compose. built using Katalog

Jetpack Compose UIs This is a collection of some UIs using Jetpack Compose. It i

Mori Atsushi 3 Dec 15, 2022
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose
A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose

Authentication A simple authentication application using Jetpack compose to illustrate signin and sign up using Mvvm, Kotlin and jetpack compose Scree

Felix Kariuki 5 Dec 29, 2022
Android app for Taiga agile system
Android app for Taiga agile system

TaigaMobile This is unofficial android app for taiga.io (agile project management system) built with Jetpack Compose (brand new UI toolkit from Google

Eugene 112 Dec 30, 2022
A high-performance Android system parasitic container.

Mizuki A high-performance Android system parasitic container. This is a project idea that will be realized in a few years time. License GPL-3.0 Copyri

Fankesyooni 1 Jan 10, 2022
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries
An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries

An application that i developed with a aim of learning Jetpack compose and many other jetpack libraries, The application make use of jikan Api which displays a list of animations,there more details and even trailers of the animations.

Odhiambo Brandy 10 Nov 23, 2022
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.
A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many compose features are not yet available.

Multiplatform Compose A Kotlin library to use Jetpack Compose in Android and iOS. Allow to write UI for both in Kotin. Still experimental as many comp

Clément Beffa 548 Jan 7, 2023
Releases(v0.1.0)

  • v0.1.0(Dec 6, 2021)

    First release 🚀

    What's Changed

    • Choose custom screen size with system UI decoration
    • Customise color (background and icons) of StatusBar and NavigationBar
    • Customise the height of StatusBar
    • Switch NavigationBar to Gesture Navigation
    • Draw content behind StatusBar and NavigationBar, with build-in support for layouts using accompanist-insets
    • Customise time displayed on StatusBar
    • Configure background color
    Source code(tar.gz)
    Source code(zip)
Owner
Mobnetic
Mobnetic
GitHub
Demonstration of an issue trying to render a preview in Jetpack Compose without the activity artifact.

Demonstration of an issue trying to render a preview in Jetpack Compose without the activity artifact.

Adam McNeilly 1 Mar 14, 2022
A lightweight particle system for Jetpack Compose - Quarks

compose-particle-system Quarks is a lightweight particle system for Jetpack Compose. There are endless possibilities for creating generative art with

Nikhil Chaudhari 41 Dec 28, 2022
A sample of how to implement a design system in Jetpack Compose

[WIP] Sample Design System This project aims to hold an example of how to implement a design system with Jetpack Compose. At this moment it only has t

Fábio Carballo 4 Dec 2, 2021
Fake Toss Design System with Jetpack Compose

FTDS Fake Toss Design System Let's clone TDS with Jetpack Compose! TDS의 모든 면을 따라

Fake Toss 1 Apr 18, 2022
Andromeda is a open-source design language system implemented in Jetpack Compose.

Andromeda Andromeda is a open-source design language system implemented in Jetpack Compose. Catalog app Table of Contents About the Project Getting St

Adit Lal 140 Dec 25, 2022
Decathlon Design System UI components for Compose applications

Vitamin Compose Decathlon Design System libraries for android applications Website Compose Decathlon Design System is based on Material Design compose

Decathlon 168 Dec 22, 2022
Jetpack Compose Boids | Flocking Insect 🐜. bird or Fish simulation using Jetpack Compose Desktop 🚀, using Canvas API 🎨

?? ?? ?? Compose flocking Ants(boids) ?? ?? ?? Jetpack compose Boids | Flocking Insect. bird or Fish simulation using Jetpack Compose Desktop ?? , usi

Chetan Gupta 38 Sep 25, 2022
A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Why Not Compose! A collection of animations, compositions, UIs using Jetpack Compose. You can say Jetpack Compose cookbook or play-ground if you want!

Md. Mahmudul Hasan Shohag 186 Jan 1, 2023
Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

Learn Jetpack Compose for Android by Examples. Learn how to use Jetpack Compose for Android App Development. Android’s modern toolkit for building native UI.

MindOrks 382 Jan 5, 2023
This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Compose.

JetBMICalculator This is a sample app(For beginners - App #2) built using Jetpack Compose. It demonstrates the concept of State Hoisting in Jetpack Co

BHAVNA THACKER 3 Dec 31, 2022