Upgraded marqueeHorizontalFadingEdges and updated versions.

Author: Vasyl Melnyk

ComposeFadingEdges/src/main/kotlin/com/gigamole/composefadingedges/FadingEdges.kt

@@ -21,6 +21,7 @@ import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
@@ -37,7 +38,9 @@ import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.graphics.graphicsLayer
 import androidx.compose.ui.layout.layout
 import androidx.compose.ui.platform.LocalDensity
+import androidx.compose.ui.unit.Constraints
 import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.constrainWidth
 import androidx.compose.ui.unit.dp
 import com.gigamole.composefadingedges.content.FadingEdgesContentType
 import com.gigamole.composefadingedges.content.scrollconfig.FadingEdgesScrollConfig
@@ -56,13 +59,17 @@ import kotlin.math.min
  * When [isMarqueeAutoLayout] is enabled, the origin width is extended based on the provided [length] and [gravity], while maintaining the same offset. This ensures that
  * when fading edges [length] paddings are applied to the marquee text, the text remains positioned at its origin location. It is important to leave sufficient free space
  * around the marquee to ensure the effect is drawn correctly. On the other hand, when [isMarqueeAutoLayout] is disabled, the fading edges length paddings are applied to
- * the marquee text, and the origin position is offset by the [length]. In this case, you need to manually handle this padding offset.
+ * the marquee text, and the origin position is offset by the [length]. In this case, you need to manually handle this padding offset. In the [isMarqueeAutoLayout] the
+ * [isMarqueeAutoPadding] is automatically true.
+ *
+ * When the text content is unfit, the marquee and [horizontalFadingEdges] will not be applied.
  *
  * @param gravity The [FadingEdgesGravity].
  * @param length The fading edges length.
  * @param fillType The [FadingEdgesFillType].
  * @param isMarqueeAutoLayout Determines whether the [horizontalFadingEdges] and text marquee should be automatically aligned during the layout process to accommodate
  *     additional text paddings required for proper fading edges drawing.
+ * @param isMarqueeAutoPadding Determines if padding values according to the [gravity] and [length] should be applied.
  * @param marqueeProvider The custom or default [basicMarquee] provider.
  * @return The [Modifier] with extended width in case of [isMarqueeAutoLayout] is enabled, [horizontalFadingEdges], provided marquee with [marqueeProvider], and
  *     additional horizontal paddings.
