Kotlin Arrangement.SpaceBetween has no affect

Question

I'm trying to have a Spacer between two columns, so I've added Arrangement.SpaceBetween, but nothing seems to be happening?

I want the first Column to be on the top, and the second Column to be pushed to the very bottom.

I'm not sure what to try, this is the code:

 BoxWithConstraints {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(rememberScrollState())
    ) {
        Column(
            verticalArrangement = Arrangement.SpaceBetween
        ) {
            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Top,
                modifier = Modifier.fillMaxSize().pointerInput(Unit) {
                    detectTapGestures(onTap = {
                        focusManager.clearFocus()
                    })
                }
            ) {
               ...
            }

            Column(
                horizontalAlignment = Alignment.CenterHorizontally,
                verticalArrangement = Arrangement.Bottom
            ) {
                ...
            }
        }
    }
}

I've also tried adding a "Spacer()" in the middle, and making the verticalArrangement = Arrangement.Top, but still not working.

Maybe try and add modifier = Modifier.fillMaxSize() to your first column? — Code Poet, Jul 27 '22 at 08:37

score 2 · Accepted Answer · answered Jul 27 '22 at 08:42

You have more issues:

remove the verticalScroll in the Box (Check this answer)
apply fillMaxSize() to the parent Column
change fillMaxSize() to fillMaxWidth() in the 1st Column

Something like:

Box(
    modifier = Modifier
        .fillMaxSize()
        //.verticalScroll(rememberScrollState())
) {
    Column(
        modifier = Modifier.fillMaxSize()
        verticalArrangement = Arrangement.SpaceBetween
    ) {
        Column(
            //modifier = Modifier.fillMaxSize()
            modifier = Modifier.fillMaxWidth()
        ) { }

        Column(
            modifier = Modifier.fillMaxWidth()
        ) { }
    }
}

score 0 · Answer 2 · answered Jul 27 '22 at 11:05

You can use weight sum attribute of modifier which helps you divide the screen in ratio.

 Column {
                    Column(
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Top,
                        modifier = Modifier
                            .fillMaxSize()
                            .weight(0.8f)
                            .pointerInput(Unit) {
                                detectTapGestures(onTap = {
                                    //focusManager.clearFocus()
                                })
                            }
                    ) {
    
                        Text(text = "Top text here")
                    }
    
                    Column(
                        modifier = Modifier.weight(0.2f),
                        horizontalAlignment = Alignment.CenterHorizontally,
                        verticalArrangement = Arrangement.Bottom
                    ) {
                        Text(text = "Bottom text here ")
    
                    }
                }

Kotlin Arrangement.SpaceBetween has no affect

2 Answers2