glassmorphic-composables
GlassmorphicColumn @Composable
GlassmorphicRow @Composable
With Non-Image background
Setup Gradle:
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
implementation 'com.github.jakhongirmadaminov:glassmorphic-composables:0.0.4'
Usage:
Place your background Image composable in Capturable composable
var capturedBitmap by remember { mutableStateOf(null) }
val captureController = rememberCaptureController()
Capturable(
controller = captureController,
onCaptured = { bitmap, error ->
// This is captured bitmap of a content inside Capturable Composable.
if (bitmap != null) {
capturedBitmap = bitmap.asAndroidBitmap()
// Bitmap is captured successfully. Do something with it!
}
}
) {
Image(
painter = painterResource(id = R.drawable.bg_autumn),
contentDescription = "",
modifier = Modifier.fillMaxSize(),
contentScale = ContentScale.Crop
)
}
// If your background image is loaded through URL you can call this after the image is loaded.
LaunchedEffect(key1 = true, block = {
withContext(Main) {
captureController.capture()
}
})
Create a mutable list with the exact item count and populate with default value for storing child item positions and offsets
val childMeasures = remember {
mutableStateListOf().apply {
addAll(YOUR_LIST.map { Place() })
}
}
Place your item Composables in either GlassmorphicRow or GlassmorphicColumn and update Place object from above list. Pass captured background image into the Glassmorphic Composable
Note: Capturable and Glassmorphic composables must share the same parent Composable like a Box.
GlassmorphicRow(
modifier = Modifier.padding(
top = 150.dp,
bottom = 50.dp,
start = 25.dp,
end = 70.dp
),
scrollState = scrollState,
childMeasures = childMeasures,
targetBitmap = capturedImage,
dividerSpace = 10,
blurRadius = 10,
drawOnTop = { path ->
val strokeColor = Color(0x80ffffff)
val transparent = Color.Transparent
drawPath(
path = path,
color = strokeColor,
style = Stroke(1f),
)
drawPath(
path = path,
brush = Brush.verticalGradient(listOf(strokeColor, transparent)),
blendMode = BlendMode.Overlay
// blendMode = BlendMode.Plus
// blendMode = BlendMode.Screen
// blendMode = BlendMode.Luminosity
)
},
content = {
items.forEachIndexed { index, it ->
Box(
modifier = Modifier
// .background(Color(0x80FF0000))
.onGloballyPositioned {
childMeasures[index] = Place(it.size, it.positionInParent())
}
.width(cardWidthDp.dp)
.padding(15.dp)
) {
Text(
"Item $it",
color = Color.White
)
}
}
},
)