Glass Bottom Bar

Create a glass bottom bar

Goals

• Create a glass bottom bar over the MainNavHost.

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

Here is what MainNavHost looks like:

What you will learn

• Create and draw backdrops

• Apply effects to the backdrops

• Handle the background drawing correctly

• Ensure the readability

Steps

1

Draw backdrop and add lens effect

Box(Modifier.fillMaxSize()) {
    val backdrop = rememberLayerBackdrop()

    MainNavHost(
        modifier = Modifier.layerBackdrop(backdrop)
    )

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

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.

2

Draw the background to the backdrop (optional)

val backgroundColor = Color.White
val backdrop = rememberLayerBackdrop {
    drawRect(backgroundColor)
    drawContent()
}

Nice work!

Try to adjust the lens effect and observe what will happen.

3

Add blur effect

Modifier.drawBackdrop(
    backdrop = backdrop,
    shape = { CircleShape },
    effects = {
        vibrancy()
        blur(4f.dp.toPx())
        lens(16f.dp.toPx(), 32f.dp.toPx())
    }
)

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

4

Add surface for readability

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

The readability has increased. You must balance between beauty and readability.

5

Final code

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

Exercise: Add a tinted glass icon button

Final code

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 = {
                        val tint = Color(0xFF0088FF)
                        drawRect(tint, blendMode = BlendMode.Hue)
                        drawRect(tint.copy(alpha = 0.75f))
                    }
                )
                .aspectRatio(1f)
        )
    }
}

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