Add transparency to status bar and navigation bar

Signed-off-by: Saul Henriquez <saul_henriquez@hotmail.com>
NeoApplications · Sep 4, 2023 · cfce75f · cfce75f
1 parent 32b9580
commit cfce75f
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 9 deletions.
diff --git a/app/build.gradle.kts b/app/build.gradle.kts
@@ -166,6 +166,7 @@ dependencies {
  implementation("androidx.compose.ui:ui-tooling-preview:$vCompose")
  implementation("androidx.navigation:navigation-compose:2.7.0-beta02")
  implementation("com.google.accompanist:accompanist-webview:$vAccompanist")
+ implementation("com.google.accompanist:accompanist-systemuicontroller:$vAccompanist")
 
  //Room
  implementation("androidx.room:room-runtime:$vRoom")

diff --git a/app/src/main/AndroidManifest.xml b/app/src/main/AndroidManifest.xml
@@ -32,6 +32,7 @@
 
  <activity
  android:name=".MainActivity"
+ android:theme="@style/AppTheme"
  android:exported="true">
  <intent-filter>
  <action android:name="android.intent.action.MAIN" />

diff --git a/app/src/main/java/com/saulhdev/feeder/MainActivity.kt b/app/src/main/java/com/saulhdev/feeder/MainActivity.kt
@@ -23,7 +23,11 @@ import android.content.Intent
 import android.content.res.Configuration
 import android.os.Bundle
 import androidx.activity.compose.setContent
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.DisposableEffect
+import androidx.compose.ui.graphics.Color
 import androidx.core.net.toUri
+import androidx.core.view.WindowCompat
 import androidx.lifecycle.asLiveData
 import androidx.navigation.NavHostController
 import androidx.navigation.compose.rememberNavController
@@ -32,6 +36,7 @@ import androidx.work.ExistingPeriodicWorkPolicy
 import androidx.work.NetworkType
 import androidx.work.PeriodicWorkRequestBuilder
 import androidx.work.WorkManager
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import com.saulhdev.feeder.compose.navigation.NavigationManager
 import com.saulhdev.feeder.preference.FeedPreferences
 import com.saulhdev.feeder.sync.FeedSyncer
@@ -52,11 +57,13 @@ class MainActivity : DIAwareComponentActivity() {
  NFApplication.mainActivity = this
  super.onCreate(savedInstanceState)
 
+ WindowCompat.setDecorFitsSystemWindows(window, false)
  prefs = FeedPreferences.getInstance(this)
  setContent {
  AppTheme(
  darkTheme = isDarkTheme
  ) {
+ TransparentSystemBars()
  withDI {
  navController = rememberNavController()
  NavigationManager(navController = navController)
@@ -73,6 +80,30 @@ class MainActivity : DIAwareComponentActivity() {
  observePrefs()
  }
 
+ @Composable
+ fun TransparentSystemBars() {
+ val systemUiController = rememberSystemUiController()
+ val useDarkIcons = !isDarkTheme
+
+ DisposableEffect(systemUiController, useDarkIcons) {
+ systemUiController.setSystemBarsColor(
+ color = statusBarColor(),
+ darkIcons = useDarkIcons
+ )
+
+ onDispose {}
+ }
+ }
+
+ private fun statusBarColor(): Color {
+
+ return if (isDarkTheme) {
+ Color(0x80000000)
+ } else {
+ Color(0x80FFFFFF)
+ }
+ }
+
  private fun observePrefs() {
  var recreate = false
  prefs.overlayTheme.get().asLiveData().observe(this) {

diff --git a/app/src/main/java/com/saulhdev/feeder/compose/components/ArticleItem.kt b/app/src/main/java/com/saulhdev/feeder/compose/components/ArticleItem.kt
@@ -51,9 +51,9 @@ fun ArticleItem(
 
  Card(
  modifier = Modifier
- .background(MaterialTheme.colorScheme.surface)
- .clip(RoundedCornerShape(16.dp))
  .fillMaxWidth()
+ .clip(RoundedCornerShape(16.dp))
+ .background(MaterialTheme.colorScheme.surface)
  .clickable {
  onClick()
  }

diff --git a/app/src/main/java/com/saulhdev/feeder/compose/pages/OverlayPage.kt b/app/src/main/java/com/saulhdev/feeder/compose/pages/OverlayPage.kt
@@ -20,6 +20,7 @@ package com.saulhdev.feeder.compose.pages
 
 import androidx.activity.compose.rememberLauncherForActivityResult
 import androidx.activity.result.contract.ActivityResultContracts
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
@@ -131,7 +132,9 @@ fun OverlayPage() {
  }
  }
 
- Column {
+ Column(
+ modifier = Modifier.background(MaterialTheme.colorScheme.background)
+ ) {
  var showMenu by remember { mutableStateOf(false) }
  LazyColumn(
  modifier = Modifier
@@ -145,13 +148,18 @@ fun OverlayPage() {
  Row(
  modifier = Modifier
  .fillMaxSize()
- .padding(all = 4.dp),
+ .padding(
+ top = 26.dp,
+ start = 4.dp,
+ end = 4.dp,
+ bottom = 4.dp
+ ),
  verticalAlignment = Alignment.CenterVertically
  ) {
  Text(
  text = stringResource(id = R.string.app_name),
  modifier = Modifier.padding(start = 4.dp),
- fontSize = 16.sp,
+ fontSize = 18.sp,
  fontWeight = FontWeight.Bold,
  color = MaterialTheme.colorScheme.onSurface
  )

diff --git a/app/src/main/java/com/saulhdev/feeder/preference/FeedPreferences.kt b/app/src/main/java/com/saulhdev/feeder/preference/FeedPreferences.kt
@@ -195,6 +195,7 @@ class FeedPreferences private constructor(val context: Context) {
  }
 
  val OVERLAY_THEME = stringPreferencesKey("pref_overlay_theme")
+ val OVERLAY_DYNAMIC_THEME = booleanPreferencesKey("pref_dynamic_theme")
  val OVERLAY_OPACITY = floatPreferencesKey("pref_overlay_opacity")
  val OVERLAY_CARD_BACKGROUND = stringPreferencesKey("pref_overlay_card_background")
  val SOURCES = stringPreferencesKey("pref_sources")

diff --git a/app/src/main/java/com/saulhdev/feeder/theme/Color.kt b/app/src/main/java/com/saulhdev/feeder/theme/Color.kt
@@ -38,7 +38,7 @@ val DarkSecondary = Color(0xFFB6CCB9)
 val DarkOnSecondary = Color(0xFF213527)
 val DarkBackground = Color(0xFF191C1A)
 val DarkOnBackground = Color(0xFFE1E3DE)
-val DarkSurface = Color(0xFF191C1A)
+val DarkSurface = Color(0xFF212121)
 val DarkOnSurface = Color(0xFFE1E3DE)
 val DarkPrimary = Color(0xFF4668D8)
 val DarkOnPrimary = Color(0xFF00391E)

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -30,16 +30,18 @@
  </style>
 
  <style name="AppTheme" parent="HFBaseTheme">
- <item name="android:statusBarColor">?colorSurface</item>
+ <item name="android:statusBarColor">@android:color/black</item>
+ <item name="android:navigationBarColor">@android:color/black</item>
  <item name="android:windowTranslucentStatus">true</item>
+ <item name="android:windowTranslucentNavigation">true</item>
  <item name="android:windowLightStatusBar">true</item>
- <item name="android:navigationBarColor">@android:color/black</item>
  </style>
 
  <style name="AppTheme.Dark" parent="HFBaseTheme">
  <item name="android:statusBarColor">?colorSurface</item>
- <item name="android:windowTranslucentStatus">true</item>
  <item name="android:windowLightStatusBar">true</item>
+ <item name="android:windowTranslucentStatus">true</item>
+ <item name="android:windowTranslucentNavigation">true</item>
  <item name="android:navigationBarColor">@android:color/black</item>
  </style>