androidandroid-jetpack-composeandroid-compose-buttonandroid-jetpack-compose-button

How to align different elements inside a Button in Jetpack Compose?


I am trying to build the following component,

enter image description here

Following is my code,

Button(onClick = { /*TODO*/ }, modifier = Modifier.fillMaxWidth()) {
    Image(painter = painterResource(id = R.drawable.ic_check_circle) , contentDescription = "")
    Text(text = "John Doe", textAlign = TextAlign.Start)
    Image(painter = painterResource(id = R.drawable.ic_arrow_forward), contentDescription = "",
        alignment = Alignment.TopEnd)
}

Solution

  • You can use Spacer:

    1. Modifier.width(10.dp) will give you static size.

    2. Modifier.weight(1f)) will fill all available space.

    Button(onClick = { /*TODO*/ }, modifier = Modifier.fillMaxWidth()) {
        Image(painter = painterResource(id = R.drawable.ic_undo) , contentDescription = "")
        Spacer(modifier = Modifier.width(10.dp))
        Text(text = "John Doe")
        Spacer(modifier = Modifier.weight(1f))
        Image(painter = painterResource(id = R.drawable.ic_redo), contentDescription = "")
    }
    

    Result: