From 6e1a8165be68e833a9dede76a375e9923d393a5c Mon Sep 17 00:00:00 2001 From: sshropshire Date: Fri, 12 Jan 2024 11:39:35 -0600 Subject: [PATCH 1/5] Fade and slide in fragments on entry. --- .../main/java/com/paypal/android/ui/DemoApp.kt | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt b/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt index d96577c09..1874e70d6 100644 --- 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,19 @@ package com.paypal.android.ui +import androidx.compose.animation.EnterTransition +import androidx.compose.animation.ExitTransition +import androidx.compose.animation.expandIn +import androidx.compose.animation.expandVertically +import androidx.compose.animation.fadeIn +import androidx.compose.animation.fadeOut +import androidx.compose.animation.scaleIn +import androidx.compose.animation.scaleOut +import androidx.compose.animation.shrinkOut +import androidx.compose.animation.shrinkVertically +import androidx.compose.animation.slideIn +import androidx.compose.animation.slideInVertically +import androidx.compose.animation.slideOut +import androidx.compose.animation.slideOutVertically import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.layout.padding import androidx.compose.material3.ExperimentalMaterial3Api @@ -68,6 +82,8 @@ fun DemoApp() { NavHost( navController = navController, startDestination = "features", + enterTransition = { fadeIn() + slideInVertically { (it * 0.05).toInt() } }, + exitTransition = { fadeOut() }, modifier = Modifier.padding(innerPadding) ) { // Ref: https://youtu.be/goFpG25uoc8?si=hqYGEaA95We6qUiE&t=76 From d69e528647785e481b48b39a8b0baa63be007c44 Mon Sep 17 00:00:00 2001 From: sshropshire Date: Fri, 12 Jan 2024 11:43:30 -0600 Subject: [PATCH 2/5] Extract slide in animation properties into UIConstants. --- .../main/java/com/paypal/android/ui/DemoApp.kt | 16 ++++------------ .../java/com/paypal/android/utils/UIConstants.kt | 4 ++++ 2 files changed, 8 insertions(+), 12 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 index 1874e70d6..7dc42a980 100644 --- a/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt +++ b/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt @@ -1,19 +1,8 @@ package com.paypal.android.ui -import androidx.compose.animation.EnterTransition -import androidx.compose.animation.ExitTransition -import androidx.compose.animation.expandIn -import androidx.compose.animation.expandVertically import androidx.compose.animation.fadeIn import androidx.compose.animation.fadeOut -import androidx.compose.animation.scaleIn -import androidx.compose.animation.scaleOut -import androidx.compose.animation.shrinkOut -import androidx.compose.animation.shrinkVertically -import androidx.compose.animation.slideIn import androidx.compose.animation.slideInVertically -import androidx.compose.animation.slideOut -import androidx.compose.animation.slideOutVertically import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.layout.padding import androidx.compose.material3.ExperimentalMaterial3Api @@ -45,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 @@ -82,7 +72,9 @@ fun DemoApp() { NavHost( navController = navController, startDestination = "features", - enterTransition = { fadeIn() + slideInVertically { (it * 0.05).toInt() } }, + enterTransition = { + fadeIn() + slideInVertically { UIConstants.slideInInitialOffsetY(it) } + }, exitTransition = { fadeOut() }, modifier = Modifier.padding(innerPadding) ) { diff --git a/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt b/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt index 971eb4882..0e2e005b6 100644 --- 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 slideInInitialOffsetY(fullHeightOfComposable: Int) = + (fullHeightOfComposable * slideInOffsetPercentY).toInt() + // Ref: https://support.google.com/accessibility/android/answer/7101858 val minimumTouchSize = 48.dp val stepNumberBackgroundSize = 40.dp From 8e7dbcd56789d9ac2c1fbf4260fbfba6398b9217 Mon Sep 17 00:00:00 2001 From: sshropshire Date: Fri, 12 Jan 2024 12:12:05 -0600 Subject: [PATCH 3/5] Add button role to UI elements. --- Demo/src/main/java/com/paypal/android/ui/OptionList.kt | 3 ++- .../java/com/paypal/android/ui/features/FeaturesView.kt | 6 +++++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/Demo/src/main/java/com/paypal/android/ui/OptionList.kt b/Demo/src/main/java/com/paypal/android/ui/OptionList.kt index 2212df458..7e062bd4f 100644 --- a/Demo/src/main/java/com/paypal/android/ui/OptionList.kt +++ b/Demo/src/main/java/com/paypal/android/ui/OptionList.kt @@ -1,6 +1,7 @@ package com.paypal.android.ui import androidx.compose.foundation.background +import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.defaultMinSize @@ -56,7 +57,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 index 715b7e163..e7c7b0e2c 100644 --- 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( From 700713ff57f35aeb4fef529681c5aef39bffee6a Mon Sep 17 00:00:00 2001 From: sshropshire Date: Tue, 16 Jan 2024 14:22:23 -0600 Subject: [PATCH 4/5] Rename method and cleanup lint. --- Demo/src/main/java/com/paypal/android/ui/DemoApp.kt | 2 +- Demo/src/main/java/com/paypal/android/ui/OptionList.kt | 1 - Demo/src/main/java/com/paypal/android/utils/UIConstants.kt | 2 +- 3 files changed, 2 insertions(+), 3 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 index 7dc42a980..756ea9acc 100644 --- a/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt +++ b/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt @@ -73,7 +73,7 @@ fun DemoApp() { navController = navController, startDestination = "features", enterTransition = { - fadeIn() + slideInVertically { UIConstants.slideInInitialOffsetY(it) } + fadeIn() + slideInVertically { UIConstants.calculateSlideInAnimStartOffsetY(it) } }, exitTransition = { fadeOut() }, modifier = Modifier.padding(innerPadding) diff --git a/Demo/src/main/java/com/paypal/android/ui/OptionList.kt b/Demo/src/main/java/com/paypal/android/ui/OptionList.kt index 7e062bd4f..973bb07e6 100644 --- a/Demo/src/main/java/com/paypal/android/ui/OptionList.kt +++ b/Demo/src/main/java/com/paypal/android/ui/OptionList.kt @@ -1,7 +1,6 @@ package com.paypal.android.ui import androidx.compose.foundation.background -import androidx.compose.foundation.clickable import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.defaultMinSize diff --git a/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt b/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt index 0e2e005b6..487eacdf7 100644 --- a/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt +++ b/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt @@ -5,7 +5,7 @@ import androidx.compose.ui.unit.dp object UIConstants { private const val slideInOffsetPercentY = 0.05 - fun slideInInitialOffsetY(fullHeightOfComposable: Int) = + fun calculateSlideInAnimStartOffsetY(fullHeightOfComposable: Int) = (fullHeightOfComposable * slideInOffsetPercentY).toInt() // Ref: https://support.google.com/accessibility/android/answer/7101858 From 6dde5f7622289b2c1803ad6bbeff1d946eb687ab Mon Sep 17 00:00:00 2001 From: sshropshire Date: Tue, 16 Jan 2024 14:28:29 -0600 Subject: [PATCH 5/5] Clean up naming. --- Demo/src/main/java/com/paypal/android/ui/DemoApp.kt | 2 +- Demo/src/main/java/com/paypal/android/utils/UIConstants.kt | 2 +- 2 files changed, 2 insertions(+), 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 index 756ea9acc..d95e8305a 100644 --- a/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt +++ b/Demo/src/main/java/com/paypal/android/ui/DemoApp.kt @@ -73,7 +73,7 @@ fun DemoApp() { navController = navController, startDestination = "features", enterTransition = { - fadeIn() + slideInVertically { UIConstants.calculateSlideInAnimStartOffsetY(it) } + fadeIn() + slideInVertically { UIConstants.getSlideInStartOffsetY(it) } }, exitTransition = { fadeOut() }, modifier = Modifier.padding(innerPadding) diff --git a/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt b/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt index 487eacdf7..144db7658 100644 --- a/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt +++ b/Demo/src/main/java/com/paypal/android/utils/UIConstants.kt @@ -5,7 +5,7 @@ import androidx.compose.ui.unit.dp object UIConstants { private const val slideInOffsetPercentY = 0.05 - fun calculateSlideInAnimStartOffsetY(fullHeightOfComposable: Int) = + fun getSlideInStartOffsetY(fullHeightOfComposable: Int) = (fullHeightOfComposable * slideInOffsetPercentY).toInt() // Ref: https://support.google.com/accessibility/android/answer/7101858