Sticky Footer in Jetpack Compose – No Box Needed!

Introduction

Welcome back! Today, we are diving into Jetpack Compose and tackling an interesting challenge – creating a sticky footer for your LazyColumn.

Watch the Video Tutorial

If you prefer a step-by-step walkthrough, watch the video tutorial below:

Why No Sticky Footer API?

Jetpack Compose doesn’t have a dedicated API for sticky footers, but don’t worry! We’ll show you how to build it without using a Box. In Compose, you have a LazyColumn with a useful sticky header feature, but there’s no built-in solution for a sticky footer.

Sticky Footer Challenge in Jetpack Compose

If you’ve been wondering how to implement a sticky footer, we’ve got you covered. Instead of relying on Box, we’ll take a different approach.

Alternative Approach Without Box

To achieve this, we place the footer directly within the layout hierarchy instead of wrapping everything in a Box. We’ll structure our LazyColumn and footer separately but still align the footer at the bottom of the screen.

Compose Modifiers

Here’s our plan:

• Use a Column as the root composable.
• Place the LazyColumn inside it.
• Add a separate footer component.
• Ensure it stays at the bottom using modifiers.

Adding Footer

Now, let’s modify our layout to add a footer inside the Column.

Column {
    LazyColumn(
        modifier = Modifier.weight(1f)
    ) {
        items(50) { index ->
            Text("Item $index")
        }
    }
    Footer()
}
        

Weight Modifier

Notice the Modifier.weight(1f) on the LazyColumn. This ensures the list takes up all available space, pushing the footer to the bottom.

Working Sticky Footer

With this setup, we have achieved a working sticky footer. The list scrolls while the footer stays fixed at the bottom.

Recap

Instead of using Box, we:

• Used a Column composable.
• Gave the LazyColumn a weight(1f) modifier.
• Placed the footer outside the scrolling area.

This ensures a clean layout without unnecessary nesting.

Thanks for tuning! Until next time, happy coding!