Make BackgroundQuotes always marquee, even when the quote is small

Author: devbridie

feature/results/src/main/java/com/android/developers/androidify/results/BackgroundQuotes.kt

@@ -17,7 +17,12 @@ package com.android.developers.androidify.results
 
 import androidx.compose.foundation.basicMarquee
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.requiredWidthIn
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -27,42 +32,56 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalInspectionMode
 import androidx.compose.ui.res.stringArrayResource
 import androidx.compose.ui.text.font.FontWeight.Companion.Bold
+import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import com.android.developers.androidify.theme.AndroidifyTheme
+import com.android.developers.androidify.util.LargeScreensPreview
 
 @Composable
-fun BackgroundQuotes(quote1: String, quote2: String?, verboseLayout: Boolean = true) {
+fun BackgroundQuotes(
+    quote1: String,
+    quote2: String?,
+    verboseLayout: Boolean = true,
+    enableAnimations: Boolean = !LocalInspectionMode.current,
+) {
     // Disable animation in tests
-    val iterations = if (LocalInspectionMode.current) 0 else 100
+    val iterations = if (enableAnimations) 100 else 0
 
     Box(modifier = Modifier.fillMaxSize()) {
-        Text(
-            quote1,
-            style = MaterialTheme.typography.titleLarge.copy(fontWeight = Bold),
-            fontSize = 120.sp,
-            modifier = Modifier
-                .align(if (verboseLayout) Alignment.TopCenter else Alignment.Center)
-                .basicMarquee(
+        AlwaysMarquee(
+            size = 1.2f,
+            modifier = Modifier.align(if (verboseLayout) Alignment.TopCenter else Alignment.Center),
+            marqueeModifier = Modifier.basicMarquee(
+                iterations = iterations,
+                repeatDelayMillis = 0,
+                velocity = 80.dp,
+                initialDelayMillis = 500,
+            ),
+        ) {
+            Text(
+                quote1,
+                style = MaterialTheme.typography.titleLarge.copy(fontWeight = Bold),
+                fontSize = 120.sp,
+            )
+        }
+        if (quote2 != null) {
+            AlwaysMarquee(
+                size = 1.2f,
+                modifier = Modifier.align(Alignment.BottomCenter),
+                marqueeModifier = Modifier.basicMarquee(
                     iterations = iterations,
                     repeatDelayMillis = 0,
-                    velocity = 80.dp,
+                    velocity = 60.dp,
                     initialDelayMillis = 500,
                 ),
-        )
-        if (quote2 != null) {
-            Text(
-                quote2,
-                style = MaterialTheme.typography.titleLarge.copy(fontWeight = Bold),
-                fontSize = 110.sp,
-                modifier = Modifier
-                    .align(Alignment.BottomCenter)
-                    .basicMarquee(
-                        iterations = iterations,
-                        repeatDelayMillis = 0,
-                        velocity = 60.dp,
-                        initialDelayMillis = 500,
-                    ),
-            )
+            ) {
+                Text(
+                    quote2,
+                    style = MaterialTheme.typography.titleLarge.copy(fontWeight = Bold),
+                    fontSize = 110.sp,
+                )
+            }
         }
     }
 }
@@ -93,3 +112,80 @@ fun BackgroundRandomQuotes(verboseLayout: Boolean = true) {
     }
     BackgroundQuotes(quote1, quote2, verboseLayout)
 }
+
+/**
+ * A composable that will always scroll its contents. [Modifier.basicMarquee] does nothing when the
+ * contents fit in the max constraints. This composable creates a box that is always larger than the
+ * max constraints and applies the marquee to that box.
+ */
+@Composable
+private fun AlwaysMarquee(
+    size: Float,
+    marqueeModifier: Modifier,
+    modifier: Modifier = Modifier,
+    content: @Composable BoxScope.() -> Unit,
+) {
+    BoxWithConstraints(modifier = modifier.fillMaxWidth()) {
+        Box(marqueeModifier) {
+            Box(Modifier.requiredWidthIn(min = this@BoxWithConstraints.maxWidth * size)) {
+                content()
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun ShortTextMarqueePreview() {
+    Box(Modifier.size(600.dp)) {
+        AlwaysMarquee(
+            1.2f,
+            marqueeModifier = Modifier.basicMarquee(
+                iterations = Int.MAX_VALUE,
+                repeatDelayMillis = 0,
+                velocity = 80.dp,
+                initialDelayMillis = 500,
+            ),
+        ) {
+            Text(
+                modifier = Modifier.align(Alignment.Center),
+                text = "I'm small but I want to marquee!",
+                style = MaterialTheme.typography.titleLarge.copy(fontWeight = Bold),
+                fontSize = 20.sp,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun LongTextMarqueePreview() {
+    Box(Modifier.size(600.dp)) {
+        AlwaysMarquee(
+            1.2f,
+            marqueeModifier = Modifier.basicMarquee(
+                iterations = Int.MAX_VALUE,
+                repeatDelayMillis = 0,
+                velocity = 80.dp,
+                initialDelayMillis = 500,
+            ),
+        ) {
+            Text(
+                modifier = Modifier.align(Alignment.Center),
+
+                text = "I'm big and moving!",
+                style = MaterialTheme.typography.titleLarge.copy(fontWeight = Bold),
+                fontSize = 70.sp,
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+@LargeScreensPreview
+private fun BackgroundQuotesPreview() {
+    AndroidifyTheme {
+        BackgroundRandomQuotes()
+    }
+}

feature/results/src/main/java/com/android/developers/androidify/results/ResultsScreen.kt

@@ -208,7 +208,7 @@ fun ResultsScreenContents(
         AnimatedVisibility(
             showResult,
             enter = slideInHorizontally(animationSpec = tween(1000)) { fullWidth -> fullWidth },
-            modifier = Modifier.fillMaxSize(),
+            modifier = modifier.fillMaxSize(),
         ) {
             BackgroundRandomQuotes(layoutType != ResultsLayoutType.Constrained)
         }