how to align button bottom center in jetpack compose? – Android

The Problem:

Align button bottom center in Jetpack Compose

I have a Column with multiple components, including a custom button (DYTLoginAndContinueButton) at the bottom. I want to align this button to the bottom center of the screen, regardless of screen size.

Previously, I tried various approaches but encountered issues with alignment on different screen sizes. On large screens, the button was not centered, and on small screens, it was positioned at the very end.

Here’s my current code:

(Code Snippet)

Can you provide a solution to align the button to the bottom center of the screen on both small and large screens using Jetpack Compose?

The Solutions:

Solution 1: Move Button Out of Column

To align the button at the bottom center, move it outside the vertically scrolling `Column`. Then, apply a `weight` modifier to the `Column` to push it up and make space for the button.

Column(
    Modifier.fillMaxHeight(),
    verticalArrangement = Arrangement.SpaceBetween
) {

    Column(
        modifier = Modifier
            .verticalScroll(rememberScrollState())
            .weight(1f, false)
    ) {
        //...
    }

    Button(
        onClick = {},
        modifier = Modifier
            .padding(vertical = 2.dp)
            .fillMaxWidth()
    ) {
        Text("Button")
    }
}

This will ensure that the button is always aligned at the bottom center, regardless of screen size.

Solution 2: Using Box and Alignment

This solution employs a Box layout to align the button at the bottom center of the screen. Inside the Box, two nested elements are placed: a scrollable Column containing the main content and a fixed DYTLoginAndContinueButton. Here’s how it works:

1. The Box layout takes up the entire screen size.
2. The Column element is placed at the top of the Box using the .align(Alignment.TopCenter) modifier. This ensures that the Column is aligned vertically to the top of the Box while still occupying the maximum width.
3. The DYTLoginAndContinueButton is positioned at the bottom center of the Box using .align(Alignment.BottomCenter). This alignment ensures that the button remains fixed at the bottom center regardless of the Column’s content.
4. By setting the Box’s modifier to .fillMaxSize(), both the Column and the button occupy the entire available space within the Box.

This solution ensures that the DYTLoginAndContinueButton remains visible and aligned at the bottom center, regardless of the screen size or the amount of content in the Column.

Video Explanation:

The following video, titled "Ep1 : JetPack Compose - Align Children inside rows and columns ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

In this Episode of jetpack compose, we are going to talk about some fundamental properties of aligning items inside rows and columns.