Hide bottom bar in home screen when posts list is scrolled (#831)

This will increase the screen real estate in the home screen for the content. We will bring back the bottom bar when the content is scroll down.
msasikanth · Feb 25, 2025 · dca3227 · dca3227
1 parent 287c94f
commit dca3227
Show file tree

Hide file tree

Showing 5 changed files with 222 additions and 140 deletions.
diff --git a/androidApp/src/androidMain/kotlin/dev/sasikanth/rss/reader/MainActivity.kt b/androidApp/src/androidMain/kotlin/dev/sasikanth/rss/reader/MainActivity.kt
@@ -22,6 +22,7 @@ import androidx.activity.ComponentActivity
 import androidx.activity.SystemBarStyle
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
+import androidx.core.view.WindowCompat
 import com.arkivanov.decompose.ComponentContext
 import com.arkivanov.decompose.defaultComponentContext
 import dev.sasikanth.rss.reader.app.App
@@ -40,22 +41,30 @@ class MainActivity : ComponentActivity() {
 
     FileKit.init(this)
 
-    enableEdgeToEdge()
+    enableEdgeToEdge(
+      statusBarStyle = SystemBarStyle.dark(Color.TRANSPARENT),
+      navigationBarStyle = SystemBarStyle.dark(Color.TRANSPARENT)
+    )
 
     val activityComponent = ActivityComponent::class.create(activity = this)
 
     setContent {
-      activityComponent.app { useDarkTheme ->
-        enableEdgeToEdge(
-          statusBarStyle =
-            if (useDarkTheme) {
-              SystemBarStyle.dark(Color.TRANSPARENT)
-            } else {
-              SystemBarStyle.light(Color.TRANSPARENT, Color.TRANSPARENT)
-            },
-          navigationBarStyle = SystemBarStyle.dark(Color.TRANSPARENT)
-        )
-      }
+      activityComponent.app(
+        { useDarkTheme ->
+          WindowCompat.getInsetsController(window, window.decorView).isAppearanceLightStatusBars =
+            useDarkTheme.not()
+          WindowCompat.getInsetsController(window, window.decorView)
+            .isAppearanceLightNavigationBars = false
+        },
+        { isLightStatusBar ->
+          WindowCompat.getInsetsController(window, window.decorView).isAppearanceLightStatusBars =
+            isLightStatusBar
+        },
+        { isLightNavBar ->
+          WindowCompat.getInsetsController(window, window.decorView)
+            .isAppearanceLightNavigationBars = isLightNavBar
+        }
+      )
     }
   }
 }

diff --git a/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/app/App.kt b/shared/src/commonMain/kotlin/dev/sasikanth/rss/reader/app/App.kt
@@ -29,7 +29,6 @@ import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import coil3.ImageLoader
-import coil3.annotation.ExperimentalCoilApi
 import coil3.compose.setSingletonImageLoaderFactory
 import com.arkivanov.decompose.extensions.compose.stack.Children
 import com.arkivanov.decompose.extensions.compose.stack.animation.StackAnimation
@@ -63,18 +62,26 @@ import dev.sasikanth.rss.reader.utils.LocalWindowSizeClass
 import me.tatarka.inject.annotations.Assisted
 import me.tatarka.inject.annotations.Inject
 
-typealias App = @Composable (onThemeChange: (useDarkTheme: Boolean) -> Unit) -> Unit
+typealias App =
+  @Composable
+  (
+    onThemeChange: (useDarkTheme: Boolean) -> Unit,
+    toggleLightStatusBar: (isLightStatusBar: Boolean) -> Unit,
+    toggleLightNavBar: (isLightNavBar: Boolean) -> Unit,
+  ) -> Unit
 
 @Inject
 @Composable
-@OptIn(ExperimentalMaterial3WindowSizeClassApi::class, ExperimentalCoilApi::class)
+@OptIn(ExperimentalMaterial3WindowSizeClassApi::class)
 fun App(
   appPresenter: AppPresenter,
   shareHandler: ShareHandler,
   linkHandler: LinkHandler,
   imageLoader: ImageLoader,
   dispatchersProvider: DispatchersProvider,
-  @Assisted onThemeChange: (useDarkTheme: Boolean) -> Unit
+  @Assisted onThemeChange: (useDarkTheme: Boolean) -> Unit,
+  @Assisted toggleLightStatusBar: (isLightStatusBar: Boolean) -> Unit,
+  @Assisted toggleLightNavBar: (isLightNavBar: Boolean) -> Unit,
 ) {
   setSingletonImageLoaderFactory { imageLoader }
 
@@ -127,15 +134,16 @@ fun App(
                   useDarkTheme = useDarkTheme,
                   modifier = fillMaxSizeModifier,
                   onBottomSheetStateChanged = { sheetValue ->
-                    val tempUseDarkTheme =
+                    val showDarkStatusBar =
                       if (sheetValue == SheetValue.Expanded) {
                         true
                       } else {
                         useDarkTheme
                       }
 
-                    onThemeChange(tempUseDarkTheme)
-                  }
+                    toggleLightStatusBar(showDarkStatusBar.not())
+                  },
+                  onBottomSheetHidden = { isHidden -> toggleLightNavBar(isHidden) },
                 )
               }
               is Screen.Search -> {