1*fa44fe6aSInna Palant# System UI Controller for Jetpack Compose 2*fa44fe6aSInna Palant 3*fa44fe6aSInna Palant[](https://search.maven.org/search?q=g:com.google.accompanist) 4*fa44fe6aSInna Palant 5*fa44fe6aSInna Palant!!! warning 6*fa44fe6aSInna Palant **This library is deprecated, and the API is no longer maintained. We recommend forking the implementation and customising it to your needs.** The original documentation is below. 7*fa44fe6aSInna Palant 8*fa44fe6aSInna Palant## Migration 9*fa44fe6aSInna PalantRecommendation: 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](https://developer.android.com/reference/androidx/activity/ComponentActivity#(androidx.activity.ComponentActivity).enableEdgeToEdge(androidx.activity.SystemBarStyle,androidx.activity.SystemBarStyle)) method available in androidx.activity 1.8.0-alpha03 and later. This method backports the scrims used on some versions of Android. [This](https://github.com/android/nowinandroid/pull/817) is a sample PR of the migration to the new method and removing the dependency on SystemUIController in Now in Android. 10*fa44fe6aSInna Palant 11*fa44fe6aSInna PalantFor other usages, migrate to using WindowInsetsControllerCompat or window APIs directly. 12*fa44fe6aSInna Palant 13*fa44fe6aSInna Palant## Original Documentation 14*fa44fe6aSInna PalantSystem UI Controller provides easy-to-use utilities for updating the System UI bar colors within Jetpack Compose. 15*fa44fe6aSInna Palant 16*fa44fe6aSInna Palant## Usage 17*fa44fe6aSInna PalantTo control the system UI in your composables, you need to get a [`SystemUiController`](../api/systemuicontroller/systemuicontroller/com.google.accompanist.systemuicontroller/-system-ui-controller/) instance. The library provides the [`rememberSystemUiController()`](../api/systemuicontroller/systemuicontroller/com.google.accompanist.systemuicontroller/remember-system-ui-controller.html) function which returns an instance for the current system (currently only Android). 18*fa44fe6aSInna Palant 19*fa44fe6aSInna PalantIn your layouts you can update the system bar colors like so: 20*fa44fe6aSInna Palant 21*fa44fe6aSInna Palant``` kotlin 22*fa44fe6aSInna Palant// Remember a SystemUiController 23*fa44fe6aSInna Palantval systemUiController = rememberSystemUiController() 24*fa44fe6aSInna Palantval useDarkIcons = !isSystemInDarkTheme() 25*fa44fe6aSInna Palant 26*fa44fe6aSInna PalantDisposableEffect(systemUiController, useDarkIcons) { 27*fa44fe6aSInna Palant // Update all of the system bar colors to be transparent, and use 28*fa44fe6aSInna Palant // dark icons if we're in light theme 29*fa44fe6aSInna Palant systemUiController.setSystemBarsColor( 30*fa44fe6aSInna Palant color = Color.Transparent, 31*fa44fe6aSInna Palant darkIcons = useDarkIcons 32*fa44fe6aSInna Palant ) 33*fa44fe6aSInna Palant 34*fa44fe6aSInna Palant // setStatusBarColor() and setNavigationBarColor() also exist 35*fa44fe6aSInna Palant 36*fa44fe6aSInna Palant onDispose {} 37*fa44fe6aSInna Palant} 38*fa44fe6aSInna Palant``` 39*fa44fe6aSInna Palant 40*fa44fe6aSInna Palant## System bar icon colors 41*fa44fe6aSInna PalantThe library automatically handles API level differences when running on Android devices. If we look at the example 42*fa44fe6aSInna Palantof status bar icons, Android only natively supports dark icons on API 23+. This library handles this by automatically 43*fa44fe6aSInna Palantaltering the requested color with a scrim, to maintain contrast: 44*fa44fe6aSInna Palant 45*fa44fe6aSInna Palant 46*fa44fe6aSInna Palant 47*fa44fe6aSInna PalantSimilar happens on navigation bar color, which is only available on API 26+. 48*fa44fe6aSInna Palant 49*fa44fe6aSInna Palant### Modifying scrim logic 50*fa44fe6aSInna Palant 51*fa44fe6aSInna PalantThe scrim logic can be modified if needed: 52*fa44fe6aSInna Palant 53*fa44fe6aSInna Palant``` kotlin 54*fa44fe6aSInna PalantsystemUiController.setStatusBarColor( 55*fa44fe6aSInna Palant color = Color.Transparent, 56*fa44fe6aSInna Palant darkIcons = true 57*fa44fe6aSInna Palant) { requestedColor -> 58*fa44fe6aSInna Palant // TODO: return a darkened color to be used when the system doesn't 59*fa44fe6aSInna Palant // natively support dark icons 60*fa44fe6aSInna Palant} 61*fa44fe6aSInna Palant``` 62*fa44fe6aSInna Palant 63*fa44fe6aSInna Palant## Samples 64*fa44fe6aSInna Palant 65*fa44fe6aSInna PalantFor complete samples, check out the [Insets samples](https://github.com/google/accompanist/tree/main/sample/src/main/java/com/google/accompanist/sample/insets) which all use `SystemUiController` to set transparent system bars. 66*fa44fe6aSInna Palant 67*fa44fe6aSInna Palant## Download 68*fa44fe6aSInna Palant[](https://search.maven.org/search?q=g:com.google.accompanist) 69*fa44fe6aSInna Palant 70*fa44fe6aSInna Palant```groovy 71*fa44fe6aSInna Palantrepositories { 72*fa44fe6aSInna Palant mavenCentral() 73*fa44fe6aSInna Palant} 74*fa44fe6aSInna Palant 75*fa44fe6aSInna Palantdependencies { 76*fa44fe6aSInna Palant implementation "com.google.accompanist:accompanist-systemuicontroller:<version>" 77*fa44fe6aSInna Palant} 78*fa44fe6aSInna Palant``` 79*fa44fe6aSInna Palant 80*fa44fe6aSInna PalantSnapshots of the development version are available in [Sonatype's `snapshots` repository][snap]. These are updated on every commit. 81*fa44fe6aSInna Palant 82*fa44fe6aSInna Palant[compose]: https://developer.android.com/jetpack/compose 83*fa44fe6aSInna Palant[snap]: https://oss.sonatype.org/content/repositories/snapshots/com/google/accompanist/accompanist-systemuicontroller/ 84