Fix window inset and system bar colors

ishubhamsingh · Oct 2, 2023 · 6655c13 · 6655c13
1 parent c83d337
commit 6655c13
Show file tree

Hide file tree

Showing 18 changed files with 111 additions and 19 deletions.
diff --git a/composeApp/build.gradle.kts b/composeApp/build.gradle.kts
@@ -86,6 +86,8 @@ kotlin {
 
     val androidMain by getting {
       dependencies {
+        implementation(compose.material3)
+        implementation(libs.material)
         implementation(libs.androidx.appcompat)
         implementation(libs.androidx.activityCompose)
         implementation(libs.compose.uitooling)

diff --git a/composeApp/src/androidMain/AndroidManifest.xml b/composeApp/src/androidMain/AndroidManifest.xml
@@ -14,7 +14,7 @@
         android:icon="@mipmap/ic_launcher"
         android:label="@string/app_name"
         android:requestLegacyExternalStorage="true"
-        android:theme="@style/Theme.AppCompat.DayNight.NoActionBar">
+        android:theme="@style/AppTheme">
         <activity
             android:name=".MainActivity"
             android:configChanges="orientation|screenSize|screenLayout|keyboardHidden"

diff --git a/composeApp/src/androidMain/kotlin/dev/ishubhamsingh/splashy/MainActivity.kt b/composeApp/src/androidMain/kotlin/dev/ishubhamsingh/splashy/MainActivity.kt
@@ -18,10 +18,12 @@ package dev.ishubhamsingh.splashy
 import android.os.Bundle
 import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
+import androidx.core.view.WindowCompat
 
 class MainActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
+    WindowCompat.setDecorFitsSystemWindows(window, false)
     setContent { AppView() }
   }
 }
diff --git a/...oseApp/src/androidMain/kotlin/dev/ishubhamsingh/splashy/core/presentation/SplashyTheme.kt b/...oseApp/src/androidMain/kotlin/dev/ishubhamsingh/splashy/core/presentation/SplashyTheme.kt
@@ -15,17 +15,12 @@
  */
 package dev.ishubhamsingh.splashy.core.presentation
 
-import android.app.Activity
 import android.os.Build
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.SideEffect
-import androidx.compose.ui.graphics.toArgb
 import androidx.compose.ui.platform.LocalContext
-import androidx.compose.ui.platform.LocalView
-import androidx.core.view.WindowCompat
 import dev.ishubhamsingh.splashy.ui.theme.DarkColors
 import dev.ishubhamsingh.splashy.ui.theme.LightColors
 import dev.ishubhamsingh.splashy.ui.theme.Shapes
@@ -47,15 +42,6 @@ actual fun SplashyTheme(
       else -> LightColors
     }
 
-  val view = LocalView.current
-  if (!view.isInEditMode) {
-    SideEffect {
-      val window = (view.context as Activity).window
-      window.statusBarColor = colorScheme.surface.toArgb()
-      WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
-    }
-  }
-
   MaterialTheme(
     colorScheme = colorScheme,
     typography = getTypography(),

diff --git a/composeApp/src/androidMain/kotlin/dev/ishubhamsingh/splashy/core/utils/CommonUtils.kt b/composeApp/src/androidMain/kotlin/dev/ishubhamsingh/splashy/core/utils/CommonUtils.kt
@@ -16,11 +16,16 @@
 package dev.ishubhamsingh.splashy.core.utils
 
 import android.annotation.SuppressLint
+import android.app.Activity
 import androidx.compose.runtime.Composable
+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.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
+import androidx.core.view.WindowCompat
 import dev.ishubhamsingh.splashy.BuildConfig
 import io.ktor.client.HttpClient
 import io.ktor.client.engine.okhttp.OkHttp
@@ -62,3 +67,16 @@ actual fun getFormattedDateTime(timestamp: String, format: String): String {
 actual fun getPlatform(): Platform = Platform.Android
 
 actual fun isDebug(): Boolean = BuildConfig.DEBUG
+
+@Composable
+actual fun UpdateSystemBars(
+  statusBarColor: Color,
+  navigationBarColor: Color,
+  isDarkTheme: Boolean
+) {
+  val view = LocalView.current
+  val window = (view.context as? Activity)?.window ?: return
+  window.statusBarColor = statusBarColor.toArgb()
+  window.navigationBarColor = navigationBarColor.toArgb()
+  WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !isDarkTheme
+}
diff --git a/composeApp/src/androidMain/res/values-v29/style.xml b/composeApp/src/androidMain/res/values-v29/style.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:enforceNavigationBarContrast">false</item>
+        <item name="android:enforceStatusBarContrast">false</item>
+    </style>
+</resources>
diff --git a/composeApp/src/androidMain/res/values/style.xml b/composeApp/src/androidMain/res/values/style.xml
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<resources>
+    <style name="AppTheme" parent="Theme.Material3.DayNight.NoActionBar">
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+    </style>
+</resources>
diff --git a/composeApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/core/utils/CommonUtils.kt b/composeApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/core/utils/CommonUtils.kt
@@ -16,6 +16,7 @@
 package dev.ishubhamsingh.splashy.core.utils
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -35,3 +36,6 @@ enum class Platform {
   Android,
   iOS
 }
+
+@Composable
+expect fun UpdateSystemBars(statusBarColor: Color, navigationBarColor: Color, isDarkTheme: Boolean)
diff --git a/...p/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/categories/ui/CategoriesTab.kt b/...p/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/categories/ui/CategoriesTab.kt
@@ -16,6 +16,7 @@
 package dev.ishubhamsingh.splashy.features.categories.ui
 
 import androidx.compose.foundation.background
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@@ -41,6 +42,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.koin.getScreenModel
@@ -55,6 +57,7 @@ import compose.icons.evaicons.Outline
 import compose.icons.evaicons.fill.Folder
 import compose.icons.evaicons.outline.Folder
 import dev.ishubhamsingh.splashy.core.presentation.CommonRes
+import dev.ishubhamsingh.splashy.core.utils.UpdateSystemBars
 import dev.ishubhamsingh.splashy.core.utils.getNonPremiumCollections
 import dev.ishubhamsingh.splashy.features.categories.CategoriesScreenModel
 import dev.ishubhamsingh.splashy.features.categoriesPhotos.ui.CategoriesPhotosScreen
@@ -80,6 +83,11 @@ object CategoriesTab : Tab {
   @OptIn(ExperimentalMaterialApi::class)
   @Composable
   override fun Content() {
+    UpdateSystemBars(
+      statusBarColor = Color.Transparent,
+      navigationBarColor = Color.Transparent,
+      isDarkTheme = isSystemInDarkTheme()
+    )
     val navigator = LocalNavigator.currentOrThrow.parent
     val screenModel = getScreenModel<CategoriesScreenModel>()
     val state by screenModel.state.collectAsState()

diff --git a/...n/kotlin/dev/ishubhamsingh/splashy/features/categoriesPhotos/ui/CategoriesPhotosScreen.kt b/...n/kotlin/dev/ishubhamsingh/splashy/features/categoriesPhotos/ui/CategoriesPhotosScreen.kt
@@ -16,6 +16,7 @@
 package dev.ishubhamsingh.splashy.features.categoriesPhotos.ui
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.Icon
@@ -28,6 +29,7 @@ import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextOverflow
 import cafe.adriel.voyager.core.screen.Screen
 import cafe.adriel.voyager.koin.getScreenModel
@@ -36,6 +38,7 @@ import cafe.adriel.voyager.navigator.currentOrThrow
 import compose.icons.EvaIcons
 import compose.icons.evaicons.Outline
 import compose.icons.evaicons.outline.ArrowIosBack
+import dev.ishubhamsingh.splashy.core.utils.UpdateSystemBars
 import dev.ishubhamsingh.splashy.features.categoriesPhotos.CategoriesPhotosScreenModel
 import dev.ishubhamsingh.splashy.features.details.ui.DetailsScreen
 import dev.ishubhamsingh.splashy.ui.components.PhotoGridLayout
@@ -49,6 +52,11 @@ data class CategoriesPhotosScreen(
   @OptIn(ExperimentalMaterial3Api::class)
   @Composable
   override fun Content() {
+    UpdateSystemBars(
+      statusBarColor = Color.Transparent,
+      navigationBarColor = Color.Transparent,
+      isDarkTheme = isSystemInDarkTheme()
+    )
     val navigator = LocalNavigator.currentOrThrow
     val screenModel = getScreenModel<CategoriesPhotosScreenModel>()
     val state by screenModel.state.collectAsState()

diff --git a/...eApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/details/ui/DetailsScreen.kt b/...eApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/details/ui/DetailsScreen.kt
@@ -26,10 +26,13 @@ import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBars
+import androidx.compose.foundation.layout.windowInsetsPadding
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.CornerSize
 import androidx.compose.foundation.shape.RoundedCornerShape
@@ -83,6 +86,7 @@ import dev.icerock.moko.permissions.compose.PermissionsControllerFactory
 import dev.icerock.moko.permissions.compose.rememberPermissionsControllerFactory
 import dev.ishubhamsingh.splashy.core.presentation.CommonRes
 import dev.ishubhamsingh.splashy.core.utils.Platform
+import dev.ishubhamsingh.splashy.core.utils.UpdateSystemBars
 import dev.ishubhamsingh.splashy.core.utils.getFormattedDateTime
 import dev.ishubhamsingh.splashy.core.utils.getPlatform
 import dev.ishubhamsingh.splashy.features.details.DetailsScreenModel
@@ -101,6 +105,11 @@ data class DetailsScreen(val id: String) : Screen {
   @OptIn(ExperimentalMaterial3Api::class)
   @Composable
   override fun Content() {
+    UpdateSystemBars(
+      statusBarColor = Color.Black.copy(alpha = 0.4f),
+      navigationBarColor = Color.Transparent,
+      isDarkTheme = true
+    )
     val navigator = LocalNavigator.currentOrThrow
     val factory: PermissionsControllerFactory = rememberPermissionsControllerFactory()
     val controller: PermissionsController =
@@ -169,7 +178,10 @@ data class DetailsScreen(val id: String) : Screen {
         sheetShadowElevation = 16.dp,
       ) {
         PhotoContainer(photo = photo)
-        BackButton(onBackPressed = { navigator.pop() })
+        BackButton(
+          modifier = Modifier.windowInsetsPadding(WindowInsets.statusBars),
+          onBackPressed = { navigator.pop() }
+        )
 
         if (state.shouldShowApplyWallpaperDialog) {
           ApplyWallpaperDialog(

diff --git a/...p/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/favourites/ui/FavouritesTab.kt b/...p/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/favourites/ui/FavouritesTab.kt
@@ -16,6 +16,7 @@
 package dev.ishubhamsingh.splashy.features.favourites.ui
 
 import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
@@ -37,6 +38,7 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.unit.dp
 import cafe.adriel.voyager.koin.getScreenModel
@@ -52,6 +54,7 @@ import compose.icons.evaicons.fill.Heart
 import compose.icons.evaicons.outline.Checkmark
 import compose.icons.evaicons.outline.Heart
 import dev.ishubhamsingh.splashy.core.presentation.CommonRes
+import dev.ishubhamsingh.splashy.core.utils.UpdateSystemBars
 import dev.ishubhamsingh.splashy.features.details.ui.DetailsScreen
 import dev.ishubhamsingh.splashy.features.favourites.FavouritesScreenModel
 import dev.ishubhamsingh.splashy.models.TopicFilter
@@ -73,6 +76,11 @@ object FavouritesTab : Tab {
 
   @Composable
   override fun Content() {
+    UpdateSystemBars(
+      statusBarColor = Color.Transparent,
+      navigationBarColor = Color.Transparent,
+      isDarkTheme = isSystemInDarkTheme()
+    )
     val navigator = LocalNavigator.currentOrThrow.parent
     val screenModel = getScreenModel<FavouritesScreenModel>()
     val state by screenModel.state.collectAsState()

diff --git a/composeApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/home/ui/HomeTab.kt b/composeApp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/home/ui/HomeTab.kt
@@ -15,10 +15,12 @@
  */
 package dev.ishubhamsingh.splashy.features.home.ui
 
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.rememberVectorPainter
 import androidx.compose.ui.platform.LocalFocusManager
 import cafe.adriel.voyager.koin.getScreenModel
@@ -33,6 +35,7 @@ import compose.icons.evaicons.Outline
 import compose.icons.evaicons.fill.Home
 import compose.icons.evaicons.outline.Home
 import dev.ishubhamsingh.splashy.core.presentation.CommonRes
+import dev.ishubhamsingh.splashy.core.utils.UpdateSystemBars
 import dev.ishubhamsingh.splashy.features.details.ui.DetailsScreen
 import dev.ishubhamsingh.splashy.features.home.HomeScreenModel
 import dev.ishubhamsingh.splashy.ui.components.PhotoGridLayout
@@ -53,6 +56,11 @@ object HomeTab : Tab {
 
   @Composable
   override fun Content() {
+    UpdateSystemBars(
+      statusBarColor = Color.Transparent,
+      navigationBarColor = Color.Transparent,
+      isDarkTheme = isSystemInDarkTheme()
+    )
     val navigator = LocalNavigator.currentOrThrow.parent
     val screenModel = getScreenModel<HomeScreenModel>()
     val state by screenModel.state.collectAsState()

diff --git a/...pp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/settings/ui/SettingsScreen.kt b/...pp/src/commonMain/kotlin/dev/ishubhamsingh/splashy/features/settings/ui/SettingsScreen.kt
@@ -15,19 +15,27 @@
  */
 package dev.ishubhamsingh.splashy.features.settings.ui
 
+import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import cafe.adriel.voyager.core.screen.Screen
+import dev.ishubhamsingh.splashy.core.utils.UpdateSystemBars
 
 class SettingsScreen : Screen {
 
   @Composable
   override fun Content() {
+    UpdateSystemBars(
+      statusBarColor = Color.Transparent,
+      navigationBarColor = Color.Transparent,
+      isDarkTheme = isSystemInDarkTheme()
+    )
     Surface(color = MaterialTheme.colorScheme.surface) {
       Column(modifier = Modifier.fillMaxSize()) { Text("Hello Settings") }
     }

diff --git a/composeApp/src/iosMain/kotlin/dev/ishubhamsingh/splashy/App.ios.kt b/composeApp/src/iosMain/kotlin/dev/ishubhamsingh/splashy/App.ios.kt
@@ -16,9 +16,11 @@
 package dev.ishubhamsingh.splashy
 
 import androidx.compose.foundation.isSystemInDarkTheme
-import androidx.compose.ui.window.ComposeUIViewController
+import com.moriatsushi.insetsx.WindowInsetsUIViewController
 import platform.UIKit.UIViewController
 
 fun MainViewController(): UIViewController {
-  return ComposeUIViewController { App(darkTheme = isSystemInDarkTheme(), dynamicColor = false) }
+  return WindowInsetsUIViewController {
+    App(darkTheme = isSystemInDarkTheme(), dynamicColor = false)
+  }
 }
diff --git a/composeApp/src/iosMain/kotlin/dev/ishubhamsingh/splashy/core/utils/CommonUtils.kt b/composeApp/src/iosMain/kotlin/dev/ishubhamsingh/splashy/core/utils/CommonUtils.kt
@@ -16,6 +16,7 @@
 package dev.ishubhamsingh.splashy.core.utils
 
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.font.Font
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -71,3 +72,10 @@ actual fun getFormattedDateTime(timestamp: String, format: String): String {
 actual fun getPlatform(): Platform = Platform.iOS
 
 @OptIn(ExperimentalNativeApi::class) actual fun isDebug(): Boolean = NativePlatform.isDebugBinary
+
+@Composable
+actual fun UpdateSystemBars(
+  statusBarColor: Color,
+  navigationBarColor: Color,
+  isDarkTheme: Boolean
+) {}
diff --git a/gradle/libs.versions.toml b/gradle/libs.versions.toml
@@ -6,6 +6,7 @@ compose = "1.5.2"
 androidx-appcompat = "1.6.1"
 androidx-activityCompose = "1.7.2"
 compose-uitooling = "1.5.2"
+material = "1.9.0"
 napier = "2.6.1"
 buildConfig = "4.1.2"
 kotlinx-coroutines = "1.7.3"
@@ -29,6 +30,7 @@ uri-kmp = "0.0.15"
 androidx-appcompat = { module = "androidx.appcompat:appcompat", version.ref = "androidx-appcompat" }
 androidx-activityCompose = { module = "androidx.activity:activity-compose", version.ref = "androidx-activityCompose" }
 compose-uitooling = { module = "androidx.compose.ui:ui-tooling", version.ref = "compose-uitooling" }
+material = { module = "com.google.android.material:material", version.ref = "material" }
 napier = { module = "io.github.aakira:napier", version.ref = "napier" }
 kotlinx-coroutines-core = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-core", version.ref = "kotlinx-coroutines" }
 kotlinx-coroutines-android = { module = "org.jetbrains.kotlinx:kotlinx-coroutines-android", version.ref = "kotlinx-coroutines" }