I just started with Jetpack Compose. My app has many screens, it shows StatusBar with color, which is defined in the theme, but on some screens, I want to make StatusBar color is transparent and Image show under StatusBar.
Please guide me step by step.
Thank you in advance.
Just write this line before setContent
window.setFlags(
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS,
WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
)
Firstly in your res > theme remove action bar;
<style name="Theme.app_android"
parent="Theme.MaterialComponents.Light.NoActionBar">
Then call your composable in MainActivity, setting WindowCompat before as shown below
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
WindowCompat.setDecorFitsSystemWindows(window, false)
setContent {
App()
}
}
}
Then using the ProvideWindowInsets function to remember a systemUiController that's called inside a SideEffect function that sets the system status bar to transparent
@Composable
fun App() {
AppTheme {
ProvideWindowInsets {
val systemUiController = rememberSystemUiController()
SideEffect {
systemUiController.setSystemBarsColor(Color.Transparent,
darkIcons = false)
}
val navController = rememberNavController()
val coroutineScope = rememberCoroutineScope()
val navBackStackEntry by
navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
Scaffold() { innerPadding ->
Box(modifier = Modifier.padding(innerPadding)) {
NavGraph(navController = navController)
}
}
}
}
}
If you clone the compose samples from here https://github.com/android/compose-samples they show you this way to implement it