Paint status bar after screen transition animation end

mullvad · Sep 7, 2023 · ef19f56 · ef19f56
1 parent aec8962
commit ef19f56
Show file tree

Hide file tree

Showing 15 changed files with 125 additions and 27 deletions.
diff --git a/...oid/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreenTest.kt b/...oid/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/AccountScreenTest.kt
@@ -35,7 +35,8 @@ class AccountScreenTest {
                         accountNumber = DUMMY_ACCOUNT_NUMBER,
                         accountExpiry = null
                     ),
-                viewActions = MutableSharedFlow<AccountViewModel.ViewAction>().asSharedFlow()
+                viewActions = MutableSharedFlow<AccountViewModel.ViewAction>().asSharedFlow(),
+                enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow()
             )
         }
 
@@ -60,6 +61,7 @@ class AccountScreenTest {
                         accountExpiry = null
                     ),
                 viewActions = MutableSharedFlow<AccountViewModel.ViewAction>().asSharedFlow(),
+                enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow(),
                 onManageAccountClick = mockedClickHandler
             )
         }
@@ -85,6 +87,7 @@ class AccountScreenTest {
                         accountExpiry = null
                     ),
                 viewActions = MutableSharedFlow<AccountViewModel.ViewAction>().asSharedFlow(),
+                enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow(),
                 onRedeemVoucherClick = mockedClickHandler
             )
         }
@@ -110,6 +113,7 @@ class AccountScreenTest {
                         accountExpiry = null
                     ),
                 viewActions = MutableSharedFlow<AccountViewModel.ViewAction>().asSharedFlow(),
+                enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow(),
                 onLogoutClick = mockedClickHandler
             )
         }

diff --git a/.../src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreenTest.kt b/.../src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/SelectLocationScreenTest.kt
@@ -8,6 +8,7 @@ import io.mockk.MockKAnnotations
 import io.mockk.mockk
 import io.mockk.verify
 import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
 import net.mullvad.mullvadvpn.compose.state.SelectLocationUiState
 import net.mullvad.mullvadvpn.compose.test.CIRCULAR_PROGRESS_INDICATOR
 import net.mullvad.mullvadvpn.lib.theme.AppTheme
@@ -37,7 +38,8 @@ class SelectLocationScreenTest {
         composeTestRule.setContent {
             SelectLocationScreen(
                 uiState = SelectLocationUiState.Loading,
-                uiCloseAction = MutableSharedFlow()
+                uiCloseAction = MutableSharedFlow(),
+                enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow()
             )
         }
 
@@ -55,7 +57,8 @@ class SelectLocationScreenTest {
                         countries = DUMMY_RELAY_COUNTRIES,
                         selectedRelay = null
                     ),
-                uiCloseAction = MutableSharedFlow()
+                uiCloseAction = MutableSharedFlow(),
+                enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow()
             )
         }
 
@@ -85,7 +88,8 @@ class SelectLocationScreenTest {
                                 },
                             selectedRelay = DUMMY_RELAY_COUNTRIES[0].cities[0].relays[0]
                         ),
-                    uiCloseAction = MutableSharedFlow()
+                    uiCloseAction = MutableSharedFlow(),
+                    enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow()
                 )
             }
         }
@@ -114,6 +118,7 @@ class SelectLocationScreenTest {
                             selectedRelay = null
                         ),
                     uiCloseAction = MutableSharedFlow(),
+                    enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow(),
                     onSearchTermInput = mockedSearchTermInput
                 )
             }
@@ -138,6 +143,7 @@ class SelectLocationScreenTest {
                     uiState =
                         SelectLocationUiState.NoSearchResultFound(searchTerm = mockSearchString),
                     uiCloseAction = MutableSharedFlow(),
+                    enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow(),
                     onSearchTermInput = mockedSearchTermInput
                 )
             }

diff --git a/...id/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreenTest.kt b/...id/app/src/androidTest/kotlin/net/mullvad/mullvadvpn/compose/screen/SettingsScreenTest.kt
@@ -4,6 +4,8 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.ui.test.junit4.createComposeRule
 import androidx.compose.ui.test.onNodeWithText
 import io.mockk.MockKAnnotations
+import kotlinx.coroutines.flow.MutableSharedFlow
+import kotlinx.coroutines.flow.asSharedFlow
 import net.mullvad.mullvadvpn.compose.state.SettingsUiState
 import org.junit.Before
 import org.junit.Rule
