Hiding the navigation bar and date in Compose preview

Viewed 29

I have the following layout built with Jetpack Compose (which is one of the default generated layouts):

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeTest1Theme {
                // A surface container using the 'background' color from the theme
                Surface(modifier = Modifier.fillMaxSize(), color = MaterialTheme.colorScheme.background) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true, showSystemUi = true)
@Composable
fun DefaultPreview() {
    ComposeTest1Theme {
        Greeting("Android")
    }
}

The preview looks like so:

enter image description here

I was wondering how you would be able to hide the date bar and the navigation bar in Compose previews with the @Preview annotation and whether or not this is currently possible:

enter image description here

I tried to study the SDK and haven't found anything that helps me achieve this, although maybe there is and I missed it or there's a workaround to get my desired result.

Any help would be appreciated.

1 Answers

showSystemUi controls this.

Change

@Preview(showBackground = true, showSystemUi = true)

to

@Preview(showBackground = true, showSystemUi = false)
Related