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

Question

I am trying to build the following component,

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)
}

Answer 1

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: