I have the above UI Screen. In that layout the "Trash" icon should be aligned Vertically_centered , as of now its not Vertical Centered. How to achieve this in Jetpack compose without using Padding. Please find my code below in which I'm using a column with 2 rows in it.:
@Composable
fun DisplayShelfInfo(shelfHistoryItem: ShelfHistoryItem){
Column(modifier = Modifier
.fillMaxWidth()
.height(60.dp)
.padding(top = 5.dp , bottom = 5.dp)
.background(color = colorResource(R.color.row_back_ground)),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally) {
Row(modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()){
Text(
text = stringResource(R.string.shelf_nr), color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Text(
text = (shelfHistoryItem.shelfId).toString(), color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Spacer(Modifier.weight(1f))
Image(
painter = painterResource(id = R.drawable.ic_delete),
modifier = Modifier
.padding(end = 5.dp)
.align(Alignment.CenterVertically)
.clickable {},
contentDescription = "Delete Image"
)
}
Row(modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()){
Text(
text = shelfHistoryItem.noOfArticles.toString(), color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Text(
text = stringResource(R.string.article_count_label), color = Color.Black,
)
}
}
}
Move the Image out of Row
, and use 2 Column
s.
Something like:
Row(
modifier = Modifier
.height(IntrinsicSize.Min) //important
.background(Red),
) {
Column(
modifier = Modifier
.weight(1f)
.padding(top = 5.dp, bottom = 5.dp),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
Text(
text = "shelf_nr",
color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Text(
text = "shelfId", color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Spacer(Modifier.weight(1f))
}
Row(
modifier = Modifier
.fillMaxWidth()
.wrapContentHeight()
) {
Text(
text = "shelfHistoryItem", color = Color.Black,
modifier = Modifier.padding(start = 16.dp)
)
Text(
text = "article_count_label", color = Color.Black,
)
}
}
Column(
modifier = Modifier.fillMaxHeight(), //important
verticalArrangement = Arrangement.Center,
) {
Image(
painter = painterResource(id = R.drawable.ic_menu_camera),
modifier = Modifier
.padding(end = 5.dp)
.clickable {},
contentDescription = "Delete Image"
)
}
}