[#553] Define a "BaseScreen" component to switch status bar color in …

…sample-compose

sample-compose/app/build.gradle.kts

@@ -132,7 +132,8 @@ dependencies {
     implementation("androidx.compose.material:material")
 
     implementation("androidx.navigation:navigation-compose:${Versions.COMPOSE_NAVIGATION_VERSION}")
-    implementation("com.google.accompanist:accompanist-permissions:${Versions.ACCOMPANIST_PERMISSIONS_VERSION}")
+    implementation("com.google.accompanist:accompanist-permissions:${Versions.ACCOMPANIST_VERSION}")
+    implementation("com.google.accompanist:accompanist-systemuicontroller:${Versions.ACCOMPANIST_VERSION}")
 
     implementation("androidx.datastore:datastore-preferences:${Versions.ANDROIDX_DATASTORE_PREFERENCES_VERSION}")
 

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/base/BaseScreen.kt

@@ -0,0 +1,21 @@
+package co.nimblehq.sample.compose.ui.base
+
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.res.colorResource
+import co.nimblehq.sample.compose.R
+import co.nimblehq.sample.compose.util.setStatusBarColor
+
+@Composable
+fun BaseScreen(
+    isDarkStatusBarIcons: Boolean? = null,
+    content: @Composable () -> Unit,
+) {
+    if (isDarkStatusBarIcons != null) {
+        setStatusBarColor(
+            color = colorResource(id = R.color.statusBarColor),
+            darkIcons = isDarkStatusBarIcons,
+        )
+    }
+
+    content()
+}

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/home/HomeScreen.kt

@@ -16,6 +16,7 @@ import co.nimblehq.sample.compose.extensions.collectAsEffect
 import co.nimblehq.sample.compose.extensions.showToast
 import co.nimblehq.sample.compose.lib.IsLoading
 import co.nimblehq.sample.compose.ui.base.BaseDestination
+import co.nimblehq.sample.compose.ui.base.BaseScreen
 import co.nimblehq.sample.compose.ui.common.AppBar
 import co.nimblehq.sample.compose.ui.models.UiModel
 import co.nimblehq.sample.compose.ui.showToast
@@ -28,6 +29,8 @@ fun HomeScreen(
     viewModel: HomeViewModel = hiltViewModel(),
     navigator: (destination: BaseDestination) -> Unit,
     isResultOk: Boolean = false,
+) = BaseScreen(
+    isDarkStatusBarIcons = true,
 ) {
     val context = LocalContext.current
     viewModel.error.collectAsEffect { e -> e.showToast(context) }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/second/SecondScreen.kt

@@ -15,6 +15,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.navigation.compose.hiltViewModel
 import co.nimblehq.sample.compose.R
 import co.nimblehq.sample.compose.ui.base.BaseDestination
+import co.nimblehq.sample.compose.ui.base.BaseScreen
 import co.nimblehq.sample.compose.ui.base.KeyResultOk
 import co.nimblehq.sample.compose.ui.common.AppBar
 import co.nimblehq.sample.compose.ui.theme.AppTheme.dimensions
@@ -25,6 +26,8 @@ fun SecondScreen(
     viewModel: SecondViewModel = hiltViewModel(),
     navigator: (destination: BaseDestination) -> Unit,
     id: String,
+) = BaseScreen(
+    isDarkStatusBarIcons = false,
 ) {
     SecondScreenContent(
         id = id,

sample-compose/app/src/main/java/co/nimblehq/sample/compose/ui/screens/main/third/ThirdScreen.kt

@@ -14,6 +14,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.navigation.compose.hiltViewModel
 import co.nimblehq.sample.compose.R
 import co.nimblehq.sample.compose.ui.base.BaseDestination
+import co.nimblehq.sample.compose.ui.base.BaseScreen
 import co.nimblehq.sample.compose.ui.common.AppBar
 import co.nimblehq.sample.compose.ui.models.UiModel
 import co.nimblehq.sample.compose.ui.theme.ComposeTheme
@@ -23,6 +24,8 @@ fun ThirdScreen(
     viewModel: ThirdViewModel = hiltViewModel(),
     navigator: (destination: BaseDestination) -> Unit,
     model: UiModel?,
+) = BaseScreen(
+    isDarkStatusBarIcons = true,
 ) {
     ThirdScreenContent(data = model)
 }

sample-compose/app/src/main/java/co/nimblehq/sample/compose/util/ComposableUtil.kt

@@ -0,0 +1,22 @@
+package co.nimblehq.sample.compose.util
+
+import android.annotation.SuppressLint
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.graphics.Color
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+
+@SuppressLint("ComposableNaming")
+@Composable
+fun setStatusBarColor(
+    color: Color,
+    darkIcons: Boolean,
+) {
+    val systemUiController = rememberSystemUiController()
+    LaunchedEffect(key1 = darkIcons) {
+        systemUiController.setStatusBarColor(
+            color = color,
+            darkIcons = darkIcons,
+        )
+    }
+}

sample-compose/app/src/main/res/values/colors.xml

@@ -1,4 +1,4 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="greenChristi">#FF669900</color>
+    <color name="statusBarColor">#FF669900</color>
 </resources>

sample-compose/app/src/main/res/values/styles.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
     <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
-        <item name="android:statusBarColor">@color/greenChristi</item>
+        <item name="android:statusBarColor">@color/statusBarColor</item>
     </style>
 </resources>

sample-compose/buildSrc/src/main/java/Versions.kt

@@ -9,7 +9,7 @@ object Versions {
     const val ANDROID_VERSION_NAME = "3.29.0"
 
     // Dependencies (Alphabet sorted)
-    const val ACCOMPANIST_PERMISSIONS_VERSION = "0.30.1"
+    const val ACCOMPANIST_VERSION = "0.30.1"
     const val ANDROID_COMMON_KTX_VERSION = "0.1.1"
     const val ANDROID_CRYPTO_VERSION = "1.0.0"
     const val ANDROIDX_CORE_KTX_VERSION = "1.10.1"