[FIXED] How do I split the screen into two areas, while having a form in the center?

Issue

I've been trying to achieve the below design for a couple of hours now but can't figure out the best way to approach this problem with Jetpack Compose, and I can't find a solid doc describing Compose's layout approach/guidelines.

I tried a bunch of things including the following nesting, but no luck:

Container
 Row - green background, align Top
 Row - white background, align Buttom
 Container (Form) - align Center

How can I achieve this design?

Thanks!

Solution

I think Stack Layout will help you. Like this

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

@Preview
@Composable
fun MainContainer() {
    Stack {

        Align(Alignment.TopCenter) {
            Column(arrangement = Arrangement.Center) {
                Container(
                    background(Color.Green),
                    alignment = Alignment.TopCenter,
                    //height = 350.dp,
                    width = 450.dp,
                    expanded = true
                ) {
                    Text("Up")
                }
            }
        }

        Align(alignment = Alignment.BottomCenter) {
            Column(background(Color.Yellow), arrangement = Arrangement.Center) {
                Container(alignment = Alignment.Center, height = 350.dp, width = 450.dp) {
                    Text("Down")
                }
            }
        }

        Align(Alignment.Center) {
            Column(background(Color.White), arrangement = Arrangement.Center) {
                Container(alignment = Alignment.Center, height = 250.dp, width = 250.dp) {
                    Clip(shape = RoundedCornerShape(8.dp)) {
                        LoginContainer()
                    }
                }
            }
        }
    }
}

@Composable
fun LoginContainer() {
    Column {
        Text("Username")
        Text("Password")
        Button("Login")
    }
}

Answered By - Thaw De Zin
Answer Checked By - Dawn Plyler (JavaFixing Volunteer)