@@ -24,7 +26,8 @@ class SettingsScreenTest {
         composeTestRule.setContent {
             SettingsScreen(
                 uiState =
-                    SettingsUiState(appVersion = "", isLoggedIn = true, isUpdateAvailable = true)
+                    SettingsUiState(appVersion = "", isLoggedIn = true, isUpdateAvailable = true),
+                enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow()
             )
         }
         // Assert
@@ -42,7 +45,8 @@ class SettingsScreenTest {
         composeTestRule.setContent {
             SettingsScreen(
                 uiState =
-                    SettingsUiState(appVersion = "", isLoggedIn = false, isUpdateAvailable = true)
+                    SettingsUiState(appVersion = "", isLoggedIn = false, isUpdateAvailable = true),
+                enterTransitionEndAction = MutableSharedFlow<Unit>().asSharedFlow()
             )
         }
         // Assert

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
@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableIntStateOf
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
@@ -38,7 +39,6 @@ fun CollapsingToolbarScaffold(
 ) {
     val dynamic = remember { mutableStateOf(0.dp) }
     val systemUiController = rememberSystemUiController()
-    systemUiController.setStatusBarColor(backgroundColor)
     systemUiController.setNavigationBarColor(backgroundColor)
 
     var isCollapsable by remember { mutableStateOf(false) }
@@ -48,6 +48,7 @@ fun CollapsingToolbarScaffold(
             state.toolbarState.expand()
         }
     }
+
     val totalHeights = remember { mutableStateOf(0.dp) }
     val localDensity = LocalDensity.current
 
@@ -71,7 +72,7 @@ fun CollapsingToolbarScaffold(
         enabled = isEnabledWhenCollapsable && isCollapsable,
         toolbar = { toolbar() }
     ) {
-        var bodyHeight by remember { mutableStateOf(0) }
+        var bodyHeight by remember { mutableIntStateOf(0) }
 
         BoxWithConstraints(
             modifier =

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
@@ -67,7 +67,6 @@ fun CollapsableAwareToolbarScaffold(
     body: @Composable CollapsingToolbarScaffoldScope.() -> Unit
 ) {
     val systemUiController = rememberSystemUiController()
-    systemUiController.setStatusBarColor(backgroundColor)
     systemUiController.setNavigationBarColor(backgroundColor)
 
     var isCollapsable by remember { mutableStateOf(false) }

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
@@ -20,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 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
@@ -54,6 +55,7 @@ private fun PreviewAccountScreen() {
                 accountExpiry = null
             ),
         viewActions = MutableSharedFlow<AccountViewModel.ViewAction>().asSharedFlow(),
+        enterTransitionEndAction = MutableSharedFlow()
     )
 }
 
@@ -62,6 +64,7 @@ private fun PreviewAccountScreen() {
 fun AccountScreen(
     uiState: AccountUiState,
     viewActions: SharedFlow<AccountViewModel.ViewAction>,
+    enterTransitionEndAction: SharedFlow<Unit>,
     onRedeemVoucherClick: () -> Unit = {},
     onManageAccountClick: () -> Unit = {},
     onLogoutClick: () -> Unit = {},
@@ -70,7 +73,12 @@ fun AccountScreen(
     val context = LocalContext.current
     val state = rememberCollapsingToolbarScaffoldState()
     val progress = state.toolbarState.progress
+    val backgroundColor = MaterialTheme.colorScheme.background
+    val systemUiController = rememberSystemUiController()
 
+    LaunchedEffect(Unit) {
+        enterTransitionEndAction.collect { systemUiController.setStatusBarColor(backgroundColor) }
+    }
     CollapsingToolbarScaffold(
         backgroundColor = MaterialTheme.colorScheme.background,
         modifier = Modifier.fillMaxSize(),

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
@@ -34,6 +35,7 @@ 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.flow.MutableSharedFlow
 import kotlinx.coroutines.flow.SharedFlow
 import net.mullvad.mullvadvpn.R
@@ -57,24 +59,35 @@ fun PreviewSelectLocationScreen() {
             countries = listOf(RelayCountry("Country 1", "Code 1", false, emptyList())),
             selectedRelay = null
         )
-    AppTheme { SelectLocationScreen(uiState = state, uiCloseAction = MutableSharedFlow()) }
+    AppTheme {
+        SelectLocationScreen(
+            uiState = state,
+            uiCloseAction = MutableSharedFlow(),
+            enterTransitionEndAction = MutableSharedFlow()
+        )
+    }
 }
 
 @OptIn(ExperimentalComposeUiApi::class)
 @Composable
 fun SelectLocationScreen(
     uiState: SelectLocationUiState,
     uiCloseAction: SharedFlow<Unit>,
+    enterTransitionEndAction: SharedFlow<Unit>,
     onSelectRelay: (item: RelayItem) -> Unit = {},
     onSearchTermInput: (searchTerm: String) -> Unit = {},
     onBackClick: () -> Unit = {}
 ) {
+    val backgroundColor = MaterialTheme.colorScheme.background
+    val systemUiController = rememberSystemUiController()
+
     LaunchedEffect(Unit) { uiCloseAction.collect { onBackClick() } }
+    LaunchedEffect(Unit) {
+        enterTransitionEndAction.collect { systemUiController.setStatusBarColor(backgroundColor) }
+    }
+
     val (backFocus, listFocus, searchBarFocus) = remember { FocusRequester.createRefs() }
-    Column(
-        modifier =
-            Modifier.background(MaterialTheme.colorScheme.background).fillMaxWidth().fillMaxHeight()
-    ) {
+    Column(modifier = Modifier.background(backgroundColor).fillMaxWidth().fillMaxHeight()) {
         Row(
             modifier =
                 Modifier.padding(

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
@@ -15,12 +15,16 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 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 me.onebone.toolbar.ScrollStrategy
 import me.onebone.toolbar.rememberCollapsingToolbarScaffoldState
 import net.mullvad.mullvadvpn.BuildConfig
@@ -45,14 +49,16 @@ import net.mullvad.mullvadvpn.lib.theme.Dimens
 private fun PreviewSettings() {
     SettingsScreen(
         uiState =
-            SettingsUiState(appVersion = "2222.22", isLoggedIn = true, isUpdateAvailable = true)
+            SettingsUiState(appVersion = "2222.22", isLoggedIn = true, isUpdateAvailable = true),
+        enterTransitionEndAction = MutableSharedFlow()
     )
 }
 
 @ExperimentalMaterial3Api
 @Composable
 fun SettingsScreen(
     uiState: SettingsUiState,
+    enterTransitionEndAction: SharedFlow<Unit>,
     onVpnSettingCellClick: () -> Unit = {},
     onSplitTunnelingCellClick: () -> Unit = {},
     onReportProblemCellClick: () -> Unit = {},
@@ -62,6 +68,12 @@ fun SettingsScreen(
     val lazyListState = rememberLazyListState()
     val state = rememberCollapsingToolbarScaffoldState()
     val progress = state.toolbarState.progress
+    val backgroundColor = MaterialTheme.colorScheme.background
+    val systemUiController = rememberSystemUiController()
+
+    LaunchedEffect(Unit) {
+        enterTransitionEndAction.collect { systemUiController.setStatusBarColor(backgroundColor) }
+    }
 
     CollapsableAwareToolbarScaffold(
         backgroundColor = MaterialTheme.colorScheme.background,

diff --git a/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/AccountFragment.kt b/android/app/src/main/kotlin/net/mullvad/mullvadvpn/ui/fragment/AccountFragment.kt
@@ -33,6 +33,7 @@ class AccountFragment : BaseFragment(), StatusBarPainter, NavigationBarPainter {
                     AccountScreen(
                         uiState = state,
                         viewActions = vm.viewActions,
+                        enterTransitionEndAction = vm.enterTransitionEndAction,
                         onRedeemVoucherClick = { openRedeemVoucherFragment() },
                         onManageAccountClick = vm::onManageAccountClick,
                         onLogoutClick = vm::onLogoutClick
@@ -54,6 +55,10 @@ class AccountFragment : BaseFragment(), StatusBarPainter, NavigationBarPainter {
         requireMainActivity().leaveSecureScreen(this)
     }
 
+    override fun onEnterTransitionAnimationEnd() {
+        vm.onTransitionAnimationEnd()
+    }
+
     private fun openRedeemVoucherFragment() {
         val transaction = parentFragmentManager.beginTransaction()
         transaction.addToBackStack(null)

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
@@ -26,15 +26,34 @@ abstract class BaseFragment : Fragment {
                 0f
             }
         ViewCompat.setTranslationZ(requireView(), zAdjustment)
-        return if (nextAnim != 0 && enter) {
-            AnimationUtils.loadAnimation(context, nextAnim)?.apply {
-                transitionFinishedFlow = transitionFinished()
+        val anim =
+            if (nextAnim != 0 && enter) {
+                AnimationUtils.loadAnimation(context, nextAnim)?.apply {
+                    transitionFinishedFlow = transitionFinished()
+                }
+            } else {
+                super.onCreateAnimation(transit, enter, nextAnim)
             }
-        } else {
-            super.onCreateAnimation(transit, enter, nextAnim)
+        anim?.let {
+            anim.setAnimationListener(
+                object : Animation.AnimationListener {
+                    override fun onAnimationStart(animation: Animation?) {}
+
+                    override fun onAnimationRepeat(animation: Animation?) {}
+
+                    override fun onAnimationEnd(animation: Animation?) {
+                        if (enter) {
+                            onEnterTransitionAnimationEnd()
+                        }
+                    }
+                },
+            )
         }
+        return anim
     }
 
+    open fun onEnterTransitionAnimationEnd() {}
+
     companion object {
         private val animationsToAdjustZorder =
             listOf(

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.lib.theme.AppTheme
@@ -28,20 +26,21 @@ 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,
                         uiCloseAction = vm.uiCloseAction,
+                        enterTransitionEndAction = vm.enterTransitionEndAction,
                         onSelectRelay = vm::selectRelay,
                         onSearchTermInput = vm::onSearchTermInput,
-                        onBackClick = { activity?.onBackPressedDispatcher?.onBackPressed() }
+                        onBackClick = { activity?.onBackPressedDispatcher?.onBackPressed() },
                     )
                 }
             }
         }
     }
+
+    override fun onEnterTransitionAnimationEnd() {
+        vm.onTransitionAnimationEnd()
+    }
 }