[link] Dynamic bottom sheet height #10838

lng-stripe · 2025-05-20T18:33:13Z

Summary

Make the Link bottom sheet have dynamic height (adjusts to its content size).

Getting this to work well was difficult. In PaymentSheet, we're able to simply apply animateContentSize() to the top-level bottom sheet container and call it a day, but for Link in PS it leads to an awfully janky UI:

demo-animateContentSize.mov

The complications with the Link UX are:

we use NavHost to route (with transition animations) between screens
we have big animated components within screens (read: wallet)
our layout hierarchy includes nested ModalBottomSheetLayouts
we transition between multiple screens, toggling the keyboard between them
we have ephemeral loading states of varying heights

All of the above lead to animations clashing with one another, for example:

The soft keyboard is animating away (increasing the height of the bottom sheet), while
we navigate to the next screen, which has a short loading screen (reducing the height of the bottom sheet) for ~200 ms, before
we render a tall content screen (increasing the bottom sheet height), which has a form field we auto-focus on, causing
the soft keyboard to appear again (decreasing the bottom sheet height).
Meanwhile, the soft keyboard animations translate the bottom sheet vertically while also animating the IME window insets.

Complicating things further, many animation APIs don't work right when used in a ModalBottomSheetLayout bottom sheet or outright crash in nested ModalBottomSheetLayouts (see demo app):

demo-bottom-sheet-animation-apis.mov

Ultimately, the changes in this PR include:

Keep the Sign Up and Verification screens fixed as fullscreen bottom sheets
Use NavHost transition properties for animating between Link screens
Use AnimatedContent for animating components within Link screens
Have loading screens be sized at the current Link screen size to reduce animations (see LinkLoadingScreen)
Avoid animating Link screen size during keyboard animations
Increase the delay after changing screens and before showing the soft keyboard to avoid animation clashes
Replace the nested ModalBottomSheetLayout with an ElementsBottomSheetLayout adjacent to the other one

Also in this commit history are different approaches I tried that didn't pan out (example). I decided not to rebase them away for posterity.

Motivation

https://jira.corp.stripe.com/browse/LINK_MOBILE-190

Testing

Added tests
Modified tests
Manually verified

Screenshots

Below are recordings of running through the example app.

dbs-demo1.mov

dbs-demo2.mov

github-actions · 2025-05-20T18:39:17Z

Diffuse output:

OLD: identity-example-release-base.apk (signature: V1, V2)
NEW: identity-example-release-pr.apk (signature: V1, V2)

          │          compressed          │         uncompressed         
          ├───────────┬───────────┬──────┼───────────┬───────────┬──────
 APK      │ old       │ new       │ diff │ old       │ new       │ diff 
──────────┼───────────┼───────────┼──────┼───────────┼───────────┼──────
      dex │   2.1 MiB │   2.1 MiB │  0 B │   4.3 MiB │   4.3 MiB │  0 B 
     arsc │     1 MiB │     1 MiB │  0 B │     1 MiB │     1 MiB │  0 B 
 manifest │   2.3 KiB │   2.3 KiB │  0 B │     8 KiB │     8 KiB │  0 B 
      res │ 302.9 KiB │ 302.9 KiB │  0 B │   457 KiB │   457 KiB │  0 B 
   native │   6.2 MiB │   6.2 MiB │  0 B │  15.8 MiB │  15.8 MiB │  0 B 
    asset │   7.7 KiB │   7.7 KiB │  0 B │   7.4 KiB │   7.4 KiB │  0 B 
    other │  95.7 KiB │  95.7 KiB │ -3 B │ 183.5 KiB │ 183.5 KiB │  0 B 
──────────┼───────────┼───────────┼──────┼───────────┼───────────┼──────
    total │   9.8 MiB │   9.8 MiB │ -3 B │  21.8 MiB │  21.8 MiB │  0 B 

 DEX     │ old   │ new   │ diff      
─────────┼───────┼───────┼───────────
   files │     1 │     1 │ 0         
 strings │ 20668 │ 20668 │ 0 (+0 -0) 
   types │  6493 │  6493 │ 0 (+0 -0) 
 classes │  5259 │  5259 │ 0 (+0 -0) 
 methods │ 31489 │ 31489 │ 0 (+0 -0) 
  fields │ 18222 │ 18222 │ 0 (+0 -0) 

 ARSC    │ old  │ new  │ diff 
─────────┼──────┼──────┼──────
 configs │  164 │  164 │  0   
 entries │ 3646 │ 3646 │  0

APK

   compressed    │  uncompressed   │                                           
