Add docs link
This commit is contained in:
1 parent
2700c40514
commit
8785ad08ce
1 file changed
+1
-107
@@ -38,113 +38,7 @@ implementation("com.github.Kyant0:AndroidLiquidGlass:<version>")
|
||||
|
||||
### After 1.0.0-alpha10
|
||||
|
||||
#### Basic example
|
||||
|
||||
```kotlin
|
||||
val backdrop = rememberBackdrop()
|
||||
|
||||
Box {
|
||||
// backdrop content used to fill the backdrop layer
|
||||
Box(Modifier.backdrop(backdrop))
|
||||
|
||||
// icon button with glass effect
|
||||
Box(
|
||||
Modifier
|
||||
.drawBackdrop(
|
||||
backdrop = backdrop,
|
||||
shapeProvider = { CircleShape },
|
||||
// draw a scrim to increase readability
|
||||
onDrawSurface = { drawRect(background.copy(alpha = 0.5f)) }
|
||||
) {
|
||||
// saturation boost
|
||||
saturation()
|
||||
// blur
|
||||
blur(2f.dp.toPx())
|
||||
// glass effect
|
||||
refraction(height = 8f.dp.toPx(), amount = size.minDimension)
|
||||
}
|
||||
.clickable {}
|
||||
.size(48.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {}
|
||||
}
|
||||
```
|
||||
|
||||
#### Advanced example
|
||||
|
||||
Here is the full definition of the `drawBackdrop` modifier:
|
||||
|
||||
```kotlin
|
||||
fun Modifier.drawBackdrop(
|
||||
backdrop: Backdrop,
|
||||
shapeProvider: () -> Shape,
|
||||
highlight: (() -> Highlight?)? = DefaultHighlight,
|
||||
shadow: (() -> Shadow?)? = DefaultShadow,
|
||||
onDrawBehind: (DrawScope.() -> Unit)? = null,
|
||||
onDrawBackdrop: DrawScope.(drawBackdrop: DrawScope.() -> Unit) -> Unit = DefaultOnDrawBackdrop,
|
||||
onDrawSurface: (DrawScope.() -> Unit)? = null,
|
||||
effects: BackdropEffectScope.() -> Unit
|
||||
): Modifier
|
||||
```
|
||||
|
||||
To apply effects for the Composable's self content, use the `contentBackdrop` modifier:
|
||||
|
||||
```kotlin
|
||||
fun Modifier.contentBackdrop(
|
||||
shapeProvider: () -> Shape,
|
||||
highlight: (() -> Highlight?)? = DefaultHighlight,
|
||||
shadow: (() -> Shadow?)? = DefaultShadow,
|
||||
onDrawBehind: (DrawScope.() -> Unit)? = null,
|
||||
onDrawSurface: (DrawScope.() -> Unit)? = null,
|
||||
effects: BackdropEffectScope.() -> Unit
|
||||
): Modifier
|
||||
```
|
||||
|
||||
The following example shows how to draw a dynamic highlight and apply scaling to the backdrop content:
|
||||
|
||||
```kotlin
|
||||
val backdrop = rememberBackdrop()
|
||||
|
||||
Box {
|
||||
// backdrop content used to fill the backdrop layer
|
||||
Box(Modifier.backdrop(backdrop))
|
||||
|
||||
// [optional] scale if needed
|
||||
val originalScale = 1.2f
|
||||
|
||||
// the highlight angle in degrees produced by sensors
|
||||
val highlightAngle = 45f
|
||||
|
||||
// icon button with glass effect
|
||||
Box(
|
||||
Modifier
|
||||
// [optional] scale if needed
|
||||
.graphicsLayer {
|
||||
scaleX = originalScale
|
||||
scaleY = originalScale
|
||||
}
|
||||
.drawBackdrop(
|
||||
backdrop = backdrop,
|
||||
shapeProvider = { CircleShape },
|
||||
// the dynamic highlight
|
||||
highlight = { Highlight { HighlightStyle.Dynamic(angle = highlightAngle) } },
|
||||
// the backdrop content to draw with effects
|
||||
onDrawBackdrop = { drawBackdrop ->
|
||||
// apply the inverse scale to the backdrop content
|
||||
scale(1f / originalScale, 1f / originalScale, Offset.Zero) {
|
||||
drawBackdrop()
|
||||
}
|
||||
// [optional] call `drawImage()` here or similar to draw additional content to the front of backdrop layer
|
||||
},
|
||||
// the surface content to draw above the backdrop layer and below the highlight layer
|
||||
onDrawSurface = { drawRect(background.copy(alpha = 0.5f)) }
|
||||
)
|
||||
.clickable {}
|
||||
.size(48.dp),
|
||||
contentAlignment = Alignment.Center
|
||||
) {}
|
||||
}
|
||||
```
|
||||
See [docs](https://kyant.gitbook.io/backdrop/hello-glass).
|
||||
|
||||
### 1.0.0-alpha09
|
||||
|
||||
|
||||
Reference in new issue
Block a user