Anyway, why is the app on full screen and the UI is crushed?

Let's see how to solve it in Android 15.

Because there's something called Edge-to-Edge itself.

And what is it? How to come? How to fix it? Let's read.

A little long code. Press Save first. There is a block under the comment.

.

🟢 know the window insets first?

With Edge-to-Edge, it displays our app page. It covers window insets like status bar and navigation bar. There is a problem pressing certain buttons around it.

The status bar will be above, showing states such as batteries, network connections, times, and notifications.

The navigation bar is below. Some use a 3-button, some use a gesture, so the size is not the same. The 3-button has more space below to press the button.

-

🟢 So how did Edge-to-Edge get it?

If a machine is Android 15 or above and the app set up the TargetSdkVersion = 35, it will automatically get this.

But if you want to open the edge-to-edge, you can put

'WindowCompat.enableEdgeToEdge (window) 'is available at' onCreate () 'of the Activity. Or, if you are a Jetpack Compose, you will put' enableEdgeToEdge () 'in' onCreate () '.

But most probably don't want to open it because it overlaps the status bar above and the navigation bar below, which is a full screen, but the UI is not pretty.

-

🟢. What should I do if I want to do the same?

Because sometimes the toolbar has been crushed by the status bar, sometimes the navigation bar is crushed on the app screen. For those who use a button, if there is a button or something below, it is difficult to press.

❌, the way we often see it, but he doesn't recommend it, is to put 'android: fitsSystemWindows = "true"' at the root layout in xml because it's already a legacy and can make complex UI management more difficult in the long run.

✅ The way Google recommends is to overlap with window insets to calculate the right space for our Layout.

Add the status bar area and navigation bar as follows:

"'kotlin.

ViewCompat. setOnApplyWindowInsetsListener (binding.rootview) {view, windowInsets - >

val insets = windowInsets.getInsets (WindowInsetsCompat.Type.systemBars ())

view.setPadding (0, insets.top, 0, insets.bottom)

WindowInsetsCompat. CONSUMED

}

/ / Handle AppBarLayout insets to add spacing between status bar and toolbar

ViewCompat. setOnApplyWindowInsetsListener (binding.appBarLayout) {view, windowInsets - >

val insets = windowInsets.getInsets (WindowInsetsCompat.Type.statusBars ())

view.setPadding (0, insets.top, 0, 0)

WindowInsetsCompat. CONSUMED

}

/ / Handle navigation bar insets at LinearLayout level to prevent content from going under navigation bar

ViewCompat. setOnApplyWindowInsetsListener (binding.contentLinearLayout) {view, windowInsets - >

val insets = windowInsets.getInsets (WindowInsetsCompat.Type.navigationBars ())

view.setPadding (0, 0, 0, insets.bottom)

WindowInsetsCompat. CONSUMED

}

"'

- Retrieve the Insets we need. For example, if you take both the Status Bar above and the Navigation Bar below, put Type .systemBars (), just the Status Bar and Type .systemBars (). Navigation Bar will be Type .navigationBars ().

- Define a padding to the view that we want not to be overlapped. Here is the rootview.

- Restore CONSUMED to say we've handled this Insets.

-

🟢. How's the Status Bar paint handled?

Another thing to deal with is the Status Bar above, polished white, so I can't see the system icon. How to fix it? Support dark mode apps.

"'kotlin.

val isLightMode = resources.configuration.uiMode and Configuration.UI _ MODE _ NIGHT _ MASK = = Configuration.UI _ MODE _ NIGHT _ NO

WindowCompat.getInsetsController (window, window.decorView). isAppearanceLightStatusBars = isLightMode

"'

- Check if the app is now a light model or dark mode.

- Run the controller and switch the icon to the opposite of the background. For example, if it is a light mode, it will be a white floor. Display the icon in black.

But if there's another way better than friends can present it, or maybe color the UI page?

.

🟢 What if in Jetpack Compose?

The 'safeDrawingPadding ()' can be added to the Row, Column or Box modifier we need so that the content does not overlap system bars.

But if only the Status Bar uses' statusBarsPadding 'or the Navigation Bar uses' navigationBarsPadding () '

"'kotlin.

Column (

Modifier = Modifier. SafeDrawingPadding ()

) {

/ / content

}

Column (

Modifier = Modifier

.statusBarsPadding ()

. navigationBarsPadding ()

) {

/ / content

}

"'

In the status bar display, you can add SideEffect to Theme.

"'kotlin.

@ Composable

Fun GasTrackerTheme (

Dark Theme: Boolean = isSystemInDarkTheme (),

/ / Dynamic color is available on Android 12 +

DynamicColor: Boolean = true,

Content: @ Composable () - > Unit

) {

/ /...

If (! view.isInEditMode) {

SideEffect {

val window = (view.context as Activity). window

window.statusBarColor = android.graphics. TRANSPARENT

WindowCompat.getInsetsController (window, view). isAppearanceLightStatusBars =! darkTheme

}

}

/ /....

}

"'

Any friends who find a strange case when doing Edge-to-Edge or have a technique to handle this problem can share it. 👇

# Includes IT matters # Android Disciple # programmer # Developer # Lemon 8 Howtoo