> For the complete documentation index, see [llms.txt](https://kyant.gitbook.io/backdrop/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://kyant.gitbook.io/backdrop/tutorials/glass-bottom-sheet.md).

# Glass Bottom Sheet

Create a glass bottom sheet

## Goals

* Create a glass bottom sheet based on the code:

<pre class="language-kotlin"><code class="lang-kotlin">Box(Modifier.fillMaxSize()) {
    val backgroundColor = Color.White
    val backdrop = rememberLayerBackdrop {
        drawRect(backgroundColor)
        drawContent()
    }

    MainNavHost(
        modifier = Modifier.layerBackdrop(backdrop)
    )

<strong>    GlassBottomSheet(backdrop = backdrop)
</strong>}
</code></pre>

## What you will learn

* Handle the case of "glass on glass"
* Make use of `exportedBackdrop` parameter of the `drawBackdrop` modifier

## Steps

{% stepper %}
{% step %}

### Create a GlassBottomSheet

<pre class="language-kotlin" data-title="GlassBottomSheet.kt" data-line-numbers><code class="lang-kotlin">// your package

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.kyant.backdrop.Backdrop
import com.kyant.backdrop.drawBackdrop
import com.kyant.backdrop.effects.blur
import com.kyant.backdrop.effects.lens
import com.kyant.backdrop.effects.vibrancy

@Composable
<strong>fun BoxScope.GlassBottomSheet(backdrop: Backdrop) {
</strong>    Column(
        Modifier
            .safeContentPadding()
            .drawBackdrop(
<strong>                backdrop = backdrop,
</strong>                shape = { RoundedCornerShape(44f.dp) },
                effects = {
                    vibrancy()
                    blur(4f.dp.toPx())
                    lens(24f.dp.toPx(), 48f.dp.toPx(), true)
                },
                onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
            )
            .fillMaxWidth()
            .align(Alignment.BottomCenter)
    ) {
        Spacer(Modifier.height(256f.dp))
<strong>        // glass button
</strong>        Box(
            Modifier
                .padding(16f.dp)
                .drawBackdrop(
<strong>                    backdrop = backdrop,
</strong>                    shape = { CircleShape },
                    shadow = null,
                    effects = {
                        vibrancy()
                        blur(4f.dp.toPx())
                        lens(16f.dp.toPx(), 32f.dp.toPx())
                    },
                    onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
                )
                .height(56f.dp)
                .fillMaxWidth()
        )
    }
}
</code></pre>

<figure><img src="https://1718938796-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrt18MksRj8JDd4YEdiJ%2Fuploads%2Fbx9YHINoo4dqJz6AmHmC%2FScreenshot_20251024-220242_Catalog.png?alt=media&amp;token=713b448e-24c6-4c38-8a19-1e43009bedcb" alt=""><figcaption></figcaption></figure>

The backdrop for the glass button is `backdrop`, but we want to include the bottom sheet.
{% endstep %}

{% step %}

### Use the bottom sheet as a backdrop for the glass button (WRONG code)

The WRONG idea is to set a new LayerBackdrop after `drawBackdrop` .

<pre class="language-kotlin"><code class="lang-kotlin"><strong>val bottomSheetBackdrop = rememberLayerBackdrop()
</strong>Column(
    Modifier
<strong>        .layerBackdrop(bottomSheetBackdrop)
</strong>        .drawBackdrop()
) {
    // glass button
    Box(
        Modifier
            .drawBackdrop(
<strong>                backdrop = bottomSheetBackdrop,
</strong>            )
    )
}
</code></pre>

You will get a crash:

<mark style="color:$danger;">Fatal signal 11 (SIGSEGV), code 2 (SEGV\_ACCERR), fault addr 0x\_\_ in tid \_\_ (RenderThread), pid \_\_</mark>

Because the `layerBackdrop` modifier will draw the content to the `bottomSheetBackdrop`, and the content will draw the `bottomSheetBackdrop`, **it's a loop**!
{% endstep %}

{% step %}

### Use the bottom sheet as a backdrop for the glass button (CORRECT code)

Use `exportedBackdrop` in `drawBackdrop` modifier, **it will skip drawing the content**.

<pre class="language-kotlin"><code class="lang-kotlin"><strong>val bottomSheetBackdrop = rememberLayerBackdrop()
</strong>Column(
    Modifier
        .drawBackdrop(
            backdrop = backdrop,
<strong>            exportedBackdrop = bottomSheetBackdrop,
</strong>        )
) {
    // glass button
    Box(
        Modifier
            .drawBackdrop(
<strong>                backdrop = bottomSheetBackdrop,
</strong>            )
    )
}
</code></pre>

<figure><img src="https://1718938796-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FWrt18MksRj8JDd4YEdiJ%2Fuploads%2FgXXKqHx9AjLu85NSLZ5b%2FScreenshot_20251024-220452_Catalog.png?alt=media&amp;token=b4d6d77b-f5c1-49bb-b09e-a27011c7451e" alt=""><figcaption></figcaption></figure>
{% endstep %}
{% endstepper %}

## Final code

<details>

<summary>Final code</summary>

{% code title="GlassBottomSheet.kt" lineNumbers="true" %}

```kotlin
// your package

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.BoxScope
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.safeContentPadding
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import com.kyant.backdrop.Backdrop
import com.kyant.backdrop.backdrops.rememberLayerBackdrop
import com.kyant.backdrop.drawBackdrop
import com.kyant.backdrop.effects.blur
import com.kyant.backdrop.effects.lens
import com.kyant.backdrop.effects.vibrancy

@Composable
fun BoxScope.GlassBottomSheet(backdrop: Backdrop) {
    val bottomSheetBackdrop = rememberLayerBackdrop()
    Column(
        Modifier
            .safeContentPadding()
            .drawBackdrop(
                backdrop = backdrop,
                shape = { RoundedCornerShape(44f.dp) },
                effects = {
                    vibrancy()
                    blur(4f.dp.toPx())
                    lens(24f.dp.toPx(), 48f.dp.toPx(), true)
                },
                exportedBackdrop = bottomSheetBackdrop,
                onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
            )
            .fillMaxWidth()
            .align(Alignment.BottomCenter)
    ) {
        Spacer(Modifier.height(256f.dp))
        Box(
            Modifier
                .padding(16f.dp)
                .drawBackdrop(
                    backdrop = bottomSheetBackdrop,
                    shape = { CircleShape },
                    shadow = null,
                    effects = {
                        vibrancy()
                        blur(4f.dp.toPx())
                        lens(16f.dp.toPx(), 32f.dp.toPx())
                    },
                    onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
                )
                .height(56f.dp)
                .fillMaxWidth()
        )
    }
}
```

{% endcode %}

</details>


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://kyant.gitbook.io/backdrop/tutorials/glass-bottom-sheet.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.