glassmorphic-composables

GlassmorphicColumn @Composable

GlassmorphicRow @Composable

Setup Gradle:

allprojects {
    repositories {
    maven { url 'https://jitpack.io' }
    }
}

implementation 'com.github.jakhongirMadaminov:glassmorphic-composables:0.0.3'

Usage:

Place your background Image @Composable in Capturable @Composable

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
          )
      }

      LaunchedEffect(key1 = true, block = {
          withContext(Main) {
              captureController.capture()
          }
      })

Create a mutable list for storing child item positions and offsets

val childMeasures = remember { mutableStateListOf<Place>() }

Place your item @Composables in either GlassmorphicRow or GlassmorphicColumn and update Place object from above list. Pass capturade background image into the Glassmorphic @Composable

   GlassmorphicRow(
                modifier = Modifier.padding(top = 150.dp),
                scrollState = scrollState,
                childMeasures = childMeasures,
                targetBitmap = capturedImage,
                dividerSpace = 10,
                blurRadius = 50
            ){
                items.forEachIndexed { index, it ->
                    Box(
                        modifier = Modifier
                            .onGloballyPositioned {
                                childMeasures[index] = Place(it.size, it.positionInParent())
                            }
                            .width(cardWidthDp.dp)
                            .padding(15.dp)
                    ) {
                        Text(
                            "Item $it",
                            color = Color.White
                        )
                    }
                }
            }

GitHub

View Github