> 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-bar.md).

# Glass Bottom Bar

<figure><img src="/files/7W54zv2WPF9X3KSF67EI" alt=""><figcaption></figcaption></figure>

## Goals

* Create a glass bottom bar over the `MainNavHost`.

```kotlin
Box(Modifier.fillMaxSize()) {
    MainNavHost()
}
```

Here is what `MainNavHost` looks like:

<figure><img src="/files/nkHJvLShubP62IHvQGkD" alt="" width="188"><figcaption></figcaption></figure>

## What you will learn

* Create and draw backdrops
* Apply effects to the backdrops
* Handle the background drawing correctly
* Ensure the readability

## Steps

{% stepper %}
{% step %}

### Draw backdrop and add lens effect

<pre class="language-kotlin"><code class="lang-kotlin">Box(Modifier.fillMaxSize()) {
<strong>    val backdrop = rememberLayerBackdrop()
</strong>
    MainNavHost(
<strong>        modifier = Modifier.layerBackdrop(backdrop)
</strong>    )

    Box(
        Modifier
            .safeContentPadding()
<strong>            .drawBackdrop(
</strong>                backdrop = backdrop,
                shape = { CircleShape },
                effects = {
<strong>                    lens(16f.dp.toPx(), 32f.dp.toPx())
</strong>                }
            )
            .height(64f.dp)
            .fillMaxWidth()
            .align(Alignment.BottomCenter)
    )
}
</code></pre>

<figure><img src="/files/UGLnKwQ2neBUHMGBU3s4" alt=""><figcaption></figcaption></figure>

Noooo! The effect is wrong! There are transparent pixels in the bottom bar. Because we only draw the `MainNavHost` , **the background outside of** `MainNavHost` **should be drawn too**.
{% endstep %}

{% step %}

### Draw the background to the backdrop (optional)

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

<figure><img src="/files/lWGFl1i3JRDMlIn7JlV2" alt=""><figcaption></figcaption></figure>

Nice work!

Try to adjust the lens effect and observe what will happen.
{% endstep %}

{% step %}

### Add blur effect

<pre class="language-kotlin"><code class="lang-kotlin">Modifier.drawBackdrop(
    backdrop = backdrop,
    shape = { CircleShape },
    effects = {
<strong>        vibrancy()
</strong><strong>        blur(4f.dp.toPx())
</strong>        lens(16f.dp.toPx(), 32f.dp.toPx())
    }
)
</code></pre>

The use of `vibrancy()` enhances the saturation, giving us more visual impact.

<figure><img src="/files/PWSVuN4psvs4cdOPppM9" alt=""><figcaption></figcaption></figure>
{% endstep %}

{% step %}

### Add surface for readability

<pre class="language-kotlin"><code class="lang-kotlin">Modifier.drawBackdrop(
    backdrop = backdrop,
    shape = { CircleShape },
    effects = {
        vibrancy()
        blur(4f.dp.toPx())
        lens(16f.dp.toPx(), 32f.dp.toPx())
    },
<strong>    onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
</strong>)
</code></pre>

<figure><img src="/files/gyUD79E89inuFhciApk7" alt=""><figcaption></figcaption></figure>

The readability has increased. **You must balance between beauty and readability.**
{% endstep %}

{% step %}

### Final code

```kotlin
Box(Modifier.fillMaxSize()) {
    val backgroundColor = Color.White
    val backdrop = rememberLayerBackdrop {
        drawRect(backgroundColor)
        drawContent()
    }

    MainNavHost(
        modifier = Modifier.layerBackdrop(backdrop)
    )

    Box(
        Modifier
            .safeContentPadding()
            .drawBackdrop(
                backdrop = backdrop,
                shape = { CircleShape },
                effects = {
                    vibrancy()
                    blur(4f.dp.toPx())
                    lens(16f.dp.toPx(), 32f.dp.toPx())
                },
                onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
            )
            .height(64f.dp)
            .fillMaxWidth()
            .align(Alignment.BottomCenter)
    )
}
```

{% endstep %}
{% endstepper %}

## Exercise: Add a tinted glass icon button

<figure><img src="/files/zwifNpyvNtHzpp9n3Wau" alt=""><figcaption></figcaption></figure>

<details>

<summary>Final code</summary>

<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)
    )

    Row(
        Modifier
            .safeContentPadding()
            .height(64f.dp)
            .fillMaxWidth()
            .align(Alignment.BottomCenter),
        horizontalArrangement = Arrangement.spacedBy(8f.dp),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            Modifier
                .drawBackdrop(
                    backdrop = backdrop,
                    shape = { CircleShape },
                    effects = {
                        vibrancy()
                        blur(4f.dp.toPx())
                        lens(16f.dp.toPx(), 32f.dp.toPx())
                    },
                    onDrawSurface = { drawRect(Color.White.copy(alpha = 0.5f)) }
                )
                .fillMaxHeight()
                .weight(1f)
        )
        Box(
            Modifier
                .drawBackdrop(
                    backdrop = backdrop,
                    shape = { CircleShape },
                    effects = {
                        vibrancy()
                        blur(4f.dp.toPx())
                        lens(16f.dp.toPx(), 32f.dp.toPx())
                    },
                    onDrawSurface = {
<strong>                        val tint = Color(0xFF0088FF)
</strong><strong>                        drawRect(tint, blendMode = BlendMode.Hue)
</strong><strong>                        drawRect(tint.copy(alpha = 0.75f))
</strong>                    }
                )
                .aspectRatio(1f)
        )
    }
}
</code></pre>

</details>

It is recommended to use `BlendMode.Hue` , so that the hue of backdrop will adapt to the tint color.


---

# 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:

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

The question should be specific, self-contained, and written in natural language.
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.