Skip to content

Instantly share code, notes, and snippets.

@oianmol
Created May 19, 2023 10:01
Show Gist options
  • Save oianmol/52f25be2a0e8f0d9bd2ca16b5d308625 to your computer and use it in GitHub Desktop.
Save oianmol/52f25be2a0e8f0d9bd2ca16b5d308625 to your computer and use it in GitHub Desktop.
Jetpack Compose Side Effect to update Android or iOS status-bar and navigation-bar color
@Composable
actual fun PlatformColors(statusBarColor: Color, navBarColor: Color){
val sysUiController = rememberSystemUiController()
SideEffect {
sysUiController.setSystemBarsColor(color = topColor)
sysUiController.setNavigationBarColor(color = bottomColor)
}
}
@Composable
expect fun PlatformColors(statusBarColor: Color, navBarColor: Color)
@Composable
private fun statusBarView() = remember {
val keyWindow: UIWindow? =
UIApplication.sharedApplication.windows.firstOrNull { (it as? UIWindow)?.isKeyWindow() == true } as? UIWindow
val tag = 3848245L // https://stackoverflow.com/questions/56651245/how-to-change-the-status-bar-background-color-and-text-color-on-ios-13
keyWindow?.viewWithTag(tag)?.let {
it
} ?: run {
val height =
keyWindow?.windowScene?.statusBarManager?.statusBarFrame ?: zeroValue<CGRect>()
val statusBarView = UIView(frame = height)
statusBarView.tag = tag
statusBarView.layer.zPosition = 999999.0
keyWindow?.addSubview(statusBarView)
statusBarView
}
}
@Composable
actual fun PlatformColors(
statusBarColor: Color,
navBarColor: Color
) {
val statusBar = statusBarView()
SideEffect {
statusBar?.backgroundColor = topColor.toUIColor()
UINavigationBar.appearance().backgroundColor = bottomColor.toUIColor()
}
}
private fun Color.toUIColor(): UIColor = UIColor(
red = this.red.toDouble(),
green = this.green.toDouble(),
blue = this.blue.toDouble(),
alpha = this.alpha.toDouble()
)
@AldemirGomesDev
Copy link

Fiz esse implementação e só funcionou em Android

@SatishKanaujiya
Copy link

Could You Please use import packages getting lot of errors.

@Micoder-dev
Copy link

Why there is no imports? Please share the full source code.

@ImranAtBhimsoft
Copy link

Here are imports @Micoder-dev
import androidx.compose.runtime.Composable
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import kotlinx.cinterop.ExperimentalForeignApi
import kotlinx.cinterop.zeroValue
import platform.CoreGraphics.CGRect
import platform.UIKit.UIApplication
import platform.UIKit.UIColor
import platform.UIKit.UIView
import platform.UIKit.UIWindow
import platform.UIKit.statusBarManager

But there space between StatusBar and toolbar.
Simulator Screenshot - iPhone 15 - 2024-08-14 at 12 30 43

@Micoder-dev
Copy link

Micoder-dev commented Aug 15, 2024

@ImranAtBhimsoft
Thank You ❤️

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment