CODEWITHSUNDEEP
androidkotlinandroid-jetpack-compose
HAXM
HAXM

Reputation: 3918

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

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.

Upvotes: 2

Views: 502

Answers (1)

HAXM
HAXM

Reputation: 3918

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)

Upvotes: 4

Related Questions