Accompanist System UI Controller Deprecated

Migration to edge-to-edge

Accompanist is a collection of libraries that assist us when using Jetpack Compose. It’s an incredibly useful tool, but it’s essential to remember that Google utilizes it as a lab for new features. As a result, it’s not uncommon for some features to become deprecated either because they have been integrated into the standard compose library or have become redundant as the same functionality can be achieved differently.

This particularly applies to the SystemUIController library, which has been deprecated due to potential issues with the WindowsInsets and the inability to always guarantee behavior.

Direct from the documentation, we have a helpful suggestion:

Recommendation: If you were using SystemUIController to go edge-to-edge in your activity and change the system bar colors and system bar icon colors, use the new Activity.enableEdgeToEdge method available in androidx.activity 1.8.0-alpha03 and later. This method backports the scrims used on some versions of Android.

The migration process starts with gradle, by removing the System UI dependency and adding the alpha version for the activity (it depends from when you will decide to migrate your code):

-- implementation("com.google.accompanist:accompanist-systemuicontroller:0.32.0")
implementation("androidx.activity:activity-compose:1.8.0-alpha07")

After removing all the code related to the library, we can begin integrating the edge-to-edge feature. First, we need to add the ‘enableEdgeToEdge()’ before the ‘setContent’ and create a simple function to change the bars’ color according to your preferences.

enableEdgeToEdge()
setContent {
   EdgeToEdgeTestTheme {
       ChangeSystemBarsTheme(!isSystemInDarkTheme())

       Surface(
           modifier = Modifier.fillMaxSize(),
           color = MaterialTheme.colorScheme.background
       ) {
           Greeting("Android")
       }
   }
}

The function can look like that:

@Composable
private fun ChangeSystemBarsTheme(lightTheme: Boolean) {
   val barColor = MaterialTheme.colorScheme.background.toArgb()
   LaunchedEffect(lightTheme) {
       if (lightTheme) {
           enableEdgeToEdge(
               statusBarStyle = SystemBarStyle.light(
                   barColor, barColor,
               ),
               navigationBarStyle = SystemBarStyle.light(
                   barColor, barColor,
               ),
           )
       } else {
           enableEdgeToEdge(
               statusBarStyle = SystemBarStyle.dark(
                   barColor,
               ),
               navigationBarStyle = SystemBarStyle.dark(
                   barColor,
               ),
           )
       }
   }
}

When you launch the app with different themes, the bars will follow the background color, and the icons will be visible in all cases with light or dark themes. This is a nice feature! However, you might notice something strange when you launch the app:

Where is our “Hello Android!”?😮

The problem lies in the Window Insets. Enabling edge-to-edge allows us to work on the entire screen, but this means we need to manage the insets of the page, or our content will be hidden behind our bars.

Don’t worry, we have several options to help us:

• The simplest and recommended approach is to use a Scaffold, which already manages the Insets with its innerPadding for the content (if you are using material3). So with a slight change in the code, we can have:

Surface(
   modifier = Modifier.fillMaxSize(),
   color = MaterialTheme.colorScheme.background
) {
   Scaffold { innerPadding ->
       Greeting(modifier = Modifier.padding(innerPadding), name = "Android")
   }
}

• If you are using the material library (instead of material3) for the UI or for some reason you don’t want to use the Scaffold, you have another option. The “safeDrawingPadding” modifier is very helpful; it adds padding to accommodate the safe drawing insets.

Surface(
   modifier = Modifier
       .fillMaxSize()
       .safeDrawingPadding(),
   color = MaterialTheme.colorScheme.background
) {
   Greeting(modifier = Modifier, name = "Android")
}

As you can see, the result is the same in both cases, so you can choose the one that best suits your needs.

Conclusions

In the end, by following these steps, we can achieve the same result as the deprecated SystemUIController. There may be other methods to achieve this result, but using edge-to-edge functionality seems to fit well with our Compose project.

I hope you found this article helpful.

Have a great day!