4

I want to implement transparent status bar in jetpack compose.

I have integrated the Accompanist library for this but it has no transparent effect on status bar.

implementation "com.google.accompanist:accompanist-systemuicontroller:0.18.0"

// Remember a SystemUiController
val systemUiController = rememberSystemUiController()
val useDarkIcons = !isSystemInDarkTheme()

DisposableEffect(systemUiController, useDarkIcons) {
    // Update all of the system bar colors to be transparent, and use
    // dark icons if we're in light theme
    systemUiController.setStatusBarColor(
        color = Color.Transparent,
        darkIcons = useDarkIcons
    )

    // setStatusBarColor() and setNavigationBarColor() also exist

    onDispose {}
}

Tried this as well, but it has problem with the gesture navigation

val view = LocalView.current
if (!view.isInEditMode) {
SideEffect {
  val window = (view.context as Activity).window
  val insets = WindowCompat.getInsetsController(window, view)
  window.statusBarColor = Color.Transparent.toArgb() // choose a status bar color
  window.navigationBarColor = Color.Transparent.toArgb() // choose a navigation bar color
  insets.isAppearanceLightStatusBars = !useDarkTheme
  insets.isAppearanceLightNavigationBars = !useDarkTheme
 }
}

Kindly suggest a better solution for the transparent status bar.

enter image description here

hasan_shaikh
  • 1,434
  • 1
  • 15
  • 38

2 Answers2

3

You have to enable full-screen mode to draw under statusbar:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    WindowCompat.setDecorFitsSystemWindows(window, false)
}

And you can use WindowInsets to avoid drawing under "System gestures":

ViewCompat.setOnApplyWindowInsetsListener(view) { view, windowInsets ->
   val insets = windowInsets.getInsets(
       WindowInsetsCompat.Type.systemGestures()
   )
   view.updatePadding(
       insets.left, 
       insets.top, 
       insets.right, 
       insets.bottom
   )
   WindowInsetsCompat.CONSUMED
}

For more information, look at the documentation

Javlon
  • 1,108
  • 2
  • 15
  • 29
0

Try This

Add the below line to your Theme

<item name="android:windowTranslucentStatus">true</item>
<item name="android:windowTranslucentNavigation">true</item>

after adding this line to the theme set this theme in your activity in which you want to set a transparent status bar

Your activity/container layout you wish to have a transparent status bar needs this property set:

android:fitsSystemWindows="true"

add in activity root layout

Mayur
  • 332
  • 1
  • 8