How to prevent a button from taking all the space and align it in a layout

Question

I want to use "Composable" and make four buttons.

This is the code.

package com.example.captaingame

import android.annotation.SuppressLint
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.Button
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.example.captaingame.ui.theme.CaptainGameTheme
import kotlin.random.Random

class MainActivity : ComponentActivity() {
    @SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            CaptainGameTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    CaptainGame()
                }
                }
            }
        }
    }

    @Composable
    fun CaptainGame() {
        val treasuresFound = remember { mutableStateOf(0) }
        val direction = remember { mutableStateOf("North") }

        Column {
            Text("Treasures Found: ${treasuresFound.value}")
            Text("Current Direction: ${direction.value}")

            Button(onClick = {
                direction.value = "East"
                if (Random.nextBoolean()) {
                    treasuresFound.value++
                }
            }) {
                Text("Sail East")
            }
        }

        Button(onClick = {
            direction.value = "West"
            if (Random.nextBoolean()) {
                treasuresFound.value++
            }
        }) {
            Text("Sail West")
        }

        Button(onClick = {
            direction.value = "North"
            if (Random.nextBoolean()) {
                treasuresFound.value++
            }
        }) {
            Text("Sail NOrth")
        }

        Button(onClick = {
            direction.value = "South"
            if(Random.nextBoolean()){
                treasuresFound.value++
            }
        }){
            Text("Sail South")
        }
    }


@Preview(showBackground = true)
@Composable
fun CaptainGamePreview() {
    CaptainGameTheme {
        CaptainGame()
    }
}

However, I get this result:

Why is this happening, and how do I make the button align correctly?

Answer 1

The main issue was that some buttons in your code were placed outside the Column layout, which caused alignment issues. In Jetpack Compose, components like buttons, text, etc., need to be inside a layout container (Column, Row, etc.) to properly align and position them.

Here I fixed it, use this code -

@Composable
fun CaptainGame() {
    val treasuresFound = remember { mutableStateOf(0) }
    val direction = remember { mutableStateOf("North") }

    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp),
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Treasures Found: ${treasuresFound.value}")
        Text("Current Direction: ${direction.value}")

        Spacer(modifier = Modifier.height(16.dp))

        Column(
            modifier = Modifier.fillMaxWidth(),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                direction.value = "East"
                if (Random.nextBoolean()) {
                    treasuresFound.value++
                }
            }) {
                Text("Sail East")
            }

            Spacer(modifier = Modifier.height(8.dp))

            Button(onClick = {
                direction.value = "West"
                if (Random.nextBoolean()) {
                    treasuresFound.value++
                }
            }) {
                Text("Sail West")
            }

            Spacer(modifier = Modifier.height(8.dp))

            Button(onClick = {
                direction.value = "North"
                if (Random.nextBoolean()) {
                    treasuresFound.value++
                }
            }) {
                Text("Sail North")
            }

            Spacer(modifier = Modifier.height(8.dp))

            Button(onClick = {
                direction.value = "South"
                if (Random.nextBoolean()) {
                    treasuresFound.value++
                }
            }) {
                Text("Sail South")
            }
        }
    }
}

I also added some spacing for beautification. Here is the preview -