How to Snap the Row/Column elements to end in JetPack Compose - android-jetpack-compose

Question

I am using the below code to show the textviews, image and a textfield to show at each corners after the image (start and end). It is basically a Card with Image on the start and later a column with a two text views and with another column with a textview and basictextfield for input.
#Composable
fun BaseCard() {
Card(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight(Alignment.CenterVertically, true)
.wrapContentHeight()
.clip(RoundedCornerShape(8.dp)),
elevation = 10.dp,
backgroundColor = Color.White
) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(8.dp),
verticalAlignment = Alignment.CenterVertically
)
{
Image(
modifier = Modifier
.size(35.dp, 35.dp) //50dp
.clip(RoundedCornerShape(8.dp))
.clickable {
navController.navigate("meta") {
launchSingleTop = true
}
},
painter = img,
alignment = Alignment.Center,
contentDescription = "",
contentScale = ContentScale.Crop,
)
Spacer(modifier = Modifier.width(8.dp))
Column(horizontalAlignment = Alignment.Start) {
Text(
text = "US Dollar" + "($)",
color = Color.Gray,
style = Typography.subtitle2
)
Text(
text = "USD",
Modifier.padding(0.dp),
color = MaterialTheme.colors.onPrimary,
style = Typography.h5,
)
}
Spacer(modifier = Modifier.width(8.dp))
Column(horizontalAlignment = Alignment.End) {
Text(
text = "Amount",
color = Color.Gray,
style = Typography.subtitle2
)
BasicTextField(
value = typedValue,
onValueChange = {
----
},
textStyle = LocalTextStyle.current.copy(
fontFamily = NunitoFontFamily,
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
fontSize = 24.sp,
textAlign = TextAlign.End
),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Done
)
)
}
}
}
}
However, it is showing up as below.
How to remove the extra space and align the elements properly at each end?

Answer 1

There are multiple ways to implement what you ask
One is using Spacer(modifier=Modifier.weight(1f) instead of
Spacer(modifier = Modifier.width(8.dp))
for the Spacer here, since it's inside a Row it will take all the space that don't have weight modifier.
// Change this Spacer's modifier to Modifier.weight(1f)
Spacer(modifier = Modifier.width(8.dp))
Column(horizontalAlignment = Alignment.End) {
Text(
text = "Amount",
color = Color.Gray,
style = Typography.subtitle2
)
BasicTextField(
value = typedValue,
onValueChange = {
----
},
textStyle = LocalTextStyle.current.copy(
fontFamily = NunitoFontFamily,
fontWeight = FontWeight.W600,
letterSpacing = 0.sp,
fontSize = 24.sp,
textAlign = TextAlign.End
),
keyboardOptions = KeyboardOptions(
keyboardType = KeyboardType.Number,
imeAction = ImeAction.Done
)
)
}
Second one is to use a Box instead of Row and have 2 composables one aligned to
Box(modifier = Modifier
.fillMaxWidth()
.padding(8.dp)) {
Column(modifier = Modifier.align(Alignment.CenterStart)) {
}
Column(modifier = Modifier.align(Alignment.CenterEnd)) {
}
}