Jetpack Compose horizontal alignment issue

Question

I need the image and text view to be positioned to the start of the card, with the columns children aligned center horizontally, however as you can see from the photo the column is somehow being stretched the width of the screen which is putting the image and text views in the center. Can anyone see any issues with my code on this?

@Composable
fun TrainerCard(profile: TrainerProfile) {
Card(modifier = Modifier
    .height(180.dp)
    .fillMaxWidth()
    .padding(4.dp)) {
    Column(modifier = Modifier
        .fillMaxHeight()
        .width(120.dp)
        .border(1.dp, color = Color.Red),
        horizontalAlignment = Alignment.CenterHorizontally) {
        Image(
            modifier = Modifier
                .size(120.dp)
                .padding(top = 4.dp, start = 4.dp),
            painter = painterResource(R.drawable.pokepals_logo),
            contentDescription = null
        )
        Text(
            text = profile.trainerName,
            style = MaterialTheme.typography.subtitle1)
        }
    }
}

user_2016562 · Answer

In your Column add the wrapContentWidth(Alignment.Start) modifier:

    Column(modifier = Modifier
        .fillMaxHeight()
        .width(120.dp)
        .wrapContentWidth(Alignment.Start)
        .border(1.dp, color = Color.Red),
        horizontalAlignment = Alignment.CenterHorizontally
        )

Jetpack Compose horizontal alignment issue

1 Answers