Add app bar insets to PaymentSheet Playground (#10086)

stripe · Feb 5, 2025 · a087599 · a087599
1 parent ca6d983
commit a087599
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 18 deletions.
diff --git a/paymentsheet-example/src/main/AndroidManifest.xml b/paymentsheet-example/src/main/AndroidManifest.xml
@@ -48,6 +48,7 @@
         <activity android:name="com.stripe.android.paymentsheet.example.playground.embedded.EmbeddedPlaygroundActivity" />
         <activity
             android:name="com.stripe.android.paymentsheet.example.playground.PaymentSheetPlaygroundActivity"
+            android:theme="@style/AppTheme.NoActionBar"
             android:exported="true"
             >
             <intent-filter>

diff --git a/...java/com/stripe/android/paymentsheet/example/playground/PaymentSheetPlaygroundActivity.kt b/...java/com/stripe/android/paymentsheet/example/playground/PaymentSheetPlaygroundActivity.kt
@@ -11,8 +11,11 @@ import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.WindowInsets
+import androidx.compose.foundation.layout.asPaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.statusBars
 import androidx.compose.material.Button
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
@@ -146,29 +149,34 @@ internal class PaymentSheetPlaygroundActivity : AppCompatActivity(), ExternalPay
 
             PlaygroundTheme(
                 content = {
-                    playgroundState?.asPaymentState()?.endpoint?.let { customEndpoint ->
-                        Text(
-                            text = "Using $customEndpoint",
-                            modifier = Modifier
-                                .clickable { showCustomEndpointDialog = true }
-                                .padding(bottom = 16.dp),
-                        )
-                    }
+                    Column(
+                        modifier = Modifier
+                            .padding(WindowInsets.statusBars.asPaddingValues())
+                    ) {
+                        playgroundState?.asPaymentState()?.endpoint?.let { customEndpoint ->
+                            Text(
+                                text = "Using $customEndpoint",
+                                modifier = Modifier
+                                    .clickable { showCustomEndpointDialog = true }
+                                    .padding(bottom = 16.dp),
+                            )
+                        }
 
-                    playgroundState?.asPaymentState()?.stripeIntentId?.let { stripeIntentId ->
-                        Text(
-                            text = stripeIntentId,
-                            modifier = Modifier.padding(bottom = 16.dp)
-                        )
-                    }
+                        playgroundState?.asPaymentState()?.stripeIntentId?.let { stripeIntentId ->
+                            Text(
+                                text = stripeIntentId,
+                                modifier = Modifier.padding(bottom = 16.dp)
+                            )
+                        }
 
-                    SettingsUi(playgroundSettings = localPlaygroundSettings)
+                        SettingsUi(playgroundSettings = localPlaygroundSettings)
 
-                    AppearanceButton()
+                        AppearanceButton()
 
-                    QrCodeButton(playgroundSettings = localPlaygroundSettings)
+                        QrCodeButton(playgroundSettings = localPlaygroundSettings)
 
-                    ClearLinkDataButton()
+                        ClearLinkDataButton()
+                    }
                 },
                 bottomBarContent = {
                     ReloadButton(playgroundSettings = localPlaygroundSettings)

diff --git a/...ample/src/main/java/com/stripe/android/paymentsheet/example/playground/PlaygroundTheme.kt b/...ample/src/main/java/com/stripe/android/paymentsheet/example/playground/PlaygroundTheme.kt
@@ -32,6 +32,7 @@ import com.stripe.android.paymentsheet.example.playground.activity.AppearanceSto
 internal fun PlaygroundTheme(
     content: @Composable ColumnScope.() -> Unit,
     bottomBarContent: @Composable ColumnScope.() -> Unit,
+    topBarContent: @Composable (() -> Unit)? = null
 ) {
     val colors = if (isSystemInDarkTheme() || AppearanceStore.forceDarkMode) {
         darkColors()
@@ -48,6 +49,9 @@ internal fun PlaygroundTheme(
             color = MaterialTheme.colors.background,
         ) {
             Scaffold(
+                topBar = {
+                    topBarContent?.invoke()
+                },
                 bottomBar = {
                     Column(
                         modifier = Modifier