Android Compose: Text overlapping status bar in Preview(showSystemUi = true), not on device


I am starting my first Compose project with Android Studio (Panda 4 | 2025.3.4 Patch 1). I just opened Android Studio, slected New Project > Empty Activity, and did not add one line of code.

When I start the new app on my device, I see the "Hello Android!" displayed on top left corner of the screen, what I suppose is the expected result.

enter image description here

Now when I select Preview (on my Mac) it shows "Hello Android!" messed up with the status bar.

enter image description here

Do I miss something ?

Here is the code generated by selecting the option Empty Activity:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            ComposeDemoTheme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    Greeting(
                        name = "Android",
                        modifier = Modifier.padding(innerPadding)
                    )
                }
            }
        }
    }
}

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

@Preview(showSystemUi = true)
@Composable
fun GreetingPreview() {
    ComposeDemoTheme {
        Greeting("Android")
    }
}
0
Jun 1 at 11:45 AM
User AvatarSimon W
#android#android-studio#preview#macbookpro#compose

Accepted Answer

There was a change starting Android 15, where the edge-to-edge mode was enforced. For older Android versions, the text was automatically placed under the status bar which is not the case for newer versions. In the app the Scaffold takes care of that so you don't need to worry about padding wether the app is run on older or newer versions. But as the Scaffold does not apply to the preview, you have to add a Modifier.safeDrawingPadding() in GreetingPreview() to do the job:

@Preview(showSystemUi = true)
@Composable
fun GreetingPreview() {
    ComposeDemoTheme {
        Greeting("Android", Modifier.safeDrawingPadding())
    }
}

will give you a preview consistent with the app.

User AvatarSimon W
Jun 1 at 2:42 PM
0