androidkotlinandroid-jetpack-composeandroid-jetpack-compose-layout

Place an Image Vertically Centered in Jetpack compose


enter image description here

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,

        )
    }
}

}


Solution

  • 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"
            )
        }
    }
    

    enter image description here