Place an Image Vertically Centered in Jetpack compose

Question

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,

        )
    }
}

}

score 1 · Accepted Answer · answered Jan 28 '23 at 22:17

Move the Image out of Row, and use 2 Columns.
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"
        )
    }
}

Place an Image Vertically Centered in Jetpack compose

1 Answers1