Fix animation of status and navigation bar

6 files changed, 38 insertions, 3 deletions

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
index ce12644b54..11abdad191 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/Scaffolding.kt
@@ -72,7 +72,7 @@ fun ScaffoldWithTopBar(
 fun ScaffoldWithTopBarAndDeviceName(
     topBarColor: Color,
     statusBarColor: Color,
-    navigationBarColor: Color,
+    navigationBarColor: Color?,
     modifier: Modifier = Modifier,
     iconTintColor: Color = MaterialTheme.colorScheme.onPrimary.copy(alpha = AlphaTopBar),
     onSettingsClicked: (() -> Unit)?,
@@ -86,7 +86,9 @@ fun ScaffoldWithTopBarAndDeviceName(
     val systemUiController = rememberSystemUiController()
     LaunchedEffect(key1 = statusBarColor, key2 = navigationBarColor) {
         systemUiController.setStatusBarColor(statusBarColor)
-        systemUiController.setNavigationBarColor(navigationBarColor)
+        if (navigationBarColor != null) {
+            systemUiController.setNavigationBarColor(navigationBarColor)
+        }
     }
 
     Scaffold(
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
index a8726fd0bb..683c57987b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreen.kt
@@ -81,6 +81,7 @@ fun AccountScreen(
     var showDeviceNameInfoDialog by remember { mutableStateOf(false) }
 
     LaunchedEffect(Unit) {
+        systemUiController.setNavigationBarColor(backgroundColor)
         enterTransitionEndAction.collect { systemUiController.setStatusBarColor(backgroundColor) }
     }
     if (showDeviceNameInfoDialog) {
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
index 806c7c93fa..a0beecb655 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/ConnectScreen.kt
@@ -26,6 +26,7 @@ import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.SharedFlow
 import kotlinx.coroutines.flow.asSharedFlow
@@ -71,6 +72,7 @@ private fun PreviewConnectScreen() {
 fun ConnectScreen(
     uiState: ConnectUiState,
     uiSideEffect: SharedFlow<ConnectViewModel.UiSideEffect>,
+    drawNavigationBar: Boolean = false,
     onDisconnectClick: () -> Unit = {},
     onReconnectClick: () -> Unit = {},
     onConnectClick: () -> Unit = {},
@@ -84,6 +86,15 @@ fun ConnectScreen(
     onAccountClick: () -> Unit = {}
 ) {
     val context = LocalContext.current
+
+    val systemUiController = rememberSystemUiController()
+    val navigationBarColor = MaterialTheme.colorScheme.primary
+    val setSystemBarColor = { systemUiController.setNavigationBarColor(navigationBarColor) }
+    LaunchedEffect(drawNavigationBar) {
+        if (drawNavigationBar) {
+            setSystemBarColor()
+        }
+    }
     LaunchedEffect(key1 = Unit) {
         uiSideEffect.collect { uiSideEffect ->
             when (uiSideEffect) {
@@ -121,7 +132,7 @@ fun ConnectScreen(
             } else {
                 MaterialTheme.colorScheme.error
             },
-        navigationBarColor = MaterialTheme.colorScheme.primary,
+        navigationBarColor = null,
         iconTintColor =
             if (uiState.tunnelUiState.isSecured()) {
                     MaterialTheme.colorScheme.onPrimary
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
index 8983e6ac4a..b092ed981b 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreen.kt
@@ -67,6 +67,7 @@ fun SettingsScreen(
     val systemUiController = rememberSystemUiController()
 
     LaunchedEffect(Unit) {
+        systemUiController.setNavigationBarColor(backgroundColor)
         enterTransitionEndAction.collect { systemUiController.setStatusBarColor(backgroundColor) }
     }
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/BaseFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/BaseFragment.kt
index 610f76578a..99b9b42f09 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/BaseFragment.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/BaseFragment.kt
@@ -49,6 +49,11 @@ abstract class BaseFragment : Fragment {
                 },
             )
         }
+            ?: run {
+                if (enter) {
+                    onEnterTransitionAnimationEnd()
+                }
+            }
         return anim
     }
 
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/ConnectFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/ConnectFragment.kt
index 374b27e668..b83ce973c1 100644
--- a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/ConnectFragment.kt
+++ b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/ConnectFragment.kt
@@ -8,6 +8,7 @@ import android.view.View
 import android.view.ViewGroup
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.platform.ComposeView
+import kotlinx.coroutines.flow.MutableStateFlow
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.screen.ConnectScreen
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -20,6 +21,7 @@ class ConnectFragment : BaseFragment() {
 
     // Injected dependencies
     private val connectViewModel: ConnectViewModel by viewModel()
+    private val _setNavigationBar = MutableStateFlow(false)
 
     override fun onCreateView(
         inflater: LayoutInflater,
@@ -31,9 +33,11 @@ class ConnectFragment : BaseFragment() {
         view.findViewById<ComposeView>(R.id.compose_view).setContent {
             AppTheme {
                 val state = connectViewModel.uiState.collectAsState().value
+                val drawNavbar = _setNavigationBar.collectAsState()
                 ConnectScreen(
                     uiState = state,
                     uiSideEffect = connectViewModel.uiSideEffect,
+                    drawNavigationBar = drawNavbar.value,
                     onDisconnectClick = connectViewModel::onDisconnectClick,
                     onReconnectClick = connectViewModel::onReconnectClick,
                     onConnectClick = connectViewModel::onConnectClick,
@@ -92,4 +96,15 @@ class ConnectFragment : BaseFragment() {
     private fun openAccountView() {
         (context as? MainActivity)?.openAccount()
     }
+
+    override fun onPause() {
+        super.onPause()
+        _setNavigationBar.value = false
+    }
+
+    // TODO Temporary fix for handling in & out animations until we have Compose Navigation
+    override fun onEnterTransitionAnimationEnd() {
+        super.onEnterTransitionAnimationEnd()
+        _setNavigationBar.value = true
+    }
 }