15

I'm new in jetpack compose and I'm trying to do a simple thing that I can't achieve it.

That I want to do is in the same row align one component, in this case a surface, at the start and the other one, the column, at the end of the row.

How can get this?

I'm trying this but it doesn't work:

Row(Modifier.padding(top = 24.dp)
        .fillMaxWidth()) {
        Surface(
            modifier = Modifier.size(70.dp),
            shape = RectangleShape,
            color = MaterialTheme.colors.onSurface.copy(alpha = 0.2f)
        ) {
            // Image goes here
        }

        Column(modifier = Modifier.size(70.dp)) {
            Text("Total",
                fontSize = 12.sp,
                color = AppGreyDark,
                modifier = Modifier.padding(end = 16.dp))

            Text("12,99 €",
                fontSize = 18.sp,
                color = AppBlackDark,
                modifier = Modifier.padding(top = 4.dp))
        }
    }
Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
S.P.
  • 2,274
  • 4
  • 26
  • 57

1 Answers1

18

You can apply in the Row the Arrangement.SpaceBetween.

Row(
    modifier = Modifier
      .padding(top = 24.dp)
      .fillMaxWidth(),
    horizontalArrangement  =  Arrangement.SpaceBetween) {
       Surface()
       Column()
}

enter image description here

Gabriele Mariotti
  • 320,139
  • 94
  • 887
  • 841
  • 2
    Won't work if the surface is wide enough to reach and overflow the column. – TheLibrarian Jun 01 '22 at 11:32
  • if I keep `Surface` gone, `Column` is coming to start place. how can I make `Column` not move from `End` alignment – Mohd Qasim Nov 02 '22 at 10:08
  • 1
    what if surface width is too big? (for example it's Text instead of Surface and has long text), how to align it before Column without using Constraints? – user924 Dec 12 '22 at 12:21