How to centrally align Icon to first line of a Text component in Compose?-CodePudding

I have already built most of the component below but I am stuck on a detail. The detail is that the whole content should be vertically centered and additionally the Icon component should be centrally aligned to the first line of the Text component.(Below is the desired output)

@Composable
private fun MyBaseComponent(
    @DrawableRes iconResId: Int? = null,
    title: String? = null,
    subtitle: String,
    backgroundColor: Color,
    itemColor: Color
) {
    Box(
        modifier = Modifier
            .heightIn(min = 48.dp)
            .fillMaxWidth()
            .background(color = backgroundColor, shape = RoundedCornerShape(2.dp))
    ) {
        Row(
            modifier = Modifier.padding(MyTheme.spacing.double),
            verticalAlignment = Alignment.CenterVertically
        ) {
            iconResId?.let {
                MyIcon(iconResId = iconResId, tint = itemColor)
                Spacer(modifier = Modifier.padding(end = MyTheme.spacing.double))
            }

            Column(verticalArrangement = Arrangement.spacedBy(MyTheme.spacing.small)) {
                title?.let { MyTitle(text = title, color = itemColor) }
                MySubtitle(text = subtitle, color = itemColor)
            }
        }
    }
}

How it looks like at the moment. Everything seems to be alright but except the icon positioning.

CodePudding user response：

Either use padding(top = x.dp) to offset the icon or create a different hierarchy, something like:

Column() {
  MyTitle() // Also align to end of composable
  Row {
     Icon()
     MySubtitle() // Align to end

  }
}

Might need some adjustmends but hopefully you get the idea

CodePudding user response：

verticalAlignment = Alignment.CenterVertically it will align every item inside the row vertically.
for example: your row is a size of 50.dp and column which contains the two textView are almost equal to 45.dp, alright? now that will aligned centerVertically that's fine but the problem is your icon which is size of for instance 24.dp if we look at the ratio of 50.dp(row) , 45.dp(column) then icon which is 24.dp pretty big according to 50.dp, we can't clearly see behaviour of 45.dp according to 50.dp but according to 24.dp it can clearly be seen.
You have to remove verticalAlignment = Alignment.CenterVertically from the row.

Sample:

@Composable
fun AlignmentProblem(
    modifier: Modifier = Modifier
) {
    Box(modifier = modifier) {
        Row(
            modifier = Modifier
                .fillMaxWidth()
                .height(400.dp)
                .background(Color.Cyan)
          
        ) {

            Icon(
                painter = painterResource(id = R.drawable.ic_chat),
                contentDescription = null
            )
            Column(
                modifier = Modifier.fillMaxWidth()
                    .background(Color.LightGray),
                horizontalAlignment = Alignment.CenterHorizontally
            ) {
                Text(text = "What is Lorem Ipsum?")
                Text(text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.")
            }

        }
    }

}