I am using the following code:

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

And I see this. I cannot see the preview of Android device. I mean I want to see the frame of the device but I don't see it. What am I missing?

How can I add a device frame?

I am using the following code:

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

And I see this. I cannot see the preview of Android device. I mean I want to see the frame of the device but I don't see it. What am I missing?

How can I add a device frame?

• android-jetpack-compose
• android-jetpack

4 Answers 4

If you want the full phyiscal device frame to show up, that is not possible currently.

The closest you can achieve is by using showSystemUi together with a device parameter, like this:

@Preview(showSystemUi = true, device = Devices.PIXEL_4A)
@Composable
fun Greeting(name: String = "you", modifier: Modifier = Modifier) {
    Text(
        text = "Hello $name!",
        modifier = modifier.safeDrawingPadding()
    )
}

You will then get a Preview that

• matches the dimensions of the selected device
• offers the cutouts / camera punch hole of the selected device
• shows the status bar and navigation pill.

Output:

You need to add something like this:

@Preview(showBackground = true)
@Composable
fun Greeting(name: String = "there", modifier: Modifier = Modifier) {
    //The screen will expand to a phones bound
    Box(Modifier.fillMaxSize()) {
        Text(
            text = "Hello $name!",
            modifier = modifier
        )
    }
}

Add @Preview(showSystemUi = true)

@Preview(showSystemUi = true)
@Composable
fun Greeting(name: String, modifier: Modifier = Modifier) {
Text(
    text = "Hello $name!",
    modifier = modifier
)
}

For More type of preview refer Preview your UI with composable previews

Use the Device Manager in Android Studio to find device IDs or reference the official documentation for available device IDs. Common options include:

• id: pixel_6_pro
• id: pixel_4
• id: pixel_3a
• id: tablet

@Preview(
    name = "Pixel 6 Pro Preview",
    showBackground = true,
    showSystemUi = true,
    device = "id:pixel_6_pro"
)
@Composable
fun MyComposablePreview() {
    MyComposable()
}