jetpack compose - Column align bottom

Compose Column Align Bottom

The Column is a jetpack compose layout widget. The Column layout places its elements in vertical sequences. By default, the Column lays out its elements from top to bottom.

The Column layout aligns its element from the top start. The following jetpack compose tutorial will demonstrate how we can align Column children widgets at the bottom position. That means we lay out Column elements from the bottom position to the top position.

We can set Column container size using its modifier argument. If we set the Column layout size to fill the maximum available size and we want to put a child element at the bottom of the Column container, then what should we do to achieve it?

The Column widget constructor has an argument named ‘verticalArrangement’. The ‘verticalArrangement’ argument data type is ‘Arrangement.Vertical’ and it is used to specify the vertical arrangement of the layout’s children. The default value for this argument is ‘Arrangement.Top’. So that, Column's default vertical alignment for its children elements is top. And horizontal alignment default value is ‘Start’. As a result Column default alignment is the top start.

Using this ‘verticalArrangement’ argument we can set the Column vertical alignment to the bottom. To do this we have to pass the value ‘Arrangement.Bottom’ for the ‘verticalArrangement’ argument. Finally, we get a Column layout whose children’s alignment is the bottom start.

This jetpack compose tutorial code is written in an android studio IDE. Copy the code and run it on an emulator device or a real device to test how we set Column layout elements alignment to the bottom. We also displayed a screenshot of this tutorial’s emulator screen.

MainActivity.kt


package com.cfsuman.jetpackcompose

import android.annotation.SuppressLint
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        setContent {
            GetScaffold()
        }
    }


    @SuppressLint("UnusedMaterialScaffoldPaddingParameter")
    @Composable
    fun GetScaffold(){
        Scaffold(
            topBar = {TopAppBar(
                title = {Text(
                    "Compose - Column Align Bottom",
                    color = Color.White)},
                backgroundColor = Color(0xFF58427C)) },
            content = {MainContent()},
            backgroundColor = Color(0xFFEDEAE0)
        )
    }


    @Composable
    fun MainContent(){
        Column(
            modifier = Modifier
                .padding(12.dp)
                .background(Color(0xFF004225))
                .fillMaxSize()
                .padding(8.dp),
            verticalArrangement = Arrangement.Bottom
        ) {
            Box(Modifier
                .clip(RoundedCornerShape(12.dp))
                .background(Color(0xFFED872D))
                .padding(12.dp)
            ){
                Text(
                    text = "Align Bottom Start",
                    style = MaterialTheme.typography.h6
                )
            }
        }
    }


    @Preview
    @Composable
    fun ComposablePreview(){
        //GetScaffold()
    }
}