Customizable fading edges for UI components with horizontal/vertical orientations, static or dynamic scroll-aware behavior, clip or color fill types, marquee support and flexible modifiers.
| Setup Guide
| Report new issue
The CMPFadingEdges is a powerful Compose Multiplatform library that seamlessly incorporates customisable fading edges with horizontal or vertical orientations, static or scrollable content, clip or color draw.
Features:
| Sample 1 | Sample 2 | Sample 3 |
|---|---|---|
 |  |  |
Download or clone this repository to discover the sample app.
Add to the root settings.gradle.kts:
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
mavenCentral()
maven { url 'https://jitpack.io' }
}
}
Add to the package build.gradle.kts:
dependencies {
implementation("zone.ien.cmpfadingedges:cmp-fadingedges:{latest-version}")
}
Latest version: .
Also, it's possible to download the latest artifact from the releases page.
The ComposeFadingEdges comes with multiple Modifiers: Modifier.horizontalFadingEdges(...)
, Modifier.verticalFadingEdges(...), etc.
For more technical and detailed documentation, read the library KDoc.
The fading edges Modifiers are available for different content orientation and type.
In case, contentType is not provided, the FadingEdgesContentType equals to Static.
The ComposeFadingEdges also provides fading edges for text marquee.
The FadingEdgesContentType can be Static or Dynamic.
The Dynamic content sub-type can be the following:
Scroll: The dynamic fading edges for a ScrollState content.Lazy.List: The dynamic fading edges for a LazyListState content.The Dynamic content type requires FadingEdgesScrollConfig.
The FadingEdgesScrollConfig can be Dynamic, Full or Static.
All of them can configure fading edges scroll based offset animationSpec.
The Dynamic configuration comes with additional params:
| Param | Description |
|---|---|
isLerpByDifferenceForPartialContent | Determines whether the fading edges should interpolate their scroll offset length for partial content. |
scrollFactor | The fading edges scroll factor. |
The FadingEdgesFillType can be FadeClip or FadeColor.
The fading edges fill gradient is automatically faded from max alpha to min alpha.
All of them can configure fading edges fill gradient fillStops and secondStopAlpha.
The FadeClip type clips the content with the fading edges fill gradient.
The FadeColor type requires a color param and draws the fading edges fill gradient over the content.
The utility Modifier to add fading edges to the text marquee (custom or default basicMarquee).
This Modifier comes with common fading edges params and a few additional params:
MIT License. See the LICENSE file for more details.
Special thanks to the GoDaddy for the amazing color picker library.
ScrollState, LazyListState, LazyGridState, LazyStaggeredGridState.| Param | Description |
|---|
orientation | The fading edges orientation: Horizontal or Vertical. |
gravity | The fading edges gravity: All, Start, or End. |
length | The fading edges length. |
contentType | The FadingEdgesContentType. |
fillType | The FadingEdgesFillType. |
Lazy.Grid: The dynamic fading edges for a LazyGridState content.Lazy.StaggeredGrid: The dynamic fading edges for a LazyStaggeredGridState content.| 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. |
Surfaced from shared tags and platforms — no rankings paid for.