──────────┬──────┼──────────┬──────┤                                           
 size     │ diff │ size     │ diff │ path                                      
──────────┼──────┼──────────┼──────┼───────────────────────────────────────────
    271 B │ -1 B │    120 B │  0 B │ ∆ META-INF/version-control-info.textproto 
 29.2 KiB │ -1 B │ 64.6 KiB │  0 B │ ∆ META-INF/CERT.SF                        
  1.2 KiB │ -1 B │  1.2 KiB │  0 B │ ∆ META-INF/CERT.RSA                       
──────────┼──────┼──────────┼──────┼───────────────────────────────────────────
 30.6 KiB │ -3 B │   66 KiB │  0 B │ (total)

lng-stripe · 2025-05-20T20:09:57Z

paymentsheet/src/main/java/com/stripe/android/link/ui/LinkContent.kt

+            // Workaround a race condition where the route changes while the soft keyboard is
+            // animating in/out. Imagine navigating from screen A to B, where both screens are
+            // supposed to be equal height. If the soft keyboard closes immediately after the
+            // screen transition starts, the target height of screen B, which is locked in at
+            // the start of the animation, will be too short.
+            sizeTransform = if (isImeAnimating) {


👀 Demo of the problem:

demo-isImeAnimating.mov

lng-stripe · 2025-05-20T20:10:37Z

paymentsheet/src/main/java/com/stripe/android/link/ui/LinkContent.kt

+            // Keep height fixed to reduce animations caused by IME toggling on both
+            // this screen and Verification screen.
+            MinScreenHeightBox {


👀 Demo of the problem:

demo-MinScreenHeightBox.mov

lng-stripe · 2025-05-20T20:11:57Z

paymentsheet/src/main/java/com/stripe/android/link/ui/wallet/WalletScreen.kt

+    AnimatedContent(
+        targetState = state.paymentDetailsList.isEmpty(),
+        transitionSpec = { LinkScreenTransition },
+    ) { isLoading ->
+        if (isLoading) {
+            LinkLoadingScreen(Modifier.testTag(WALLET_LOADER_TAG))
+        } else {


👀 AnimatedContent smooths out the transition. Demo of the problem:

demo-WalletBody-AnimatedContent.mov

lng-stripe · 2025-05-20T20:15:55Z

paymentsheet/src/main/java/com/stripe/android/link/ui/LinkLoadingScreen.kt

+/**
+ * Displays a loading spinner in the center of the screen.
+ * Will match the last screen size using [ProvideLinkScreenSize] to minimize size changes.
+ */
+@Composable
+internal fun LinkLoadingScreen(modifier: Modifier = Modifier) {


👀 Demo of the problem below. Note how it goes from full screen → short → medium height. It now goes from full → medium height.

demo-LocalLinkScreenSize.mov

lng-stripe · 2025-05-20T20:17:32Z

paymentsheet/api/paymentsheet.api

@@ -419,8 +419,15 @@ public final class com/stripe/android/link/ui/ComposableSingletons$LinkButtonKt
 public final class com/stripe/android/link/ui/ComposableSingletons$LinkContentKt {


Tip: review with Hide whitespace enabled

carlosmuvi-stripe

code looking good, thanks for the hard work! Will get to manual testing today.

carlosmuvi-stripe · 2025-05-29T16:47:49Z

paymentsheet/src/main/java/com/stripe/android/link/ui/LinkContent.kt

+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+private fun LinkNavHost(


nit - maybe we want to move this to its own file?

carlosmuvi-stripe · 2025-05-29T16:50:21Z

paymentsheet/src/main/java/com/stripe/android/link/ui/LinkLoadingScreen.kt

+@Composable
+internal fun ProvideLinkScreenSize(size: IntSize?, content: @Composable () -> Unit) {
+    val dpSize = with(LocalDensity.current) {
+        size?.let { DpSize(it.width.toDp(), it.height.toDp()) }
+    }
+    CompositionLocalProvider(
+        LocalLinkScreenSize provides dpSize,
+        content = content
+    )
+}


Since this is used outside of the Loading screen composable as well, can we move it (and related functions) to a Screen utilities file?

Also can we add some docs to these composables for future reference?

carlosmuvi-stripe · 2025-05-29T16:50:50Z

paymentsheet/src/main/java/com/stripe/android/link/ui/MinScreenHeightBox.kt

+ * A [Box] that enforces a minimum height relative to the screen height.
+ */
+@Composable
+internal fun MinScreenHeightBox(


We can probably make this file more generic and include the composables above.

lng-stripe · 2025-05-29T20:10:03Z

@carlosmuvi-stripe I rebased, fixed conflicts, and did some minor cleanup/refactoring per request.

lng-stripe · 2025-05-29T20:11:45Z

paymentsheet/src/main/java/com/stripe/android/link/ui/LinkNavHost.kt

+private val LocalLinkScreenSizeInternal = compositionLocalOf<DpSize?> { null }
+
+/**
+ * Current screen size rendered in [LinkNavHost].
+ */
+internal val LocalLinkScreenSize: CompositionLocal<DpSize?> = LocalLinkScreenSizeInternal


Note here how LocalLinkScreenSize cannot be provided except by LinkNavHost.

lng-stripe commented May 20, 2025

View reviewed changes

lng-stripe marked this pull request as ready for review May 20, 2025 20:25

lng-stripe requested review from a team as code owners May 20, 2025 20:25

lng-stripe requested review from tianzhao-stripe, carlosmuvi-stripe and tillh-stripe and removed request for tianzhao-stripe May 20, 2025 20:25

lng-stripe assigned tillh-stripe and carlosmuvi-stripe May 28, 2025

carlosmuvi-stripe reviewed May 29, 2025

View reviewed changes

lng-stripe added 17 commits May 29, 2025 15:04

fix measurement

81a71ff

rm unnecessary OptIn

4805adb

rm Box

75c34e6

dynamic bottom sheet height

dd61188

animate bottom sheet size

beb3255

👌 animations

2006107

add isEnabled (for testing)

c5ae464

put dynamic bottom sheet behind feature flag

9ad9e14

unnest bottom sheets

8a4c3a2

restore dynamic height; fix layout hierarchy

0f8026c

use approachLayout; rm flag

9dbc097

min screen size

d313a3b

use AnimatedContentHeight again; fix min screens size

a0b453a

use NavHost sizeTransform and AnimatedContent

1aaedad

rm custom approaches

3022ba1

full screen

0ab6df9

improve animations around IME toggles and screen transitions

91eb2d0

lng-stripe added 6 commits May 29, 2025 15:04

clean up

c6616b4

update snapshots

0739e53

add screenshot tests

2986cfb

lint

2f33f2b

update baseline

fd87bc6

minor refactoring

5d47ad6

lng-stripe force-pushed the lng/dynamic-bottom-sheet branch from 18eb930 to 5d47ad6 Compare May 29, 2025 20:06

lng-stripe requested a review from carlosmuvi-stripe May 29, 2025 20:08

lng-stripe commented May 29, 2025

View reviewed changes

lng-stripe added 2 commits May 29, 2025 16:45

dump api

a6a37a9

update test

b322919

carlosmuvi-stripe approved these changes May 30, 2025

View reviewed changes

lng-stripe merged commit 20099ef into master May 30, 2025
13 checks passed

lng-stripe deleted the lng/dynamic-bottom-sheet branch May 30, 2025 20:39

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[link] Dynamic bottom sheet height #10838

[link] Dynamic bottom sheet height #10838

Uh oh!

lng-stripe commented May 20, 2025 •

edited

Loading

Uh oh!

github-actions bot commented May 20, 2025 •

edited

Loading

Uh oh!

lng-stripe May 20, 2025

Uh oh!

lng-stripe May 20, 2025

Uh oh!

lng-stripe May 20, 2025

Uh oh!

lng-stripe May 20, 2025

Uh oh!

lng-stripe May 20, 2025

Uh oh!

carlosmuvi-stripe left a comment

Uh oh!

carlosmuvi-stripe May 29, 2025

Uh oh!

carlosmuvi-stripe May 29, 2025

Uh oh!

carlosmuvi-stripe May 29, 2025

Uh oh!

lng-stripe commented May 29, 2025

Uh oh!

lng-stripe May 29, 2025

Uh oh!

Uh oh!

Uh oh!

		@@ -419,8 +419,15 @@ public final class com/stripe/android/link/ui/ComposableSingletons$LinkButtonKt
		public final class com/stripe/android/link/ui/ComposableSingletons$LinkContentKt {

[link] Dynamic bottom sheet height #10838

[link] Dynamic bottom sheet height #10838

Uh oh!

Conversation

lng-stripe commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Motivation

Testing

Screenshots

Uh oh!

github-actions bot commented May 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

carlosmuvi-stripe left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lng-stripe commented May 29, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

lng-stripe commented May 20, 2025 •

edited

Loading

github-actions bot commented May 20, 2025 •

edited

Loading