Add new BackdropDrawers, update glass playground to support parameter adjustment

catalog/src/main/java/com/kyant/backdrop/catalog/BackdropDemoScaffold.kt

@@ -7,6 +7,7 @@ import androidx.activity.result.contract.ActivityResultContracts
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBarsPadding
@@ -38,7 +39,7 @@ import com.kyant.backdrop.rememberBackdrop
 fun BackdropDemoScaffold(
     modifier: Modifier = Modifier,
     @DrawableRes initialPainterResId: Int = R.drawable.wallpaper_light,
-    content: @Composable (backdrop: Backdrop) -> Unit
+    content: @Composable BoxScope.(backdrop: Backdrop) -> Unit
 ) {
     Box(
         Modifier.fillMaxSize(),

catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidButton.kt

@@ -33,7 +33,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.fastCoerceAtMost
 import androidx.compose.ui.util.fastCoerceIn
 import androidx.compose.ui.util.lerp
-import com.kyant.backdrop.Backdrop
+import com.kyant.backdrop.BackdropDrawer
 import com.kyant.backdrop.catalog.utils.inspectDragGestures
 import com.kyant.backdrop.drawBackdrop
 import com.kyant.backdrop.effects.blur
@@ -50,7 +50,7 @@ import kotlin.math.tanh
 @Composable
 fun LiquidButton(
     onClick: () -> Unit,
-    backdrop: Backdrop,
+    backdrop: BackdropDrawer,
     modifier: Modifier = Modifier,
     isInteractive: Boolean = true,
     tint: Color = Color.Unspecified,

catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidSlider.kt

@@ -11,7 +11,6 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxWithConstraints
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@@ -37,7 +36,7 @@ import androidx.compose.ui.unit.dp
 import androidx.compose.ui.util.fastCoerceIn
 import androidx.compose.ui.util.fastRoundToInt
 import androidx.compose.ui.util.lerp
-import com.kyant.backdrop.Backdrop
+import com.kyant.backdrop.BackdropDrawer
 import com.kyant.backdrop.backdrop
 import com.kyant.backdrop.drawBackdrop
 import com.kyant.backdrop.effects.refractionWithDispersion
@@ -53,7 +52,7 @@ fun LiquidSlider(
     value: () -> Float,
     onValueChange: (Float) -> Unit,
     valueRange: ClosedFloatingPointRange<Float>,
-    backdrop: Backdrop,
+    backdrop: BackdropDrawer,
     modifier: Modifier = Modifier
 ) {
     val isLightTheme = !isSystemInDarkTheme()
@@ -82,9 +81,7 @@ fun LiquidSlider(
         }
 
     BoxWithConstraints(
-        modifier
-            .padding(horizontal = 16f.dp)
-            .fillMaxWidth(),
+        modifier.fillMaxWidth(),
         contentAlignment = Alignment.CenterStart
     ) {
         val density = LocalDensity.current

catalog/src/main/java/com/kyant/backdrop/catalog/destinations/GlassPlaygroundContent.kt

@@ -4,11 +4,22 @@ import androidx.compose.animation.core.Animatable
 import androidx.compose.animation.core.VectorConverter
 import androidx.compose.foundation.gestures.detectTransformGestures
 import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.navigationBarsPadding
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.text.BasicText
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableFloatStateOf
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.paint
 import androidx.compose.ui.geometry.Offset
@@ -17,11 +28,19 @@ import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.graphics.TransformOrigin
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.TextStyle
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
+import com.kyant.backdrop.EmptyBackdropDrawer
 import com.kyant.backdrop.catalog.BackdropDemoScaffold
+import com.kyant.backdrop.catalog.Block
 import com.kyant.backdrop.catalog.R
+import com.kyant.backdrop.catalog.components.LiquidButton
+import com.kyant.backdrop.catalog.components.LiquidSlider
 import com.kyant.backdrop.drawBackdrop
+import com.kyant.backdrop.effects.blur
 import com.kyant.backdrop.effects.refraction
+import com.kyant.backdrop.effects.refractionWithDispersion
 import com.kyant.backdrop.effects.saturation
 import com.kyant.capsule.ContinuousRoundedRectangle
 import kotlinx.coroutines.launch
@@ -41,9 +60,18 @@ fun GlassPlaygroundContent() {
     val zoomAnimation = remember { Animatable(1f) }
     val rotationAnimation = remember { Animatable(0f) }
 
+    var isSheetExpanded by remember { mutableStateOf(true) }
+
+    var blurRadiusDp by remember { mutableFloatStateOf(0f) }
+    var refractionHeightFrac by remember { mutableFloatStateOf(0.1f) }
+    var refractionAmountFrac by remember { mutableFloatStateOf(0.2f) }
+    var dispersionIntensity by remember { mutableFloatStateOf(0f) }
+
     BackdropDemoScaffold { backdrop ->
         Box(
             Modifier
+                .padding(top = 48f.dp)
+                .statusBarsPadding()
                 .drawBackdrop(
                     backdrop,
                     { ContinuousRoundedRectangle(48f.dp) },
@@ -59,8 +87,15 @@ fun GlassPlaygroundContent() {
                         transformOrigin = TransformOrigin(0.5f, 0.5f)
                     }
                 ) {
+                    val minDimension = size.minDimension
                     saturation()
-                    refraction(24f.dp.toPx(), size.minDimension / 2f, true)
+                    blur(blurRadiusDp.dp.toPx())
+                    refractionWithDispersion(
+                        height = refractionHeightFrac * minDimension,
+                        amount = refractionAmountFrac * minDimension,
+                        hasDepthEffect = true,
+                        dispersionIntensity = dispersionIntensity
+                    )
                 }
                 .pointerInput(animationScope) {
                     fun Offset.rotateBy(angle: Float): Offset {
@@ -91,6 +126,86 @@ fun GlassPlaygroundContent() {
                     colorFilter = ColorFilter.tint(accentColor)
                 )
                 .size(256f.dp)
+                .align(Alignment.TopCenter)
         )
+
+        Block {
+            if (isSheetExpanded) {
+                val sheetBackdrop = EmptyBackdropDrawer
+                Column(
+                    Modifier
+                        .padding(16f.dp)
+                        .padding(bottom = 72f.dp)
+                        .navigationBarsPadding()
+                        .drawBackdrop(
+                            backdrop,
+                            { ContinuousRoundedRectangle(32f.dp) },
+                            onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
+                        ) {
+                            saturation()
+                            blur(4f.dp.toPx())
+                            refraction(16f.dp.toPx(), 32f.dp.toPx())
+                        }
+                        .padding(24f.dp)
+                        .align(Alignment.BottomCenter),
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    verticalArrangement = Arrangement.spacedBy(16f.dp)
+                ) {
+                    Column(verticalArrangement = Arrangement.spacedBy(8f.dp)) {
+                        BasicText("Blur radius")
+                        LiquidSlider(
+                            value = { blurRadiusDp },
+                            onValueChange = { blurRadiusDp = it },
+                            valueRange = 0f..32f,
+                            backdrop = sheetBackdrop
+                        )
+                    }
+                    Column(verticalArrangement = Arrangement.spacedBy(8f.dp)) {
+                        BasicText("Refraction height")
+                        LiquidSlider(
+                            value = { refractionHeightFrac },
+                            onValueChange = { refractionHeightFrac = it },
+                            valueRange = 0f..0.5f,
+                            backdrop = sheetBackdrop
+                        )
+                    }
+                    Column(verticalArrangement = Arrangement.spacedBy(8f.dp)) {
+                        BasicText("Refraction amount")
+                        LiquidSlider(
+                            value = { refractionAmountFrac },
+                            onValueChange = { refractionAmountFrac = it },
+                            valueRange = 0f..1f,
+                            backdrop = sheetBackdrop
+                        )
+                    }
+                    Column(verticalArrangement = Arrangement.spacedBy(8f.dp)) {
+                        BasicText("Dispersion intensity")
+                        LiquidSlider(
+                            value = { dispersionIntensity },
+                            onValueChange = { dispersionIntensity = it },
+                            valueRange = 0f..1f,
+                            backdrop = sheetBackdrop
+                        )
+                    }
+                }
+            }
+        }
+
+        Block {
+            LiquidButton(
+                { isSheetExpanded = !isSheetExpanded },
+                backdrop,
+                Modifier
+                    .padding(20f.dp)
+                    .navigationBarsPadding()
+                    .align(Alignment.BottomStart),
+                tint = Color(0xFFFF8D28)
+            ) {
+                BasicText(
+                    if (isSheetExpanded) "🔽" else "⬆️",
+                    style = TextStyle(Color.White, 15f.sp)
+                )
+            }
+        }
     }
 }

catalog/src/main/java/com/kyant/backdrop/catalog/destinations/SliderContent.kt

@@ -27,7 +27,7 @@ fun SliderContent() {
                 onValueChange = { value = it },
                 valueRange = 0f..100f,
                 backdrop = backdrop,
-                Modifier.padding(horizontal = 16f.dp)
+                Modifier.padding(horizontal = 32f.dp)
             )
         }
     }