diff --git a/.idea/dictionaries/project.xml b/.idea/dictionaries/project.xml new file mode 100644 index 0000000..76c10a8 --- /dev/null +++ b/.idea/dictionaries/project.xml @@ -0,0 +1,7 @@ + + + + agsl + + + \ No newline at end of file diff --git a/README.md b/README.md index d952812..df9b47d 100644 --- a/README.md +++ b/README.md @@ -18,179 +18,13 @@ Apple's Liquid Glass effect for Android Jetpack Compose. ⚠️ The library is in alpha stage, every API may be changed, use it on your own risk. -### Add to project +### Docs [![JitPack Release](https://jitpack.io/v/Kyant0/AndroidLiquidGlass.svg)](https://jitpack.io/#Kyant0/AndroidLiquidGlass) -```kotlin -// settings.gradle.kts in root project -dependencyResolutionManagement { - repositories { - maven("https://jitpack.io") - } -} +[1.0.0-alpha10](https://kyant.gitbook.io/backdrop) -// build.gradle.kts in module -implementation("com.github.Kyant0:AndroidLiquidGlass:") -``` - -### Examples - -### After 1.0.0-alpha10 - -See [docs](https://kyant.gitbook.io/backdrop/hello-glass). - -### 1.0.0-alpha09 - -#### Basic example - -```kotlin -val backdrop = rememberLayerBackdrop(backgroundColor = Color.White) - -Box { - // backdrop content used to fill the backdrop layer - Box(Modifier.backdrop(backdrop)) - - // icon button with glass effect - Box( - Modifier - // [optional] drop shadow effect - .backdropShadow(CircleShape) - // draw the backdrop with glass effect - .drawBackdrop(backdrop) { - // set the shape - shape = CircleShape - - // apply visual effects - if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) { - saturation() - blur(2f.dp) - // here is the glass effect - refraction(height = 8f.dp.toPx(), amount = size.minDimension) - } - - // [optional] draw a brilliant highlight - drawHighlight() - } - .clickable {} - .size(48.dp), - contentAlignment = Alignment.Center - ) {} -} -``` - -#### Advanced example - -```kotlin -val backdrop = rememberLayerBackdrop(backgroundColor = Color.White) - -Box { - // backdrop content used to fill the backdrop layer - Box(Modifier.backdrop(backdrop)) - - // [optional] scale if needed - val originalScale = 1f - - // icon button with glass effect - Box( - Modifier - // [optional] scale if needed - .graphicsLayer { - scaleX = originalScale - scaleY = originalScale - } - // [optional] drop shadow effect - .backdropShadow(CircleShape) - // draw the backdrop with glass effect - .drawBackdrop(backdrop) { - // set the shape - shape = CircleShape - - // apply visual effects - if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) { - saturation() - blur(2f.dp) - // here is the glass effect with dispersion - refractionWithDispersion(height = 8f.dp.toPx(), amount = size.minDimension) - } - - // [optional] draw custom content on the backdrop layer - onDrawBackdrop { drawBackdrop -> - // apply the inverse scale to the backdrop content - scale(1f / originalScale, 1f / originalScale, Offset.Zero) { - drawBackdrop() - } - } - - // [optional] draw a scrim with a brilliant highlight - onDrawSurfaceWithHighlight { drawRect(Color.White.copy(alpha = 0.3f)) } - } - .clickable {} - .size(48.dp), - contentAlignment = Alignment.Center - ) {} -} -``` - -### Before 1.0.0-alpha09 (exclusive) - -```kotlin -val providerState = rememberLiquidGlassProviderState( - // if the providing content has any transparent area and there is a background behind the content, set the - // background color here, or set it to null - backgroundColor = Color.White -) - -// the content behind the glass -Box(Modifier.liquidGlassProvider(providerState)) - -// glass -Box( - Modifier.liquidGlass( - providerState, - GlassStyle( - shape = RoundedCornerShape(16f.dp), - // you can customize more properties - innerRefraction = InnerRefraction( - height = RefractionHeight(8f.dp), - amount = RefractionAmount((-16f).dp), - depthEffect = 0f // or `1f` to have more 3D effect - ), - dispersion = Dispersion.None, // or `Dispersion.Automatic` to enable dispersion effect - material = GlassMaterial( - blurRadius = 2f.dp, - brush = SolidColor(Color.White), - alpha = 0.3f - ), - highlight = GlassHighlight.Default, - shadow = GlassShadow.Default // or `null` to disable shadow - ) - ) -) -``` - -Use the block modifier variant to improve performance when the style changes frequently: - -```kotlin -val progress by animateFloatAsState(if (isPressed) 1f else 0f) - -Box( - Modifier.liquidGlass(providerState) { - GlassStyle( - shape = RoundedCornerShape(16f.dp), - innerRefraction = InnerRefraction( - height = RefractionHeight(8f.dp * progress), - amount = RefractionAmount((-16f).dp * progress) - ), - material = GlassMaterial( - blurRadius = 2f.dp * progress, - brush = SolidColor(Color.White), - alpha = 0.3f * progress - ) - ) - } -) -``` +[before 1.0.0-alpha09](docs/LegacyDocs.md) ## Comparing with iOS diff --git a/docs/LegacyDocs.md b/docs/LegacyDocs.md new file mode 100644 index 0000000..1b37cbf --- /dev/null +++ b/docs/LegacyDocs.md @@ -0,0 +1,98 @@ +# Legacy Documentation + +## 1.0.0-alpha09 + +```kotlin +val backdrop = rememberLayerBackdrop(backgroundColor = Color.White) + +Box { + // backdrop content used to fill the backdrop layer + Box(Modifier.backdrop(backdrop)) + + // icon button with glass effect + Box( + Modifier + // [optional] drop shadow effect + .backdropShadow(CircleShape) + // draw the backdrop with glass effect + .drawBackdrop(backdrop) { + // set the shape + shape = CircleShape + + // apply visual effects + if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) { + saturation() + blur(2f.dp) + // here is the glass effect + refraction(height = 8f.dp.toPx(), amount = size.minDimension) + } + + // [optional] draw a brilliant highlight + drawHighlight() + } + .clickable {} + .size(48.dp), + contentAlignment = Alignment.Center + ) {} +} +``` + +## Before 1.0.0-alpha09 (exclusive) + +```kotlin +val providerState = rememberLiquidGlassProviderState( + // if the providing content has any transparent area and there is a background behind the content, set the + // background color here, or set it to null + backgroundColor = Color.White +) + +// the content behind the glass +Box(Modifier.liquidGlassProvider(providerState)) + +// glass +Box( + Modifier.liquidGlass( + providerState, + GlassStyle( + shape = RoundedCornerShape(16f.dp), + // you can customize more properties + innerRefraction = InnerRefraction( + height = RefractionHeight(8f.dp), + amount = RefractionAmount((-16f).dp), + depthEffect = 0f // or `1f` to have more 3D effect + ), + dispersion = Dispersion.None, // or `Dispersion.Automatic` to enable dispersion effect + material = GlassMaterial( + blurRadius = 2f.dp, + brush = SolidColor(Color.White), + alpha = 0.3f + ), + highlight = GlassHighlight.Default, + shadow = GlassShadow.Default // or `null` to disable shadow + ) + ) +) +``` + +Use the block modifier variant to improve performance when the style changes frequently: + +```kotlin +val progress by animateFloatAsState(if (isPressed) 1f else 0f) + +Box( + Modifier.liquidGlass(providerState) { + GlassStyle( + shape = RoundedCornerShape(16f.dp), + innerRefraction = InnerRefraction( + height = RefractionHeight(8f.dp * progress), + amount = RefractionAmount((-16f).dp * progress) + ), + material = GlassMaterial( + blurRadius = 2f.dp * progress, + brush = SolidColor(Color.White), + alpha = 0.3f * progress + ) + ) + } +) +```