Paint status bar after screen transition animation end

mullvad · Aug 23, 2023 · f45e268 · f45e268
1 parent 258a766
commit f45e268
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 8 deletions.
diff --git a/...app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingToolbarScaffold.kt b/...app/src/main/kotlin/net/mullvad/mullvadvpn/compose/component/CollapsingToolbarScaffold.kt
@@ -14,15 +14,18 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import kotlinx.coroutines.delay
 import me.onebone.toolbar.CollapsingToolbarScaffold
 import me.onebone.toolbar.CollapsingToolbarScaffoldScope
 import me.onebone.toolbar.CollapsingToolbarScaffoldState
 import me.onebone.toolbar.CollapsingToolbarScope
 import me.onebone.toolbar.ExperimentalToolbarApi
 import me.onebone.toolbar.ScrollStrategy
+import net.mullvad.mullvadvpn.compose.constant.AnimationDurationConstant.SCREEN_ENTER_TRANSITION
 
 @OptIn(ExperimentalToolbarApi::class)
 @Composable
@@ -36,9 +39,9 @@ fun CollapsingToolbarScaffold(
     toolbar: @Composable CollapsingToolbarScope.() -> Unit,
     body: @Composable CollapsingToolbarScaffoldScope.() -> Unit,
 ) {
+    val context = LocalContext.current
     val dynamic = remember { mutableStateOf(0.dp) }
     val systemUiController = rememberSystemUiController()
-    systemUiController.setStatusBarColor(backgroundColor)
     systemUiController.setNavigationBarColor(backgroundColor)
 
     var isCollapsable by remember { mutableStateOf(false) }
@@ -48,6 +51,11 @@ fun CollapsingToolbarScaffold(
             state.toolbarState.expand()
         }
     }
+    LaunchedEffect(Unit) {
+        delay(SCREEN_ENTER_TRANSITION)
+        systemUiController.setStatusBarColor(backgroundColor)
+    }
+
     val totalHeights = remember { mutableStateOf(0.dp) }
     val localDensity = LocalDensity.current
 

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
@@ -14,14 +14,17 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalDensity
 import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import kotlinx.coroutines.delay
 import me.onebone.toolbar.CollapsingToolbarScaffold
 import me.onebone.toolbar.CollapsingToolbarScaffoldScope
 import me.onebone.toolbar.CollapsingToolbarScaffoldState
 import me.onebone.toolbar.CollapsingToolbarScope
 import me.onebone.toolbar.ExperimentalToolbarApi
 import me.onebone.toolbar.ScrollStrategy
+import net.mullvad.mullvadvpn.R
 
 @OptIn(ExperimentalMaterial3Api::class)
 @Composable
@@ -61,8 +64,8 @@ fun CollapsableAwareToolbarScaffold(
     toolbar: @Composable CollapsingToolbarScope.() -> Unit,
     body: @Composable CollapsingToolbarScaffoldScope.() -> Unit
 ) {
+    val context = LocalContext.current
     val systemUiController = rememberSystemUiController()
-    systemUiController.setStatusBarColor(backgroundColor)
     systemUiController.setNavigationBarColor(backgroundColor)
 
     var isCollapsable by remember { mutableStateOf(false) }
@@ -72,6 +75,10 @@ fun CollapsableAwareToolbarScaffold(
             state.toolbarState.expand()
         }
     }
+    LaunchedEffect(Unit) {
+        delay(context.resources.getInteger(R.integer.transition_animation_duration).toLong())
+        systemUiController.setStatusBarColor(backgroundColor)
+    }
 
     CollapsingToolbarScaffold(
         modifier = modifier.background(backgroundColor),

diff --git a/.../app/src/main/kotlin/net/mullvad/mullvadvpn/compose/constant/AnimationDurationConstant.kt b/.../app/src/main/kotlin/net/mullvad/mullvadvpn/compose/constant/AnimationDurationConstant.kt
@@ -0,0 +1,5 @@
+package net.mullvad.mullvadvpn.compose.constant
+
+object AnimationDurationConstant {
+    const val SCREEN_ENTER_TRANSITION: Long = 400
+}
diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreen.kt
@@ -18,6 +18,7 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.ExperimentalComposeUiApi
@@ -26,6 +27,7 @@ import androidx.compose.ui.draw.rotate
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusProperties
 import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@@ -34,6 +36,8 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.core.text.HtmlCompat
+import com.google.accompanist.systemuicontroller.rememberSystemUiController
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.SharedFlow
 import net.mullvad.mullvadvpn.R
@@ -69,7 +73,16 @@ fun SelectLocationScreen(
     onSearchTermInput: (searchTerm: String) -> Unit = {},
     onBackClick: () -> Unit = {}
 ) {
+    val context = LocalContext.current
+    val backgroundColor = MaterialTheme.colorScheme.background
+    val systemUiController = rememberSystemUiController()
+
     LaunchedEffect(Unit) { uiCloseAction.collect { onBackClick() } }
+    LaunchedEffect(Unit) {
+        delay(context.resources.getInteger(R.integer.transition_animation_duration).toLong())
+        systemUiController.setStatusBarColor(backgroundColor)
+    }
+
     val (backFocus, listFocus, searchBarFocus) = remember { FocusRequester.createRefs() }
     Column(
         modifier =

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/SelectLocationFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/SelectLocationFragment.kt
@@ -4,10 +4,8 @@ import android.os.Bundle
 import android.view.LayoutInflater
 import android.view.View
 import android.view.ViewGroup
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.platform.ComposeView
-import com.google.accompanist.systemuicontroller.rememberSystemUiController
 import net.mullvad.mullvadvpn.R
 import net.mullvad.mullvadvpn.compose.screen.SelectLocationScreen
 import net.mullvad.mullvadvpn.compose.theme.AppTheme
@@ -28,10 +26,6 @@ class SelectLocationFragment : BaseFragment(), StatusBarPainter, NavigationBarPa
         return inflater.inflate(R.layout.fragment_compose, container, false).apply {
             findViewById<ComposeView>(R.id.compose_view).setContent {
                 AppTheme {
-                    val systemUiController = rememberSystemUiController()
-                    systemUiController.setStatusBarColor(MaterialTheme.colorScheme.background)
-                    systemUiController.setNavigationBarColor(MaterialTheme.colorScheme.background)
-
                     val state = vm.uiState.collectAsState().value
                     SelectLocationScreen(
                         uiState = state,