Flexible, customizable system for synchronized backgrounds across multiple child components, enabling cohesive gradients, flexible positioning, shape masking, and coordinated rendering for unified visual effects.
A flexible and customizable library for Compose Multiplatform that enables synchronized backgrounds across multiple child components.
| Platform | Status |
|---|---|
| Android | ✅ Supported |
| iOS | ✅ Supported (arm64, x64, simulatorArm64) |
| Desktop | ✅ Supported (JVM) |
| Web (JS) | ✅ Supported |
| WebAssembly | ✅ Supported |
Add the dependency to your build.gradle.kts:
dependencies {
implementation("dev.stetsiuk:compose-stencil:1.0.0")
}
For multiplatform projects, add to commonMain:
kotlin {
sourceSets {
commonMain.dependencies {
implementation("dev.stetsiuk:compose-stencil:1.0.0")
}
}
}
Create a synchronized gradient background across multiple items:
The parent component that defines the background and coordinates its child components.
Stencil(
state: StencilState,
modifier: Modifier = Modifier,
backgroundPositionParams: (
parentParams: PositionInRootParams,
childParams: PositionInRootParams
) -> PositionParams = { parentParams, childParams ->
PositionParams.default(parentParams, childParams)
},
backgroundScope: DrawScope.(PositionParams) -> Unit = {},
content: @Composable () -> Unit
)
A child component that receives the synchronized background from its parent Stencil.
StencilChild(
state: StencilState,
modifier: Modifier = Modifier,
shape: Shape = RectangleShape,
positionParams: (
parentParams: PositionInRootParams,
childParams: PositionInRootParams
) -> PositionParams = { parentParams, childParams ->
PositionParams.default(parentParams, childParams)
},
backgroundScope: DrawScope.(PositionParams) -> Unit = { params ->
// Inherited from parent
},
content: @Composable () -> Unit
)
Manages the state and coordinates position information between parent and children.
val state = rememberStencilState(
initialParentPositionParams: PositionInRootParams = PositionInRootParams()
)
Stencil calculates the position of each child component relative to its parent and renders a portion of the shared background. This creates the effect of a continuous background across multiple separated components, perfect for:
Copyright 2024 Vasyl Stetsiuk
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance the License.
You may obtain a copy of the License at
http:
Unless applicable law agreed to writing, software
distributed under the License distributed an BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express implied.
See the License the specific language governing permissions
limitations under the License.
Vasyl Stetsiuk
fun StencilExample() {
val color1 = Color(0xFFE91E63)
val color2 = Color(0xFF9C27B0)
val color3 = Color(0xFF3F51B5)
val shape = RoundedCornerShape(24.dp)
val state = rememberStencilState()
Stencil(
state = state,
modifier = Modifier.fillMaxSize(),
backgroundScope = { params ->
val topLeft = params.relativeToParent
val size = params.size
drawRect(
brush = Brush.linearGradient(
colors = listOf(color1, color2, color3),
start = Offset(0f, topLeft.y),
end = Offset(0f, topLeft.y + size.height)
)
)
}
) {
LazyColumn(
modifier = Modifier.fillMaxSize(),
contentPadding = PaddingValues(20.dp),
verticalArrangement = Arrangement.spacedBy(16.dp)
) {
items(20) { index ->
StencilChild(
state = state,
shape = shape
) {
Text(
modifier = Modifier.padding(12.dp),
text = "Item $index",
color = Color.White,
fontSize = 20.sp
)
}
}
}
}
}
Surfaced from shared tags and platforms — no rankings paid for.