My views are overlapping one another in jetpack compose

Question

I am very new to jetpack compose please help, I have use Surface() but my views are overlapping one another, I want separate view as first one should be TopHeader() and another one should be BillForm

My code is:-

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApp {
                //TopHeader()
                MainContent()
            }
        }
    }
}

@Composable
fun MyApp(content: @Composable () -> Unit) {

    JetTipAppTheme {
        // A surface container using the 'background' color from the theme
        Surface(color = MaterialTheme.colors.background) {
            content()
        }

    }

}

TopHeader function to display the pink color view in the given image

@Composable
fun TopHeader(totalPerPerson: Double = 134.0) {

    Surface(
        modifier = Modifier
            .fillMaxWidth()
            .padding(15.dp)
            .height(150.dp)
            .clip(shape = CircleShape.copy(all = CornerSize(12.dp))),
            //.clip(shape = RoundedCornerShape(corner = CornerSize(12.dp))),
        color = Color(0xFFE9D7F7)
    ) {

        Column(
            modifier = Modifier.padding(12.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.Center
        ) {

            val total = "%.2f".format(totalPerPerson)
            Text(
                text = "Total per person",
                style = MaterialTheme.typography.h5
            )
            Text(
                text = "$$total",
                style = MaterialTheme.typography.h4,
                fontWeight = FontWeight.ExtraBold
            )

        }

    }

}

This is MainContent function:-

@Composable
fun MainContent() {

    BillForm(){ billAmt ->
        Log.d("AMT","MainContent: $billAmt")

    }


}

BillForm composable function

@Composable
fun BillForm(modifier: Modifier = Modifier,
            onValChange: (String) -> Unit = {}
             ){

    val totalBillState = remember{
        mutableStateOf("")
    }

    val validState = remember(totalBillState.value) {

        totalBillState.value.trim().isNotEmpty()

    }

    val keyboardController = LocalSoftwareKeyboardController.current

    val sliderPositionState = remember {
        mutableStateOf(0f) //slider will take position from zero
    }

    TopHeader()

    
    Surface(
        modifier = Modifier
            .padding(2.dp)
            .fillMaxWidth(),
        shape = RoundedCornerShape(corner = CornerSize(8.dp)),
        border = BorderStroke(width = 1.dp, color = Color.LightGray)
    ) {
        Column(

            modifier = Modifier.padding(6.dp),
            verticalArrangement = Arrangement.Top,
            horizontalAlignment = Alignment.Start

        ) {
            InputField(
                valueState = totalBillState,
                labelId = "Enter Bill",
                enabled = true,
                isSingleLined = true,
                onAction = KeyboardActions{

                    if (!validState)return@KeyboardActions

                    onValChange(totalBillState.value.trim())

                    keyboardController?.hide()

                }
            )

            //if(validState){

                Row(
                    modifier = Modifier.padding(3.dp),
                    horizontalArrangement = Arrangement.Start

                ) {

                    Text(text = "Split",
                        modifier = Modifier.align(
                            alignment = Alignment.CenterVertically
                        ))

                    //Spacer in between text and buttons
                    Spacer(modifier = Modifier.width(120.dp))

                    //Row for Buttons
                    Row(modifier = Modifier.padding(horizontal = 3.dp),
                        horizontalArrangement = Arrangement.End
                        ) {

                        RoundIconButton( imageVector = Icons.Default.Remove,
                            onClick = {  })

                        Text(text = "2",
                            modifier = Modifier
                                .align(Alignment.CenterVertically)
                                .padding(start = 9.dp, end = 9.dp)
                            )

                        RoundIconButton( imageVector = Icons.Default.Add,
                            onClick = {  })

                    }

                }

            //Tip Row
            Row(modifier = Modifier
                .padding(horizontal = 3.dp, vertical = 12.dp)
            ) {
              Text(text = "Tip",
                  modifier = Modifier.align(alignment = Alignment.CenterVertically))

                Spacer(modifier = Modifier.width(200.dp))

                Text(text = "$33.00",
                modifier = Modifier.align(alignment = Alignment.CenterVertically))
            }


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

                Text(text = "33%")

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

                //Slider
                Slider(value = sliderPositionState.value,
                    onValueChange = { newVal ->
                        sliderPositionState.value = newVal  //<- this will change the position of the slider
                        Log.d("Slider","BillForm: $newVal")
                    },
                        modifier = Modifier.padding(start = 16.dp, end = 16.dp),
                        steps = 5,
                        onValueChangeFinished = {

                        }
                    )

            }


//            }else{
//                Box() {
//
//                }
//            }

        }
    }
}

TopHeader composable view:-

BillForm view:-

What I want is like this given image:-

Answer 1

Use a Column(){} Composable for that purpose.

You can follow these basics that can help you to organize your composables and understand how its work.