Why do my composes overlap eachother and how can I stop this? (Jetpack Compose App in Android Studio)

Question

I have this Jetpack Compose App and I have 2 main composes, each having their own elements and one overlaps another. Can someone help me putting them in order from top to down?

-> mainGame compose overlaps the header compose[enter image description here] [[[enter image description here](https://i.sstatic.net/75qLS.png)](https://i.sstatic.net/Jefvn.png)](https://i.sstatic.net/C8JgM.png)(https://i.sstatic.net/Bx2vV.png)

I tried to do a random generator app and the higher number wins

Answer 1

If I understand it correctly, you wish to have your header on top with your mainGame below it.

You seem to be placing your elements in your preview directly into mainContent. Try placing a Column first (with its size set to max) and then placing your content inside of it. This will automatically stack them vertically.

In practice:

@Preview(showBackground = true)
@Composable
fun GreetingPreview(){
    BarbutAppTheme{
        mainContent{
            Column(modifier = Modifer.fillMaxSize()){
                header()
                mainGame()
            }
        }
    }
}

If you wish them otherwise, you can check this introduction from Android Developers.