androidandroid-jetpack-composeandroid-buttonandroid-jetpack-compose-layout

Draw two buttons in a Row using Jetpack Compose


I want to have two buttons in a Row, just as in the picture, but in my code I set a specific horizontalArrangment and it wouldn't look good on other devices

Row(
        horizontalArrangement = Arrangement.spacedBy(170.dp),
        modifier = Modifier.fillMaxWidth()
    ) {
        Button(
            onClick = { /*TODO*/ },
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text = "Send Email",
                style = TextStyle(fontSize = 15.sp)
            )
        }
        Button(
            onClick = { /*TODO*/ },
        ) {
            Text(
                modifier = Modifier.padding(8.dp),
                text = "Call",
                style = TextStyle(fontSize = 15.sp)
            )
        }
    }

enter image description here


Solution

  • You can use horizontalArrangement = Arrangement.SpaceBetween:

    Something like:

     Row(
            horizontalArrangement = Arrangement.SpaceBetween,
            modifier = Modifier.fillMaxWidth().padding(8.dp)
        ) {
            Button( onClick = { /*TODO*/ }){
                Text(
                    text = "Send Email",
                    style = TextStyle(fontSize = 15.sp)
                )
            }
            Button( onClick = { /*TODO*/ }) {
                Text(
                    text = "Call",
                    style = TextStyle(fontSize = 15.sp)
                )
            }
        }
    

    ![enter image description here