@@ -73,21 +80,39 @@ fun Modifier.marqueeHorizontalFadingEdges(
     length: Dp = FadingEdgesDefaults.Length,
     fillType: FadingEdgesFillType = FadingEdgesDefaults.FillType,
     isMarqueeAutoLayout: Boolean = FadingEdgesDefaults.IsMarqueeAutoLayout,
-    marqueeProvider: Modifier.() -> Modifier
-): Modifier =
-    then(
-        if (isMarqueeAutoLayout) {
-            Modifier.layout { measurable, constraints ->
-                val lengthPx = length.roundToPx()
-                val widthLength = when (gravity) {
-                    FadingEdgesGravity.All -> {
-                        lengthPx * 2
-                    }
-                    FadingEdgesGravity.Start,
-                    FadingEdgesGravity.End -> {
-                        lengthPx
-                    }
+    isMarqueeAutoPadding: Boolean = FadingEdgesDefaults.IsMarqueeAutoPadding,
+    marqueeProvider: () -> Modifier
+): Modifier = composed {
+    var isMarqueeAndFadingEdgesVisible by remember { mutableStateOf(false) }
+    var isMarqueeAutoLayoutApplied by remember { mutableStateOf(false) }
+
+    Modifier
+        .layout { measurable, constraints ->
+            val lengthPx = length.roundToPx()
+            val widthLength = when (gravity) {
+                FadingEdgesGravity.All -> {
+                    lengthPx * 2
                 }
+                FadingEdgesGravity.Start,
+                FadingEdgesGravity.End -> {
+                    lengthPx
+                }
+            }
+
+            val contentConstraints = constraints.copy(maxWidth = Constraints.Infinity)
+            val contentPlaceable = measurable.measure(contentConstraints)
+            val containerWidth = constraints.constrainWidth(contentPlaceable.width)
+            val contentWidth = contentPlaceable.width -
+                    if (isMarqueeAutoLayout && isMarqueeAutoLayoutApplied) {
+                        widthLength
+                    } else {
+                        0
+                    }
+
+            isMarqueeAndFadingEdgesVisible = contentWidth > containerWidth
+
+            if (isMarqueeAutoLayout && isMarqueeAndFadingEdgesVisible) {
+                isMarqueeAutoLayoutApplied = true
 
                 // Extend the content width for fading edges and an additional text padding later.
                 val placeable = measurable.measure(
@@ -96,6 +121,20 @@ fun Modifier.marqueeHorizontalFadingEdges(
                     )
                 )
 
+                layout(
+                    width = placeable.width,
+                    height = placeable.height
+                ) {
+                    placeable.placeWithLayer(
+                        x = 0,
+                        y = 0
+                    )
+                }
+            } else {
+                isMarqueeAutoLayoutApplied = false
+
+                val placeable = measurable.measure(constraints)
+
                 layout(
                     width = placeable.width,
                     height = placeable.height
@@ -106,30 +145,39 @@ fun Modifier.marqueeHorizontalFadingEdges(
                     )
                 }
             }
-        } else {
-            Modifier
         }
-    )
-        .horizontalFadingEdges(
-            gravity = gravity,
-            length = length,
-            fillType = fillType
-        )
-        .then(marqueeProvider())
         .then(
-            // Applying an additional padding to text, so fading edges dont cover it, at its origin position.
-            when (gravity) {
-                FadingEdgesGravity.All -> {
-                    Modifier.padding(horizontal = length)
-                }
-                FadingEdgesGravity.Start -> {
-                    Modifier.padding(start = length)
-                }
-                FadingEdgesGravity.End -> {
-                    Modifier.padding(end = length)
-                }
+            if (isMarqueeAndFadingEdgesVisible) {
+                Modifier
+                    .horizontalFadingEdges(
+                        gravity = gravity,
+                        length = length,
+                        fillType = fillType
+                    )
+                    .then(marqueeProvider())
+                    .then(
+                        if (isMarqueeAutoLayout || isMarqueeAutoPadding) {
+                            // Applying an additional padding to text, so fading edges dont cover it, at its origin position.
+                            when (gravity) {
+                                FadingEdgesGravity.All -> {
+                                    Modifier.padding(horizontal = length)
+                                }
+                                FadingEdgesGravity.Start -> {
+                                    Modifier.padding(start = length)
+                                }
+                                FadingEdgesGravity.End -> {
+                                    Modifier.padding(end = length)
+                                }
+                            }
+                        } else {
+                            Modifier
+                        }
+                    )
+            } else {
+                Modifier
             }
         )
+}
 
 /**
  * The [Modifier] to add horizontal [fadingEdges] with a [FadingEdgesContentType.Static] content type. The fading edges are always fully shown.

ComposeFadingEdges/src/main/kotlin/com/gigamole/composefadingedges/FadingEdgesDefaults.kt

@@ -29,4 +29,12 @@ object FadingEdgesDefaults {
      * @see marqueeHorizontalFadingEdges
      */
     const val IsMarqueeAutoLayout: Boolean = true
+
+    /**
+     * Determines whether the [horizontalFadingEdges] and horizontal text marquee should apply paddings paddings according to the gravity and length.
+     *
+     * @see marqueeHorizontalFadingEdges
+     */
+    const val IsMarqueeAutoPadding: Boolean = true
+
 }

README.md

@@ -121,6 +121,7 @@ This `Modifier` comes with common [fading edges params](#fading-edges-modifiers)
 |Param|Description|
 |-|-|
 |`isMarqueeAutoLayout`|Determines whether the `horizontalFadingEdges(...)` and text marquee should be automatically aligned during the layout process to accommodate additional text paddings required for proper fading edges drawing.|
+|`isMarqueeAutoPadding`|Determines if padding values according to the `gravity` and `length` should be applied.|
 |`marqueeProvider`|The custom or default `basicMarquee` provider.|
 
 ## License

app/src/main/kotlin/com/gigamole/composefadingedges/sample/MainActivity.kt

@@ -89,6 +89,8 @@ import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 import kotlin.random.Random
 
+private val ALPHANUMERIC = ('A'..'Z') + ('a'..'z') + ('0'..'9')
+
 class MainActivity : ComponentActivity() {
 
     override fun onCreate(savedInstanceState: Bundle?) {
@@ -212,7 +214,8 @@ fun MainScreenDemoContent() {
                     modifier = Modifier
                         .width(width = 250.dp)
                         .marqueeHorizontalFadingEdges(isMarqueeAutoLayout = false) {
-                            background(color = Color(0xFFFEECF4))
+                            Modifier
+                                .background(color = Color(0xFFFEECF4))
                                 .basicMarquee(
                                     delayMillis = initialDelay.toInt(),
                                     spacing = MarqueeSpacing.fractionOfContainer(fraction = 0.05F),
@@ -275,6 +278,9 @@ fun MainScreenContent() {
     var fadingEdgesFillStopThird by remember { mutableFloatStateOf(FadingEdgesFillTypeDefaults.FillStops.third) }
     var fadingEdgesFillSecondStopAlpha by remember { mutableFloatStateOf(FadingEdgesFillTypeDefaults.SecondStopAlpha) }
     var fadingEdgesColor by remember { mutableStateOf(FadingEdgesFillTypeDefaults.FadeColor.FadeColor) }
+    var fadingEdgesMarqueeTextLength by remember { mutableIntStateOf(50) }
+    var fadingEdgesIsMarqueeAutoLayout by remember { mutableStateOf(FadingEdgesDefaults.IsMarqueeAutoLayout) }
+    var fadingEdgesIsMarqueeAutoPadding by remember { mutableStateOf(FadingEdgesDefaults.IsMarqueeAutoPadding) }
 
     val fadingEdgesGridSpanCount by remember(fadingEdgesSampleGridSpanCount) {
         derivedStateOf {
@@ -296,6 +302,17 @@ fun MainScreenContent() {
             }
         }
     }
+    val fadingEdgesMarqueeText by remember(
+        fadingEdgesMarqueeTextLength
+    ) {
+        derivedStateOf {
+            buildString {
+                repeat(fadingEdgesMarqueeTextLength) {
+                    append(ALPHANUMERIC.random())
+                }
+            }
+        }
+    }
     val fadingEdgesScrollConfig by remember(
         fadingEdgesSampleScrollConfig,
         fadingEdgesScrollAnimationSpec,
@@ -444,6 +461,9 @@ fun MainScreenContent() {
         fadingEdgesFillStopThird = FadingEdgesFillTypeDefaults.FillStops.third
         fadingEdgesFillSecondStopAlpha = FadingEdgesFillTypeDefaults.SecondStopAlpha
         fadingEdgesColor = FadingEdgesFillTypeDefaults.FadeColor.FadeColor
+        fadingEdgesMarqueeTextLength = 50
+        fadingEdgesIsMarqueeAutoLayout = FadingEdgesDefaults.IsMarqueeAutoLayout
+        fadingEdgesIsMarqueeAutoPadding = FadingEdgesDefaults.IsMarqueeAutoPadding
 
         coroutineScope.launch {
             resetScrolls()
@@ -1048,7 +1068,7 @@ fun MainScreenContent() {
                             modifier = Modifier
                                 .weight(weight = 1.0F)
                                 .marqueeHorizontalFadingEdges(length = 8.dp) {
-                                    basicMarquee()
+                                    Modifier.basicMarquee()
                                 },
                             text = "IS LERP BY DIFFERENCE FOR PARTIAL CONTENT:",
                             style = MaterialTheme.typography.labelLarge,
@@ -1205,6 +1225,85 @@ fun MainScreenContent() {
                 Spacer(modifier = Modifier.height(height = 4.dp))
             }
 
+            if (fadingEdgesContentType == FadingEdgesContentType.Static) {
+                Text(
+                    text = "MARQUEE TEXT LENGTH:",
+                    style = MaterialTheme.typography.labelLarge
+                )
+                Slider(
+                    modifier = Modifier.fillMaxWidth(),
+                    value = fadingEdgesMarqueeTextLength.toFloat(),
+                    onValueChange = {
+                        fadingEdgesMarqueeTextLength = it.toInt()
+                    },
+                    valueRange = 0.0F..100.0F,
+                    steps = 11
+                )
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(space = 20.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        modifier = Modifier.weight(weight = 1.0F),
+                        text = "IS MARQUEE AUTO LAYOUT:",
+                        style = MaterialTheme.typography.labelLarge,
+                        maxLines = 1
+                    )
+                    Switch(
+                        modifier = Modifier.padding(start = 8.dp),
+                        checked = fadingEdgesIsMarqueeAutoLayout,
+                        onCheckedChange = {
+                            fadingEdgesIsMarqueeAutoLayout = it
+                        }
+                    )
+                }
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.spacedBy(space = 20.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Text(
+                        modifier = Modifier.weight(weight = 1.0F),
+                        text = "IS MARQUEE AUTO PADDING:",
+                        style = MaterialTheme.typography.labelLarge,
+                        maxLines = 1
+                    )
+                    Switch(
+                        modifier = Modifier.padding(start = 8.dp),
+                        checked = fadingEdgesIsMarqueeAutoPadding,
+                        onCheckedChange = {
+                            fadingEdgesIsMarqueeAutoPadding = it
+                        }
+                    )
+                }
+                Box(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(vertical = 20.dp)
+                        .border(
+                            color = Color.Red.copy(alpha = 0.25F),
+                            width = 1.dp
+                        )
+                ) {
+                    Text(
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .marqueeHorizontalFadingEdges(
+                                gravity = FadingEdgesGravity.All,
+                                length = fadingEdgesLength,
+                                fillType = fadingEdgesFillType,
+                                isMarqueeAutoLayout = fadingEdgesIsMarqueeAutoLayout,
+                                isMarqueeAutoPadding = fadingEdgesIsMarqueeAutoPadding
+                            ) {
+                                Modifier.basicMarquee(iterations = Int.MAX_VALUE)
+                            },
+                        text = fadingEdgesMarqueeText,
+                        style = MaterialTheme.typography.labelLarge,
+                        maxLines = 1
+                    )
+                }
+            }
 
             Button(
                 modifier = Modifier.fillMaxWidth(),

gradle/libs.versions.toml

@@ -1,7 +1,7 @@
 [versions]
 
 # Android/Kotlin
-android_gradle_plugin_version = "8.1.1"
+android_gradle_plugin_version = "8.1.2"
 androidx_ktx_version = "1.12.0"
 kotlin_version = "1.9.10"
 
@@ -10,8 +10,8 @@ ksp_version = "1.9.10-1.0.13"
 
 # Compose
 compose_compiler_version = "1.5.3"
-compose_bom_version = "2023.09.01"
-compose_activity_version = "1.7.2"
+compose_bom_version = "2023.10.01"
+compose_activity_version = "1.8.0"
 compose_color_picker_version = "0.7.0"
 
 [plugins]

plugins/src/main/java/ProjectConfig.kt

@@ -5,7 +5,7 @@ import org.gradle.jvm.toolchain.JavaLanguageVersion
 
 object ProjectConfig {
     const val versionCode = 1
-    const val versionName = "1.0.3"
+    const val versionName = "1.0.4"
 
     const val namespace = "com.gigamole.composefadingedges"
     const val group = "com.github.GIGAMOLE"