Show image under status bar in plant details screen (#888)

* feat: add accompanist dependency

* feat: add accompanist dependency

* feat: make systemBarsColor transparent

* feat: remove systemBarPadding modifiers

* feat: add more specific name for dependency and delete unsplash key

* feat: delete the commented code

app/build.gradle.kts

@@ -146,6 +146,7 @@ dependencies {
   implementation(libs.androidx.compose.runtime.livedata)
   implementation(libs.androidx.lifecycle.viewmodel.compose)
   implementation(libs.glide)
+  implementation(libs.accompanist.systemuicontroller)
   debugImplementation(libs.androidx.compose.ui.tooling)
 
   // Testing dependencies

app/src/main/java/com/google/samples/apps/sunflower/compose/plantdetail/PlantDetailView.kt

@@ -46,6 +46,7 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Add
 import androidx.compose.material.icons.filled.ArrowBack
 import androidx.compose.material.icons.filled.Share
+import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.FloatingActionButton
 import androidx.compose.material3.Icon
@@ -200,7 +201,6 @@ fun PlantDetails(
     Box(
         modifier
             .fillMaxSize()
-            .systemBarsPadding()
             // attach as a parent to the nested scroll system
             .nestedScroll(nestedScrollConnection)
     ) {
@@ -409,7 +409,9 @@ private fun PlantDetailsToolbar(
 ) {
     Surface {
         TopAppBar(
-            modifier = modifier.statusBarsPadding().background(color = MaterialTheme.colorScheme.surface),
+            modifier = modifier
+                .statusBarsPadding()
+                .background(color = MaterialTheme.colorScheme.surface),
             title = {
                 Row {
                     IconButton(

app/src/main/java/com/google/samples/apps/sunflower/ui/Theme.kt

@@ -25,11 +25,14 @@ import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.material3.lightColorScheme
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.SideEffect
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
 
 private val LightColors = lightColorScheme(
     primary = sunflower_green_500,
@@ -69,10 +72,18 @@ fun SunflowerTheme(
     }
     val view = LocalView.current
     if (!view.isInEditMode) {
-        SideEffect {
-            val window = (view.context as Activity).window
-            window.statusBarColor = colorScheme.primary.toArgb()
-            WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
+        val systemUiController = rememberSystemUiController()
+        val useDarkIcons = !isSystemInDarkTheme()
+        val window = (view.context as Activity).window
+        WindowCompat.setDecorFitsSystemWindows(window, false)
+        DisposableEffect(systemUiController, useDarkIcons) {
+            // Update all of the system bar colors to be transparent, and use
+            // dark icons if we're in light theme
+            systemUiController.setSystemBarsColor(
+                color = Color.Transparent,
+                darkIcons = useDarkIcons
+            )
+            onDispose {}
         }
     }
 

gradle.properties

@@ -27,7 +27,6 @@
 # The setting is particularly useful for tweaking memory settings.
 android.useAndroidX=true
 org.gradle.jvmargs=-Xmx1536m
-
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects

gradle/libs.versions.toml

@@ -61,6 +61,7 @@ tracing = "1.1.0"
 uiAutomator = "2.2.0"
 viewModelCompose = "2.5.1"
 work = "2.7.1"
+systemuicontroller = "0.30.1"
 
 [libraries]
 accessibility-test-framework = { module = "com.google.android.apps.common.testing.accessibility.framework:accessibility-test-framework", version.ref = "accessibilityTestFramework" }
@@ -118,6 +119,7 @@ kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-c
 kotlinx-coroutines-guava = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-guava", version.ref = "coroutines" }
 kotlinx-coroutines-test = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-test", version.ref = "coroutines" }
 material = { module = "com.google.android.material:material", version.ref = "material" }
+accompanist-systemuicontroller = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "systemuicontroller" }
 okhttp3-logging-interceptor = { module = "com.squareup.okhttp3:logging-interceptor", version.ref = "okhttpLogging" }
 retrofit2 = { module = "com.squareup.retrofit2:retrofit", version.ref = "retrofit" }
 retrofit2-converter-gson = { module = "com.squareup.retrofit2:converter-gson", version.ref = "retrofit" }