haze-patterns

What problem does it solve?

This Skill provides expert guidance on implementing various UI patterns with the Haze library in Kotlin, including blurring effects, overlapping elements, and dialog management.

Core Features & Use Cases

• Scaffold Blur: Implement blur effects on Scaffold components, such as top and bottom bars.
• Dialog Blur: Apply blur to dialog backgrounds and overlay content.
• Sticky Headers: Utilize sticky headers in LazyColumns for improved navigation.
• Overlapping Cards: Create overlapping blurred cards with defined z-index levels.
• Filtering Source Areas: Exclude specific layers from blur effects.
• Deep Hierarchy Composition: Share blur states across nested composables efficiently.
• Integrated Source and Effect: Apply source and effect on the same layout node.
• Split-Window Position Strategy: Correctly align blur effects in split-screen modes.
• Quick Start: Learn how to implement each pattern step-by-step.

Quick Start

To implement a dialog blur, start with the following code snippet in your Kotlin project:

val hazeState = rememberHazeState()
var showDialog by remember { mutableStateOf(false) }

// ... your existing content ...

if (showDialog) {
    Dialog(onDismissRequest = { showDialog = false }) {
        Surface(
            modifier = Modifier.fillMaxWidth().fillMaxHeight(0.5f),
            shape = MaterialTheme.shapes.extraLarge,
            color = MaterialTheme.colorScheme.surface.copy(alpha = 0.2f),
        ) {
            Box(Modifier.hazeEffect(state = hazeState) {
                blurEffect { style = HazeMaterials.regular() }
            }) {
                // Your dialog content here
            }
        }
    }
}