How to align leadingIcon in OutlinedTextField of jetpack compose with the value/placeholder

Viewed 1242

I am new to jetpack compose, I want my app to load the Exo two light font so I override the material typography like this,

  val exoTwoLight = FontFamily(
    Font(R.font.exo_two_light),
    Font(R.font.exo_two_light, FontWeight.Bold)
)



val exoTwoLightTypography = Typography(
    h1 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 96.sp
    ),
    h2 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 60.sp
    ),
    h3 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 48.sp
    ),
    h4 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 34.sp
    ),
    h5 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp
    ),
    h6 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Bold,
        fontSize = 12.sp
    ),
    subtitle1 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    subtitle2 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Medium,
        fontSize = 14.sp
    ),
    body1 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 16.sp
    ),
    body2 = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 14.sp
    ),
    button = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Medium,
        fontSize = 14.sp,
    ),
    caption = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 12.sp,
    ),
    overline = TextStyle(
        fontFamily = exoTwoLight,
        fontWeight = FontWeight.Normal,
        fontSize = 10.sp,
    )
)

Now when I try to load an input field in the app I can see that placeholder and leading icons are not aligned at all

I tried to customize the placeholder as it is required as a composable By customization, I mean adding top padding of 2/4 dp to the placeholder

 Row(modifier = Modifier.padding(top=10.dp)) {
                OutlinedTextField(
                    leadingIcon = {
                        Icon(
                            painter = painterResource(id = R.drawable.gallery_icon),
                            contentDescription = "",
                            tint = colorResource(R.color.teal_200),
                            modifier = Modifier.clickable {
                            }
                        )
                    },
                    placeholder = {
                        Text(
                            text = "Placeholder",
                            style = MaterialTheme.typography.button,
                            modifier = Modifier.padding(top = 3.dp)
                        )
                    },
                    modifier = Modifier.fillMaxWidth(),
                    readOnly = false,
                    value = sampleValue,
                    onValueChange = {
                        sampleValue = it
                    },
                    maxLines = 1,
                    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
                )
            }

It only solves the issue for the placeholder but values seem to be misaligned

This is the complete code

 var sampleValue by remember {
            mutableStateOf("")
        }
        Column{
            Row(modifier = Modifier.padding(top=10.dp)){
                OutlinedTextField(
                    leadingIcon = {
                        if (true) {
                            Icon(
                                painter = painterResource(id = R.drawable.capture_more_images),
                                contentDescription = "",
                                tint = colorResource(R.color.teal_200),
                                modifier = Modifier.clickable {
                                }
                            )
                        } else {
                            Icon(
                                painter = painterResource(id = R.drawable.capture_more_images),
                                contentDescription = "",
                                tint = colorResource(R.color.disabled)
                            )
                        }
                    },
                     placeholder = {
                         Row(
                             modifier = Modifier.height(24.dp),
                             verticalAlignment = Alignment.CenterVertically
                         ){
                            Text(

                                text = "Placeholder",
                                style = MaterialTheme.typography.button
                            )
                         }
                     },
                    modifier = Modifier.fillMaxWidth(),
                    readOnly = false,
                    value = sampleValue,
                    onValueChange = {
                        sampleValue = it
                    },
                    maxLines = 1,
                    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
                )
            }

            Row(modifier = Modifier.padding(top=10.dp)) {
                OutlinedTextField(
                    leadingIcon = {
                        Icon(
                            painter = painterResource(id = R.drawable.gallery_icon),
                            contentDescription = "",
                            tint = colorResource(R.color.teal_200),
                            modifier = Modifier.clickable {
                            }
                        )
                    },
                    placeholder = {
                        Text(
                            text = "Placeholder",
                            style = MaterialTheme.typography.button,
                            modifier = Modifier.padding(top = 3.dp)
                        )
                    },
                    modifier = Modifier.fillMaxWidth(),
                    readOnly = false,
                    value = sampleValue,
                    onValueChange = {
                        sampleValue = it
                    },
                    maxLines = 1,
                    keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
                )
            }

            Row(modifier = Modifier.padding(top=10.dp)) {
                OutlinedTextField(
                    placeholder = {
                        Text(
                            text = "Placeholder",
                            style = MaterialTheme.typography.button,
                        )
                    },
                    modifier = Modifier.fillMaxWidth(),
                    value = sampleValue,
                    onValueChange = {
                        sampleValue = it
                    }
                )
            }
        }

enter image description here enter image description here

I want that placeholder to be aligned vertically centered ( without giving any top padding ) with the leading icon what is the solution?

1 Answers

Many icons have built-in padding on one or more sides. To compensate for this, you can adjust the icon's position using the offset modifier. Set it some positive or negative value:

placeholder = {
     Row(
          modifier = Modifier.height(24.dp).offset(y = 5.dp),
          verticalAlignment = Alignment.CenterVertically
     ){
         Text(

              text = "Placeholder",
              style = MaterialTheme.typography.button
         )
     }
}
Related