display backdrop image below status bar

app/src/main/java/com/owenlejeune/tvtime/MainActivity.kt

@@ -17,6 +17,7 @@ import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.core.view.WindowCompat
 import androidx.navigation.NavController
 import androidx.navigation.compose.currentBackStackEntryAsState
 import androidx.navigation.compose.rememberNavController
@@ -29,17 +30,21 @@ class MainActivity : ComponentActivity() {
     override fun onCreate(savedInstanceState: Bundle?) {
         super.onCreate(savedInstanceState)
         setContent {
-            MyApp()
+            val displayUnderStatusBar = remember { mutableStateOf(false) }
+//            if (displayUnderStatusBar.value) {
+                WindowCompat.setDecorFitsSystemWindows(window, !displayUnderStatusBar.value)
+//            }
+            MyApp(displayUnderStatusBar = displayUnderStatusBar)
         }
     }
 }
 
 @Composable
-fun MyApp() {
+fun MyApp(displayUnderStatusBar: MutableState<Boolean> = mutableStateOf(false)) {
     TVTimeTheme {
         val appNavController = rememberNavController()
         Box {
-            MainNavigationRoutes(navController = appNavController)
+            MainNavigationRoutes(navController = appNavController, displayUnderStatusBar = displayUnderStatusBar)
         }
     }
 }

app/src/main/java/com/owenlejeune/tvtime/ui/navigation/Routes.kt

@@ -1,12 +1,18 @@
 package com.owenlejeune.tvtime.ui.navigation
 
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.MutableState
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.ui.graphics.Color
 import androidx.navigation.NavController
 import androidx.navigation.NavHostController
 import androidx.navigation.NavType
 import androidx.navigation.compose.NavHost
 import androidx.navigation.compose.composable
 import androidx.navigation.navArgument
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.owenlejeune.tvtime.ui.screens.DetailView
 import com.owenlejeune.tvtime.ui.screens.DetailViewType
 import com.owenlejeune.tvtime.ui.screens.MainAppView
@@ -16,9 +22,12 @@ import com.owenlejeune.tvtime.ui.screens.tabs.SettingsTab
 import com.owenlejeune.tvtime.ui.screens.tabs.TvTab
 
 @Composable
-fun MainNavigationRoutes(navController: NavHostController) {
+fun MainNavigationRoutes(navController: NavHostController, displayUnderStatusBar: MutableState<Boolean> = mutableStateOf(false)) {
     NavHost(navController = navController, startDestination = MainNavItem.MainView.route) {
         composable(MainNavItem.MainView.route) {
+            displayUnderStatusBar.value = false
+            val systemUiController = rememberSystemUiController()
+            systemUiController.setStatusBarColor(MaterialTheme.colorScheme.background, !isSystemInDarkTheme())
             MainAppView(appNavController = navController)
         }
         composable(
@@ -28,6 +37,9 @@ fun MainNavigationRoutes(navController: NavHostController) {
                 navArgument("TYPE_KEY") { type = NavType.EnumType(DetailViewType::class.java) }
             )
         ) { navBackStackEntry ->
+            displayUnderStatusBar.value = true
+            val systemUiController = rememberSystemUiController()
+            systemUiController.setStatusBarColor(Color.Transparent, !isSystemInDarkTheme())
             val args = navBackStackEntry.arguments
             DetailView(
                 appNavController = navController,

app/src/main/java/com/owenlejeune/tvtime/ui/screens/DetailView.kt

@@ -13,11 +13,12 @@ import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.constraintlayout.compose.ConstraintLayout
-import androidx.core.view.WindowCompat
 import androidx.navigation.NavController
 import com.owenlejeune.tvtime.api.tmdb.DetailService
 import com.owenlejeune.tvtime.api.tmdb.MoviesService
@@ -87,7 +88,7 @@ fun DetailView(
             modifier = Modifier
                 .constrainAs(title) {
                     bottom.linkTo(backdropImage.bottom, margin = 8.dp)
-                    start.linkTo(parent.start, margin = 16.dp)
+                    start.linkTo(parent.start, margin = 20.dp)
                     end.linkTo(parent.end, margin = 16.dp)
                 }
                 .padding(start = 16.dp, end = 16.dp)
@@ -101,9 +102,10 @@ fun DetailView(
             onClick = { appNavController.popBackStack() },
             modifier = Modifier
                 .constrainAs(backButton) {
-                    top.linkTo(parent.top, 8.dp)
+                    top.linkTo(parent.top, 16.dp)
                     start.linkTo(parent.start, 12.dp)
                 }
+                .background(brush = Brush.radialGradient(colors = listOf(Color.Black, Color.Transparent)))
                 .wrapContentSize()
         ) {
             Icon(

app/src/main/java/com/owenlejeune/tvtime/ui/screens/MainView.kt

@@ -29,6 +29,8 @@ fun MainAppView(appNavController: NavController) {
         TopAppBarDefaults.exitUntilCollapsedScrollBehavior(decayAnimationSpec)
     }
 
+    // todo - scroll state not remember when returing from detail screen
+
     Scaffold(
         modifier = Modifier.nestedScroll(scrollBehavior.nestedScrollConnection),
         backgroundColor = MaterialTheme.colorScheme.background,