Edge To Edge

Prerequisites

• Project MUST use Android Jetpack Compose.
• Project MUST target SDK 35 or later. If the SDK is lower than 35, increase the SDK to 35.

Step 1: plan

1. Locate and analyze all Activity classes to detect which have existing edge-to-edge support. For every Activity without edge-to-edge, plan to make each Activity edge-to-edge.
2. In each Activity, Locate and analyze all lists and FAB components to detect which have existing edge-to-edge support. For every component without edge-to-edge support, plan to make each of these components edge-to-edge.
3. In each Activity, scan for TextField, OutlinedTextField, or BasicTextField. If found, then you MUST verify the IME doesn't hide the input field by following the IME section of this skill.

Step 2: add edge-to-edge support

1. Add enableEdgeToEdge before setContent in onCreate in each Activity that does not already call enableEdgeToEdge.
2. Add android:windowSoftInputMode="adjustResize" in the AndroidManifest.xml for all Activities that use a soft keyboard.

Step 3: apply insets

• The app MUST apply system insets, or align content to rulers, so critical UI remains tappable. Choose only one method to avoid double padding:

  1. PREFERRED: When available, use Scaffolds and pass PaddingValues to the content lambda.

  <br />

  Scaffold { innerPadding ->
      // innerPadding accounts for system bars and any Scaffold components
      LazyColumn(
          modifier = Modifier
              .fillMaxSize()
              .consumeWindowInsets(innerPadding),
          contentPadding = innerPadding
      ) { /* Content */ }
  }
       

  <br />

  1. PREFERRED: When available, use the automatic inset handling or padding modifiers in material components.

     • Material 3 Components manages safe areas for its own components, including:
       • TopAppBar
       • SmallTopAppBar
       • CenterAlignedTopAppBar
       • MediumTopAppBar
       • LargeTopAppBar
       • BottomAppBar
       • ModalDrawerSheet
       • DismissibleDrawerSheet
       • PermanentDrawerSheet
       • ModalBottomSheet
       • NavigationBar
       • NavigationRail
     • For Material 2 Components, use the windowInsetsparameter to apply insets manually for BottomAppBar, TopAppBar and BottomNavigation. DO NOT apply padding to the parent container; instead, pass insets directly to the App Bar component. Applying padding to the parent container prevents the App Bar background from drawing into the system bar area. For example, for TopAppBar, choose only one of the following options:
       1. PREFERRED: TopAppBar(windowInsets = AppBarDefaults.topAppBarWindowInsets)
       2. TopAppBar(windowInsets = WindowInsets.systemBars.exclude(WindowInsets.navigationBars))
       3. TopAppBar(windowInsets = WindowInsets.systemBars.add(WindowInsets.captionBar))

  2. For components outside a Scaffold, use padding modifiers, such as Modifier.safeDrawingPadding() or Modifier.windowInsetsPadding(WindowInsets.safeDrawing).

     <br />

     Box(
         modifier = Modifier
             .fillMaxSize()
             .safeDrawingPadding()
     ) {
         Button(
             onClick = {},
             modifier = Modifier.align(Alignment.BottomCenter)
         ) {
             Text("Login")
         }
     }
            

     <br />

  3. For deeply nested components with excessive padding, use WindowInsetsRulers (e.g. Modifier.fitInside(WindowInsetsRulers.SafeDrawing.current)). See the IME section for a code sample.

  4. When you need an element (e.g. a custom header or decorative scrim) to equal the dimensions of a system bar, use inset size modifiers (e.g. Modifier.windowInsetsTopHeight(WindowInsets.systemBars)). See the Lists section for a code sample.

Adaptive Scaffolds

• NavigationSuiteScaffold manages safe areas for its own components, like the NavigationRail or NavigationBar. However, the adaptive scaffolds (e.g. NavigationSuiteScaffold, ListDetailPaneScaffold) don't propagate PaddingValues to their inner contents. You MUST apply insets to individual screens or components (e.g., list contentPadding or FAB padding) as described in Step 3 . DO NOT apply safeDrawingPadding or similar modifiers to the NavigationSuiteScaffold parent. This clips and prevents an edge-to-edge screen.

IME

• For each Activity with a soft keyboard, check that android:windowSoftInputMode="adjustResize" is set in the AndroidManifest.xml. DO NOT use SOFT_INPUT_ADJUST_RESIZE because it is deprecated. Then, maintain focus on the input field. Choose one:
  • 1. PREFERRED: Add Modifier.fitInside(WindowInsetsRulers.Ime.current) to the content container. This is preferred over imePadding() because it reduces jank and extra padding caused by forgetting to consume insets upstream in the hierarchy.
  • 2. Add imePadding to the content container. The padding modifier MUST be placed before Modifier.verticalScroll(). Do NOT use Modifier.imePadding() if the parent already accounts for the IME with contentWindowInsets (e.g. contentWindowInsets = WindowInsets.safeDrawing). Doing so will cause double padding.

IMEs with Scaffolds code patterns

RIGHT

RIGHT because contentWindowInsets contains IME insets, which are passed to the content lambda as innerPadding.

// RIGHT
Scaffold(contentWindowInsets = WindowInsets.safeDrawing) { innerPadding ->
    Column(
        modifier = Modifier
            .padding(innerPadding)
            .consumeWindowInsets(innerPadding)
            .verticalScroll(rememberScrollState())
    ) { /* Content */ }
}
   

<br />

RIGHT because fitInside fits the content to the IME insets regardless of contentWindowInsets.

// RIGHT
Scaffold() { innerPadding ->
    Column(
        modifier = Modifier
            .padding(innerPadding)
            .consumeWindowInsets(innerPadding)
            .fitInside(WindowInsetsRulers.Ime.current)
            .verticalScroll(rememberScrollState())
    ) { /* Content */ }
}
   

<br />

RIGHT because the default contentWindowInsets does not contain IME insets, and imePadding() applies IME insets:

// RIGHT
Scaffold() { innerPadding ->
    Column(
        modifier = Modifier
            .padding(innerPadding)
            .consumeWindowInsets(innerPadding)
            .imePadding()
            .verticalScroll(rememberScrollState())
    ) { /* Content */ }
}
   

<br />