It’s finally time to go

Edge to Edge

Hugo Visser

hugo@littlerobots.nl

​

What is edge to edge?

Content area of the app is drawn between the status bar and navigation bar

What is edge to edge?

​

Content area of the app is the entire screen, overlapping the status bar and navigation bar

Rainy Days

Lees Simpel

Soosee

Brief history lesson

Android 4.4 Kitkat (2013)

Status and navigation bar translucent

Android 5 Lollipop (2014)

Status and navigation bar colors

Android 9 Pie (2018)

Initial gesture navigation

Android 10 Pie (2019)

Gesture navigation, system bar protection

Why now?

• Android 15 enforces Edge to Edge (when you target sdk 35)

Note:

• APIs to set status & navigation bar colors are deprecated
• Also affects handling of IME

Going edge to edge

1. Enable edge to edge
2. Handle visual overlaps
3. Decide on scrims for system bars

​

Enable edge to edge

• setSystemUiVisibility
• WindowCompat.setDecorFitsSystemWindows(window, false)
• WindowInsetsControllerCompat
• enableEdgeToEdge() in onCreate() (androidx.activity)

​

enableEdgeToEdge()

• Also on Android 15!
• Enables edge to edge on API <35
• Setup of status and navigation light/dark appearance & scrims

enableEdgeToEdge()

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

enableEdgeToEdge()

setContent {

// compose stuff

}

}

​

enableEdgeToEdge()

Specify SystemBarStyle

• SystemBarStyle.auto() → switch light/dark based on ui night mode
• SystemBarStyle.light() → always light
• SystemBarStyle.dark() → always dark

fun ComponentActivity.enableEdgeToEdge(

statusBarStyle: SystemBarStyle = SystemBarStyle.auto(Color.TRANSPARENT, Color.TRANSPARENT),

navigationBarStyle: SystemBarStyle = SystemBarStyle.auto(DefaultLightScrim, DefaultDarkScrim)

)

​

SystemBarStyle.auto()

• API 29+: default platform scrim colors (only for 3 button nav)
• API < 29: specified scrim colors (status bar and nav bar)
• edgeToEdge() sets the API 29 scrim for nav bar, status bar always transparent
• Light status bar or dark status bar based on ui dark mode flag
• Custom condition can be used (for example: override in app)

SystemBarStyle.light/dark()

• API 35: nav bar and status bar are always transparent
• API < 35: specified scrim colors (status bar and nav bar)
• Also for gesture navigation!
• sets isNavigationBarContrastEnforced to false
• light() takes 2 scrim values, dark scrim is only used on (very) old versions of Android

My recommendation

• Use auto()
• Transparent status bar, nav bar scrim for 3 button nav only
• Set scrim colors to 0 for targetSdk >= 29
• Adjust detectDarkMode as needed
• When using light/dark set scrim transparent for consistency with API 35
• Draw the system bar background(s) if needed

enableEdgeToEdge()

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

enableEdgeToEdge(

statusBarStyle = SystemBarStyle.auto(0, 0, { /* dark */ true }),

navigationBarStyle = SystemBarStyle.auto(0, 0, { /* dark */ true })

)

setContent {

// compose stuff

}

}

​

Handle visual overlap

Window insets

• Describe the areas for system elements
• System bars
• Software keyboard
• Display cutouts
• Gesture areas
• For views: WindowInsetsCompat.Type
• For compose: WindowInsets.Companion

Common insets

• statusBars
• navigationBar
• ime
• displayCutout

Lesser used

• captionBar
• tappableElement
• waterfall
• systemGestures

Combined insets

• systemBars
• Union of statusBars, navigationBar and captionBar
• safeDrawing
• Area that the app can draw without overlapping any visual system element
• safeContent
• Safe drawing + all areas for system gestures (tapableElement, waterfall, systemGestures)

Applying insets (views)

Applying insets (views)

ViewCompat.setOnApplyWindowInsetsListener(fab) { v, windowInsets ->

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

// Apply the insets as a margin to the view. This solution sets

// only the bottom, left, and right dimensions, but you can apply whichever

// insets are appropriate to your layout. You can also update the view padding

// if that's more appropriate.

v.updateLayoutParams<ViewGroup.MarginLayoutParams> {

leftMargin = insets.left

bottomMargin = insets.bottom

rightMargin = insets.right

}

​

// Return CONSUMED if you don't want want the window insets to keep passing

// down to descendant views.

WindowInsetsCompat.CONSUMED

}

​

Applying insets (views)

​

• Use ViewCompat.setOnApplyWindowInsetsListener()
• Update padding or margin
• Consume the applied amount or return CONSUMED
• Determines which insets child views receive

Tips & tricks

​

• Adding margin/padding to existing values
• https://github.com/chrisbanes/insetter

Window insets in Compose

• Apply padding through modifiers
• Modifier.windowInsetsPadding(...)
• Set the size based on insets
• Modifier.windowInsets*Height(...)
• Modifier.windowInsets*Width(...)
• Convenience modifiers
• Modifier.systemBarsPadding()
• Modifier.navigationBarsPadding()
• …
• Consumes the window insets for ancestors

Window insets in Compose

• Get the window inset sizes
• WindowInsets.systemBars.asPaddingValues()
• Does not consume the insets
• Modifier.consumeWindowInsets(...)
• Does :)
• To explicitly consume when using window insets directly or for non-ancestors

​

Demo

​

​

Tips & tricks

• If possible, use safeDrawing to prevent accidental overlaps
• Use WindowInsetSides to select parts of the insets
• More specific insets for more control
• Don’t forget the IME & display cutout
• For IME insets use android:windowSoftInputMode="adjustResize"

Default insets handling

• Material 3 (views & compose):
• App bars, containers, sheets etc take insets into account
• Also allow for overrides
• Material 2
• Recent versions allow for specifying insets

​

​

​

Scaffold

Scaffold(topBar = {

// applies top + horizontal systembars padding

TopAppBar({ Text("My App") })

}) { innerPadding ->

// innerPadding contains inset information for you to use and apply

LazyColumn(

// consume insets as scaffold doesn't do it by default (optional)

modifier = Modifier.consumeWindowInsets(innerPadding),

contentPadding = innerPadding

) {

// ..

}

}

​

​

LazyColumn

• Set contentPadding to insets
• paddingValues from Scaffold
• WindowInsets.safeDrawing.asPaddingValues()
• Add spacer as the last item
• Height of the navigationBar inset
• When you have TextFields in the list

​

​

LazyColumn

LazyColumn(

Modifier.imePadding()

) {

// Other content

item {

Spacer(

Modifier.windowInsetsBottomHeight(

WindowInsets.systemBars

)

)

}

}

​

​

​

Testing

• Emulator
• Display cutout might not work (depends on image)
• Issue with navigation bar appearance?
• Compose previews
• Always emulate edge-to-edge
• Can emulate notch & display cutout
• Integrate into screenshot testing
• But: 3 button nav not always correct

Demo

Resources

https://developer.android.com/develop/ui/views/layout/edge-to-edge

https://medium.com/androiddevelopers/insets-handling-tips-for-android-15s-edge-to-edge-enforcement-872774e8839b

​

Q&A