Center vertically items in Row-CodePudding

I'm trying to center vertically icon and text in my Row() but it looks like something doesn't work. I'm having a feeling items are not centered vertically. Why is that? Am I missing something or icons cause troubles? All of them are .xml but they have different size. (As you can see in code, I set size for them to 15 and 20.dp )

Row(
        horizontalArrangement = Arrangement.SpaceBetween,
        modifier = Modifier
            .fillMaxWidth()
            .padding(top = 10.dp)
    ) {
        BottomIconItem(icon = R.drawable.ic_thumb_up, size = 15.dp, action = {}, data = (4..98).random())
        BottomIconItem(icon = R.drawable.ic_thumb_down, size = 15.dp, action = {}, data = (1..10).random())
        BottomIconItem(icon = R.drawable.ic_eye, action = {}, data = (765..2311).random())
        BottomIconItem(icon = R.drawable.ic_share, action = {}, data = null)
        BottomIconItem(icon = R.drawable.ic_more, action = {}, data = null)
    }

@Composable
private fun BottomIconItem(@DrawableRes icon: Int, size: Dp = 20.dp, action: () -> Unit, data: Int? = null) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier = Modifier.wrapContentSize()
    ) {
        Icon(
            painterResource(id = icon),
            modifier = Modifier
                .size(size)
                .clickable(onClick = { action.invoke() }),
            tint = MaterialTheme.colors.lightDarkModeTint,
            contentDescription = ""
        )
        if (data != null) {
            Text(
                text = "($data)",
                fontSize = 14.sp,
                fontWeight = FontWeight.Normal,
                color = MaterialTheme.colors.lightDarkModeTint,
                modifier = Modifier.padding(start = 5.dp)
            )
        }
    }
}

CodePudding user response：

Remove your top padding of 10.dp. If that doesn't work, check your drawables to see that they don't have padding. I tried your code but using vector images instead and it works correctly:

Row(
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
         .fillMaxWidth()
         .background(Color.Yellow)
) {
    BottomIconItem(icon = Icons.Filled.ArrowDownward, size = 15.dp, action = {}, data = (4..98).random())
    BottomIconItem(icon = Icons.Filled.ArrowUpward, size = 15.dp, action = {}, data = (1..10).random())
    BottomIconItem(icon = Icons.Filled.ArrowLeft, action = {}, data = (765..2311).random())
    BottomIconItem(icon = Icons.Filled.ArrowBack, action = {}, data = null)
    BottomIconItem(icon = Icons.Filled.ArrowBackIos, action = {}, data = null)
}

CodePudding user response：

In you Row set verticalAlignment = Alignment.CenterVertically.

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
        .fillMaxWidth()
        .padding(top = 10.dp)
) {
    ...
}