diff --git a/backdrop/src/main/java/com/kyant/backdrop/DrawBackdropModifier.kt b/backdrop/src/main/java/com/kyant/backdrop/DrawBackdropModifier.kt index 1ffff13..ca226d0 100644 --- a/backdrop/src/main/java/com/kyant/backdrop/DrawBackdropModifier.kt +++ b/backdrop/src/main/java/com/kyant/backdrop/DrawBackdropModifier.kt @@ -44,6 +44,7 @@ private val DefaultOnDrawContent: ContentDrawScope.() -> Unit = { drawContent() fun Modifier.drawBackdrop( backdrop: Backdrop, shape: () -> Shape, + effects: (BackdropEffectScope.() -> Unit)? = null, highlight: (() -> Highlight?)? = DefaultHighlight, shadow: (() -> Shadow?)? = DefaultShadow, layer: (GraphicsLayerScope.() -> Unit)? = null, @@ -51,11 +52,10 @@ fun Modifier.drawBackdrop( onDrawBehind: (DrawScope.() -> Unit)? = null, onDrawBackdrop: DrawScope.(drawBackdrop: DrawScope.() -> Unit) -> Unit = DefaultOnDrawBackdrop, onDrawSurface: (DrawScope.() -> Unit)? = null, - onDrawContent: ContentDrawScope.() -> Unit = DefaultOnDrawContent, onDrawFront: (DrawScope.() -> Unit)? = null, - drawContent: Boolean = true, contentEffects: (BackdropEffectScope.() -> Unit)? = null, - effects: (BackdropEffectScope.() -> Unit)? = null + onDrawContent: ContentDrawScope.() -> Unit = DefaultOnDrawContent, + drawContent: Boolean = true ): Modifier { val shapeProvider = ShapeProvider(shape) return this diff --git a/catalog/release/baselineProfiles/0/catalog-release.dm b/catalog/release/baselineProfiles/0/catalog-release.dm index 66ad41e..ca630b2 100644 Binary files a/catalog/release/baselineProfiles/0/catalog-release.dm and b/catalog/release/baselineProfiles/0/catalog-release.dm differ diff --git a/catalog/release/baselineProfiles/1/catalog-release.dm b/catalog/release/baselineProfiles/1/catalog-release.dm index 840af4f..455d76e 100644 Binary files a/catalog/release/baselineProfiles/1/catalog-release.dm and b/catalog/release/baselineProfiles/1/catalog-release.dm differ diff --git a/catalog/release/catalog-release.apk b/catalog/release/catalog-release.apk index 1d3e8d0..c4d0870 100644 Binary files a/catalog/release/catalog-release.apk and b/catalog/release/catalog-release.apk differ diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/CatalogDestination.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/CatalogDestination.kt index 7ebb048..c2af91c 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/CatalogDestination.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/CatalogDestination.kt @@ -6,10 +6,11 @@ enum class CatalogDestination { Buttons, Slider, BottomTabs, - - ControlCenter, Dialog, + LockScreen, + ControlCenter, + GlassPlayground, AdaptiveLuminanceGlass, ScrollContainer, diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/MainContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/MainContent.kt index 2597d60..5b6bb5b 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/MainContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/MainContent.kt @@ -14,6 +14,7 @@ import com.kyant.backdrop.catalog.destinations.DialogContent import com.kyant.backdrop.catalog.destinations.GlassPlaygroundContent import com.kyant.backdrop.catalog.destinations.HomeContent import com.kyant.backdrop.catalog.destinations.LazyScrollContainerContent +import com.kyant.backdrop.catalog.destinations.LockScreenContent import com.kyant.backdrop.catalog.destinations.ScrollContainerContent import com.kyant.backdrop.catalog.destinations.SliderContent @@ -31,10 +32,11 @@ fun MainContent() { CatalogDestination.Buttons -> ButtonsContent() CatalogDestination.Slider -> SliderContent() CatalogDestination.BottomTabs -> BottomTabsContent() - - CatalogDestination.ControlCenter -> ControlCenterContent() CatalogDestination.Dialog -> DialogContent() + CatalogDestination.LockScreen -> LockScreenContent() + CatalogDestination.ControlCenter -> ControlCenterContent() + CatalogDestination.GlassPlayground -> GlassPlaygroundContent() CatalogDestination.AdaptiveLuminanceGlass -> AdaptiveLuminanceGlassContent() CatalogDestination.ScrollContainer -> ScrollContainerContent() diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidButton.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidButton.kt index f5308d2..c564c6d 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidButton.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidButton.kt @@ -86,8 +86,13 @@ half4 main(float2 coord) { Row( modifier .drawBackdrop( - backdrop, - { ContinuousCapsule }, + backdrop = backdrop, + shape = { ContinuousCapsule }, + effects = { + vibrancy() + blur(2f.dp.toPx()) + refraction(12f.dp.toPx(), 24f.dp.toPx()) + }, layer = if (isInteractive) { { val width = size.width @@ -161,11 +166,7 @@ half4 main(float2 coord) { } else { null } - ) { - vibrancy() - blur(2f.dp.toPx()) - refraction(12f.dp.toPx(), 24f.dp.toPx()) - } + ) .clickable( interactionSource = null, indication = if (isInteractive) null else LocalIndication.current, diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidSlider.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidSlider.kt index c869d12..5777fba 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidSlider.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/components/LiquidSlider.kt @@ -141,8 +141,11 @@ fun LiquidSlider( } ) .drawBackdrop( - rememberCombinedBackdrop(backdrop, trackBackdrop), - { ContinuousCapsule }, + backdrop = rememberCombinedBackdrop(backdrop, trackBackdrop), + shape = { ContinuousCapsule }, + effects = { + refractionWithDispersion(6f.dp.toPx(), size.height / 2f) + }, highlight = { val progress = progressAnimation.value Highlight.AmbientDefault.copy(alpha = progress) @@ -186,9 +189,7 @@ fun LiquidSlider( drawRect(Color.White.copy(1f - progress)) } - ) { - refractionWithDispersion(6f.dp.toPx(), size.height / 2f) - } + ) .size(40f.dp, 24f.dp) ) } diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/AdaptiveLuminanceGlassContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/AdaptiveLuminanceGlassContent.kt index 0160241..28789e9 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/AdaptiveLuminanceGlassContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/AdaptiveLuminanceGlassContent.kt @@ -96,8 +96,25 @@ fun AdaptiveLuminanceGlassContent() { Box( Modifier .drawBackdrop( - backdrop, - { ContinuousRoundedRectangle(24f.dp) }, + backdrop = backdrop, + shape = { ContinuousRoundedRectangle(24f.dp) }, + effects = { + val l = (luminanceAnimation.value * 2f - 1f).let { sign(it) * it * it } + colorControls( + brightness = + if (l > 0f) lerp(0.1f, 0.5f, l) + else lerp(0.1f, -0.2f, -l), + contrast = + if (l > 0f) lerp(1f, 0f, l) + else 1f, + saturation = 1.5f + ) + blur( + if (l > 0f) lerp(8f.dp.toPx(), 16f.dp.toPx(), l) + else lerp(8f.dp.toPx(), 2f.dp.toPx(), -l) + ) + refraction(24f.dp.toPx(), size.minDimension / 2f, true) + }, layer = { val offset = offsetAnimation.value val zoom = zoomAnimation.value @@ -113,23 +130,7 @@ fun AdaptiveLuminanceGlassContent() { drawBackdrop() layer.record { drawBackdrop() } } - ) { - val l = (luminanceAnimation.value * 2f - 1f).let { sign(it) * it * it } - colorControls( - brightness = - if (l > 0f) lerp(0.1f, 0.5f, l) - else lerp(0.1f, -0.2f, -l), - contrast = - if (l > 0f) lerp(1f, 0f, l) - else 1f, - saturation = 1.5f - ) - blur( - if (l > 0f) lerp(8f.dp.toPx(), 16f.dp.toPx(), l) - else lerp(8f.dp.toPx(), 2f.dp.toPx(), -l) - ) - refraction(24f.dp.toPx(), size.minDimension / 2f, true) - } + ) .pointerInput(animationScope) { fun Offset.rotateBy(angle: Float): Offset { val angleInRadians = angle * (PI / 180) diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/BottomTabsContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/BottomTabsContent.kt index 8bd7a12..5f50202 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/BottomTabsContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/BottomTabsContent.kt @@ -126,8 +126,13 @@ fun BottomTabsContent() { Row( Modifier .drawBackdrop( - backdrop, - { ContinuousCapsule }, + backdrop = backdrop, + shape = { ContinuousCapsule }, + effects = { + vibrancy() + blur(8f.dp.toPx()) + refraction(24f.dp.toPx(), 24f.dp.toPx()) + }, layer = { val progress = pressAnimation.value val scale = lerp(1f, 1f + 2f.dp.toPx() / size.height, progress) @@ -135,11 +140,7 @@ fun BottomTabsContent() { scaleY = scale }, onDrawSurface = { drawRect(containerColor) } - ) { - vibrancy() - blur(8f.dp.toPx()) - refraction(24f.dp.toPx(), 24f.dp.toPx()) - } + ) .drawWithContent { drawContent() tabsLayer.record { this@drawWithContent.drawContent() } @@ -210,13 +211,14 @@ fun BottomTabsContent() { .drawBackdrop( backdrop, { ContinuousCapsule }, + { + vibrancy() + blur(8f.dp.toPx()) + }, highlight = null, shadow = null, onDrawSurface = { drawRect(containerColor) } - ) { - vibrancy() - blur(8f.dp.toPx()) - } + ) .height(56f.dp) .fillMaxWidth() ) @@ -249,6 +251,17 @@ fun BottomTabsContent() { .drawBackdrop( rememberCombinedBackdrop(backdrop, tabsBackdrop), { ContinuousCapsule }, + { + val progress = pressAnimation.value + refraction( + 12f.dp.toPx() * progress, + 12f.dp.toPx() * progress + ) + dispersion( + 12f.dp.toPx() * progress, + 24f.dp.toPx() * progress + ) + }, highlight = { val progress = pressAnimation.value Highlight.AmbientDefault.copy(alpha = progress) @@ -296,17 +309,7 @@ fun BottomTabsContent() { alpha = 1f - progress ) } - ) { - val progress = pressAnimation.value - refraction( - 12f.dp.toPx() * progress, - 12f.dp.toPx() * progress - ) - dispersion( - 12f.dp.toPx() * progress, - 24f.dp.toPx() * progress - ) - } + ) .draggable( rememberDraggableState { delta -> val scaleX = lerp(1f, 1f + 20f / 56f, scaleXAnimation.value) diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ControlCenterContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ControlCenterContent.kt index ba9038a..6db95ff 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ControlCenterContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ControlCenterContent.kt @@ -49,7 +49,6 @@ import com.kyant.backdrop.catalog.R import com.kyant.backdrop.catalog.utils.ProgressConverter import com.kyant.backdrop.catalog.utils.rememberUISensor import com.kyant.backdrop.drawBackdrop -import com.kyant.backdrop.effects.blur import com.kyant.backdrop.effects.refraction import com.kyant.backdrop.effects.vibrancy import com.kyant.backdrop.highlight.Highlight @@ -201,17 +200,13 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - { ContinuousRoundedRectangle(40f.dp) }, - layer = glassLayer, - highlight = null, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, + highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - contentEffects = { - blur(8f.dp.toPx()) - refraction(8f.dp.toPx(), size.minDimension / 4f, true) - }, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .size(itemTwoSpanSize) .padding(itemSpacing) @@ -247,13 +242,13 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .size(itemTwoSpanSize) ) @@ -275,13 +270,13 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .paint(airplaneModeIcon, colorFilter = iconColorFilter) .size(itemSize) @@ -289,13 +284,13 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .paint(airplaneModeIcon, colorFilter = iconColorFilter) .size(itemSize) @@ -304,12 +299,12 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - effects = glassEffects + layer = glassLayer ) .size(itemTwoSpanSize, itemSize) ) @@ -322,26 +317,26 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .size(itemSize, itemTwoSpanSize) ) Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .size(itemSize, itemTwoSpanSize) ) @@ -357,13 +352,13 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .size(itemTwoSpanSize) ) @@ -378,13 +373,13 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .paint(airplaneModeIcon, colorFilter = iconColorFilter) .size(itemSize) @@ -392,13 +387,13 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .paint(airplaneModeIcon, colorFilter = iconColorFilter) .size(itemSize) @@ -411,13 +406,13 @@ fun ControlCenterContent() { Box( Modifier .drawBackdrop( - backdrop, - glassShape, - layer = glassLayer, + backdrop = backdrop, + shape = glassShape, + effects = glassEffects, highlight = glassHighlight, shadow = null, - onDrawSurface = glassSurface, - effects = glassEffects + layer = glassLayer, + onDrawSurface = glassSurface ) .paint(airplaneModeIcon, colorFilter = iconColorFilter) .size(itemSize) diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/DialogContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/DialogContent.kt index e7b1268..5404cfa 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/DialogContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/DialogContent.kt @@ -6,7 +6,6 @@ import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding @@ -15,6 +14,7 @@ import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.clip +import androidx.compose.ui.draw.drawWithContent import androidx.compose.ui.graphics.BlendMode import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.graphicsLayer @@ -48,27 +48,29 @@ fun DialogContent() { else Color(0xFF121212).copy(0.56f) BackdropDemoScaffold( - Modifier - .background(dimColor) - .fillMaxSize(), + Modifier.drawWithContent { + drawContent() + drawRect(dimColor) + }, initialPainterResId = R.drawable.system_home_screen_light ) { backdrop -> Column( Modifier .padding(40f.dp) .drawBackdrop( - backdrop, - { ContinuousRoundedRectangle(48f.dp) }, + backdrop = backdrop, + shape = { ContinuousRoundedRectangle(48f.dp) }, + effects = { + colorControls( + brightness = if (isLightTheme) 0.2f else 0f, + saturation = 1.5f + ) + blur(if (isLightTheme) 16f.dp.toPx() else 8f.dp.toPx()) + refraction(24f.dp.toPx(), 48f.dp.toPx(), true) + }, highlight = { Highlight { HighlightStyle.Solid } }, onDrawSurface = { drawRect(containerColor) } - ) { - colorControls( - brightness = if (isLightTheme) 0.2f else 0f, - saturation = 1.5f - ) - blur(if (isLightTheme) 16f.dp.toPx() else 8f.dp.toPx()) - refraction(24f.dp.toPx(), 48f.dp.toPx(), true) - } + ) .fillMaxWidth() ) { BasicText( diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/GlassPlaygroundContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/GlassPlaygroundContent.kt index 14c828a..a00a47c 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/GlassPlaygroundContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/GlassPlaygroundContent.kt @@ -64,8 +64,19 @@ fun GlassPlaygroundContent() { .padding(top = 48f.dp) .statusBarsPadding() .drawBackdrop( - backdrop, - { ContinuousRoundedRectangle(256f.dp / 2f * cornerRadiusFrac) }, + backdrop = backdrop, + shape = { ContinuousRoundedRectangle(256f.dp / 2f * cornerRadiusFrac) }, + effects = { + val minDimension = size.minDimension + vibrancy() + blur(blurRadiusDp.dp.toPx()) + refractionWithDispersion( + height = refractionHeightFrac * minDimension * 0.5f, + amount = refractionAmountFrac * minDimension, + hasDepthEffect = true, + dispersionIntensity = dispersionIntensity + ) + }, layer = { val offset = offsetAnimation.value val zoom = zoomAnimation.value @@ -77,17 +88,7 @@ fun GlassPlaygroundContent() { rotationZ = rotation transformOrigin = TransformOrigin(0.5f, 0.5f) } - ) { - val minDimension = size.minDimension - vibrancy() - blur(blurRadiusDp.dp.toPx()) - refractionWithDispersion( - height = refractionHeightFrac * minDimension * 0.5f, - amount = refractionAmountFrac * minDimension, - hasDepthEffect = true, - dispersionIntensity = dispersionIntensity - ) - } + ) .pointerInput(animationScope) { fun Offset.rotateBy(angle: Float): Offset { val angleInRadians = angle * (PI / 180) @@ -125,15 +126,16 @@ fun GlassPlaygroundContent() { .padding(bottom = 72f.dp) .navigationBarsPadding() .drawBackdrop( - backdrop, - { ContinuousRoundedRectangle(32f.dp) }, + backdrop = backdrop, + shape = { ContinuousRoundedRectangle(32f.dp) }, + effects = { + vibrancy() + blur(4f.dp.toPx()) + refraction(16f.dp.toPx(), 32f.dp.toPx()) + }, exportedBackdrop = sheetBackdrop, onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) } - ) { - vibrancy() - blur(4f.dp.toPx()) - refraction(16f.dp.toPx(), 32f.dp.toPx()) - } + ) .padding(24f.dp) .align(Alignment.BottomCenter), horizontalAlignment = Alignment.CenterHorizontally, diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/HomeContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/HomeContent.kt index a3d0fc3..76f9f94 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/HomeContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/HomeContent.kt @@ -45,10 +45,11 @@ fun HomeContent(onNavigate: (CatalogDestination) -> Unit) { ListItem({ onNavigate(CatalogDestination.Buttons) }, "Buttons") ListItem({ onNavigate(CatalogDestination.Slider) }, "Slider") ListItem({ onNavigate(CatalogDestination.BottomTabs) }, "Bottom tabs") + ListItem({ onNavigate(CatalogDestination.Dialog) }, "Dialog") Subtitle("System UIs") + ListItem({ onNavigate(CatalogDestination.LockScreen) }, "Lock screen") ListItem({ onNavigate(CatalogDestination.ControlCenter) }, "Control center") - ListItem({ onNavigate(CatalogDestination.Dialog) }, "Dialog") Subtitle("Experiments") ListItem({ onNavigate(CatalogDestination.GlassPlayground) }, "Glass playground") diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/LazyScrollContainerContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/LazyScrollContainerContent.kt index 716ac4a..25d7dd7 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/LazyScrollContainerContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/LazyScrollContainerContent.kt @@ -36,12 +36,13 @@ fun LazyScrollContainerContent() { Box( Modifier .drawBackdrop( - backdrop, - { ContinuousRoundedRectangle(32f.dp) } - ) { - vibrancy() - refraction(16f.dp.toPx(), 32f.dp.toPx()) - } + backdrop = backdrop, + shape = { ContinuousRoundedRectangle(32f.dp) }, + effects = { + vibrancy() + refraction(16f.dp.toPx(), 32f.dp.toPx()) + } + ) .height(160f.dp) .fillMaxWidth() ) diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/LockScreenContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/LockScreenContent.kt new file mode 100644 index 0000000..51cdeca --- /dev/null +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/LockScreenContent.kt @@ -0,0 +1,91 @@ +package com.kyant.backdrop.catalog.destinations + +import androidx.compose.foundation.Image +import androidx.compose.foundation.layout.Arrangement +import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.text.BasicText +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.drawWithContent +import androidx.compose.ui.graphics.BlendMode +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.graphicsLayer +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.text.TextStyle +import androidx.compose.ui.unit.DpOffset +import androidx.compose.ui.unit.dp +import androidx.compose.ui.unit.sp +import com.kyant.backdrop.catalog.BackdropDemoScaffold +import com.kyant.backdrop.catalog.R +import com.kyant.backdrop.drawBackdrop +import com.kyant.backdrop.effects.blur +import com.kyant.backdrop.effects.refraction +import com.kyant.backdrop.effects.vibrancy +import com.kyant.backdrop.shadow.Shadow +import com.kyant.capsule.ContinuousRoundedRectangle + +@Composable +fun LockScreenContent() { + BackdropDemoScaffold( + Modifier.drawWithContent { + drawContent() + drawRect(Color.Black.copy(0.5f)) + } + ) { backdrop -> + Column( + Modifier.padding(16f.dp), + verticalArrangement = Arrangement.spacedBy(16f.dp) + ) { + Row( + Modifier + .drawBackdrop( + backdrop, + { ContinuousRoundedRectangle(24f.dp) }, + { + vibrancy() + blur(4f.dp.toPx()) + refraction(16f.dp.toPx(), size.minDimension / 2f, true) + }, + shadow = { + Shadow( + elevation = 4f.dp, + offset = DpOffset(0f.dp, 1f.dp), + color = Color.Black.copy(0.05f) + ) + }, + onDrawSurface = { drawRect(Color.White.copy(0.1f)) }, + contentEffects = { + blur(4f.dp.toPx()) + refraction(8f.dp.toPx(), 24f.dp.toPx()) + } + ) + .fillMaxWidth() + .padding(12f.dp), + horizontalArrangement = Arrangement.spacedBy(12f.dp), + verticalAlignment = Alignment.CenterVertically + ) { + Image( + painterResource(R.drawable.instagram_logo), + null, + Modifier.size(40f.dp) + ) + Column(verticalArrangement = Arrangement.spacedBy(2f.dp)) { + BasicText( + "Instagram", + style = TextStyle(Color.White, 15f.sp) + ) + BasicText( + "Kyant shared a photo.", + Modifier.graphicsLayer(blendMode = BlendMode.Plus), + style = TextStyle(Color.White.copy(0.5f), 15f.sp) + ) + } + } + } + } +} diff --git a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ScrollContainerContent.kt b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ScrollContainerContent.kt index 73f96bc..3ffa631 100644 --- a/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ScrollContainerContent.kt +++ b/catalog/src/main/java/com/kyant/backdrop/catalog/destinations/ScrollContainerContent.kt @@ -36,12 +36,13 @@ fun ScrollContainerContent() { Box( Modifier .drawBackdrop( - backdrop, - { ContinuousRoundedRectangle(32f.dp) } - ) { - vibrancy() - refraction(16f.dp.toPx(), 32f.dp.toPx()) - } + backdrop = backdrop, + shape = { ContinuousRoundedRectangle(32f.dp) }, + effects = { + vibrancy() + refraction(16f.dp.toPx(), 32f.dp.toPx()) + } + ) .height(160f.dp) .fillMaxWidth() ) diff --git a/catalog/src/main/res/drawable/flower.jpg b/catalog/src/main/res/drawable/flower.jpg new file mode 100644 index 0000000..5dc0238 Binary files /dev/null and b/catalog/src/main/res/drawable/flower.jpg differ diff --git a/catalog/src/main/res/drawable/instagram_logo.xml b/catalog/src/main/res/drawable/instagram_logo.xml new file mode 100644 index 0000000..d1ab54a --- /dev/null +++ b/catalog/src/main/res/drawable/instagram_logo.xml @@ -0,0 +1,39 @@ + + + + + + + + + + + + + + + + + + + + + +