Nav Transition Animation (#234)

* Fade and slide in fragments on entry. * Extract slide in animation properties into UIConstants. * Add button role to UI elements. * Rename method and cleanup lint. * Clean up naming.
paypal · Jan 18, 2024 · 331fce6 · 331fce6
1 parent 188cbe7
commit 331fce6
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 2 deletions.
diff --git a/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt b/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt
@@ -1,5 +1,8 @@
 package com.paypal.android.ui
 
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
@@ -31,6 +34,7 @@ import com.paypal.android.ui.vaultcard.VaultCardView
 import com.paypal.android.ui.vaultcard.VaultCardViewModel
 import com.paypal.android.uishared.components.DemoAppTopBar
 import com.paypal.android.uishared.effects.NavDestinationChangeDisposableEffect
+import com.paypal.android.utils.UIConstants
 
 // The architecture of the Demo app is heavily influenced by Google sample apps written
 // entirely in compose, most specifically the Jetsnack app
@@ -68,6 +72,10 @@ fun DemoApp() {
             NavHost(
                 navController = navController,
                 startDestination = "features",
+                enterTransition = {
+                    fadeIn() + slideInVertically { UIConstants.getSlideInStartOffsetY(it) }
+                },
+                exitTransition = { fadeOut() },
                 modifier = Modifier.padding(innerPadding)
             ) {
                 // Ref: https://youtu.be/goFpG25uoc8?si=hqYGEaA95We6qUiE&t=76

diff --git a/Demo/src/main/java/com/paypal/android/ui/OptionList.kt b/Demo/src/main/java/com/paypal/android/ui/OptionList.kt
@@ -56,7 +56,7 @@ fun OptionList(
                         .selectable(
                             selected = (option == selectedOption),
                             onClick = { onSelectedOptionChange(option) },
-                            role = Role.RadioButton
+                            role = Role.RadioButton,
                         )
                 ) {
                     Text(

diff --git a/Demo/src/main/java/com/paypal/android/ui/features/FeaturesView.kt b/Demo/src/main/java/com/paypal/android/ui/features/FeaturesView.kt
@@ -23,6 +23,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.tooling.preview.Preview
 import com.paypal.android.R
@@ -117,7 +118,10 @@ fun FeatureView(
         modifier = Modifier
             .background(MaterialTheme.colorScheme.surfaceVariant)
             .fillMaxWidth()
-            .clickable(onClick = onClick)
+            .clickable(
+                onClick = onClick,
+                role = Role.Button
+            )
     ) {
         Row {
             Text(

diff --git a/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt b/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt
@@ -4,6 +4,10 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.ui.unit.dp
 
 object UIConstants {
+    private const val slideInOffsetPercentY = 0.05
+    fun getSlideInStartOffsetY(fullHeightOfComposable: Int) =
+        (fullHeightOfComposable * slideInOffsetPercentY).toInt()
+
     // Ref: https://support.google.com/accessibility/android/answer/7101858
     val minimumTouchSize = 48.dp
     val stepNumberBackgroundSize = 40.dp