GlassmorphicColumn @Composable

Overview

glassmorphic-composables

GlassmorphicColumn @Composable

image

GlassmorphicRow @Composable

image

With Non-Image background

image

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

You might also like...
Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI.
Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI.

Pinocchio Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI. All UI

Mocking with Jetpack Compose - stubbing and verification of Composable functions

Mockposable A companion to mocking libraries that enables stubbing and verification of functions annotated with @androidx.compose.runtime.Composable.

Simple composable for rendering transitions between backstacks.
Simple composable for rendering transitions between backstacks.

compose-backstack Simple library for Jetpack Compose for rendering backstacks of screens and animated transitions when the stack changes. It is not a

A framework for writing composable parsers based on Kotlin Coroutines.

Parsus A framework for writing composable parsers based on Kotlin Coroutines. val booleanGrammar = object : GrammarBooleanExpression() { val ws

Kermit is a Kotlin Multiplatform logging utility with composable log outputs

Kermit is a Kotlin Multiplatform logging utility with composable log outputs. The library provides prebuilt loggers for outputting to platform logging tools such as Logcat and NSLog.

a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens
a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens

This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate

Sample app that shows how to create a bitmap from a Jetpack composable
Sample app that shows how to create a bitmap from a Jetpack composable

Creating Bitmaps From Jetpack Composables This app demonstrates how to create a bitmap from a Jetpack composable without the need to display the compo

Plugin and Desktop app for parsing layout xml into Composable code

composed-xml Inspired by - Recompose composed-xml is a tool for parsing Android layouts into Jetpack Compose code. It can work as both Desktop app or

Kotlin extensions, BindingAdapters, Composable functions for Android CameraX

Setup dependencies { implementation "com.github.skgmn:cameraxx:0.6.0" } Features CameraXX provides extensions methods for CameraX to use functions

Arrow Endpoint offers a composable Endpoint datatype, that allows us easily define an Endpoint from which we can derive clients, servers & documentation.

Arrow Endpoint Arrow Endpoint offers a composable Endpoint datatype, that allows us easily define an Endpoint from which we can derive clients, server

Arrow Endpoint offers a composable Endpoint datatype, that allows us easily define an Endpoint from which we can derive clients, servers & documentation.

Arrow Endpoint Arrow Endpoint offers a composable Endpoint datatype, that allows us easily define an Endpoint from which we can derive clients, server

Jetpack Compose Text composable to show html text from resources
Jetpack Compose Text composable to show html text from resources

HtmlText Current Compose Version: 1.0.3 Compose HtmlText Text composable to show html text from resources Add to your project Add actual HtmlText libr

🏗️ Kotlin implementation of Point-Free's composable architecture

🧩 Komposable Architecture Kotlin implementation of Point-Free's The Composable Architecture 🚧 Project Status We've been using Komposable Architectur

CodeLab for the workshop: A Composable New World
CodeLab for the workshop: A Composable New World

A Composable New World! Compose is here! 🙌 I've created a codelab where you can follow step by step the development of android application using Comp

This is a simple video games discovery app showcasing UI using Jetpack Compose with Clean Architecture and also tests for composable UI.

Jetpack-Compose-Video-Games-Example 🎮 This is a simple video games discovery app showcasing UI using Jetpack Compose and also tests for composable UI

A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

Capturable - 🚀Jetpack Compose utility library for capturing Composable content and transforming it into Bitmap Image🖼️
Capturable - 🚀Jetpack Compose utility library for capturing Composable content and transforming it into Bitmap Image🖼️

Capturable 🚀 A Jetpack Compose utility library for converting Composable content into Bitmap image 🖼️ . Made with ❤️ for Android Developers and Comp

Kapture - A small library for Jetpack Compose to capture Composable content to Android Bitmap

kapture A small utility library for Jetpack Compose to capture Composable conten

Boat - A scoped and composable way to navigate

Boat Boat is an implementation of a scoped, simple and composable way to navigat

Comments
  • Fixed content with moving background

    Fixed content with moving background

    Hi there. How would this technique work for the opposite: Fixed elements, like an app icon, with scrolling content behind. How would you make the app icon itself having a glassy effect ( while keeping the sharp borders ), with the content scrolling underneath?

    opened by ThomasArtProcessors 1
Releases(0.0.7)
Owner
Jakhongir Madaminov
Android dev
Jakhongir Madaminov
a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens

This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate

Bernat Borrás Paronella 178 Jan 4, 2023
Sample app that shows how to create a bitmap from a Jetpack composable

Creating Bitmaps From Jetpack Composables This app demonstrates how to create a bitmap from a Jetpack composable without the need to display the compo

Johann Blake 14 Nov 29, 2022
Jetpack Compose Text composable to show html text from resources

HtmlText Current Compose Version: 1.0.3 Compose HtmlText Text composable to show html text from resources Add to your project Add actual HtmlText libr

Alexander Karkossa 57 Dec 23, 2022
This is a simple video games discovery app showcasing UI using Jetpack Compose with Clean Architecture and also tests for composable UI.

Jetpack-Compose-Video-Games-Example ?? This is a simple video games discovery app showcasing UI using Jetpack Compose and also tests for composable UI

Ruben Quadros 60 Dec 27, 2022
A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

Roman Levinzon 59 Oct 19, 2022
Capturable - 🚀Jetpack Compose utility library for capturing Composable content and transforming it into Bitmap Image🖼️

Capturable ?? A Jetpack Compose utility library for converting Composable content into Bitmap image ??️ . Made with ❤️ for Android Developers and Comp

Shreyas Patil 494 Dec 29, 2022
Kapture - A small library for Jetpack Compose to capture Composable content to Android Bitmap

kapture A small utility library for Jetpack Compose to capture Composable conten

Kaustubh Patange 10 Dec 9, 2022
Boat - A scoped and composable way to navigate

Boat Boat is an implementation of a scoped, simple and composable way to navigat

Bloder 5 Feb 9, 2022
Flippable - A Jetpack Compose utility library to create flipping Composable views with 2 sides

?? Flippable A Jetpack Compose utility library to create flipping Composable views with 2 sides. Built with ❤︎ by Wajahat Karim and contributors Demo

Wajahat Karim 298 Dec 23, 2022
Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Shivaraj M Patil 1 Apr 13, 2022