Align a composable view to right side inside a Row Composable like alignParentRight

Question

I'm building a custom composable function view inside which I used Row composable, however I want to align the right icon to right end of the Row(align to the end of the parent)

below is my code:

    Row(modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .padding(vertical = Spacing30),
    verticalAlignment = Alignment.CenterVertically) {
    
    Icon(modifier = Modifier.padding(vertical = 14.dp), painter = painterResource(id = R.drawable.ic_wallet),
         contentDescription
         = "limit_type")
        
    Text(text = "₹10,000", style = Typography.TitleSecondary.copy(color = ContentPrimary))
   
    Icon(painter = painterResource(id = R.drawable.ic_chevron_right),
         contentDescription
         = "chevron_right")
}

In Constrained layout I could have used ConstrainedEndToEndOf = parent In RelativeLayout I could have used alignParentRight = true

However, I want to use Row composable only, since there are more complex composable inside it.

I have used Box composable earlier in which it is very straight forward with the modifier, as explained in the linked answer, however with the Row and Column(align to bottom) it seems to be difficult.

score 2 · Accepted Answer · answered Jun 21 '22 at 12:39

I was able to solve it by using the Spacer with weight modifier.

Spacer(modifier = Modifier.weight(1f))

By adding a Spacer with weight 1f just before the view that I want to align to the end solved my problem below is my code.

    Row(modifier = Modifier
        .fillMaxWidth()
        .wrapContentHeight()
        .padding(vertical = Spacing30),
    verticalAlignment = Alignment.CenterVertically) {
    
    Icon(modifier = Modifier.padding(vertical = 14.dp), painter = painterResource(id = R.drawable.ic_wallet),
         contentDescription
         = "limit_type")

        Text(text = "₹10,000", style = Typography.TitleSecondary.copy(color = ContentPrimary))

    Spacer(modifier = Modifier.weight(1f))
    
    Icon(painter = painterResource(id = R.drawable.ic_chevron_right),
         contentDescription
         = "chevron_right")
}

The good part is this works for both the Row and Column, if in the Column we want to align a view to the bottom we can simply add Spacer(modifier = Modifier.weight(1f)) just before the view that we want to align to the bottom or to the right(in case of Row composable)

Align a composable view to right side inside a Row Composable like alignParentRight

1 Answers1