TextField is cutting text at the bottom because default padding

Question

I almost completely successfully implemented the custom search component I needed, but I have one last problem. I need my component to be only 45dp to match the designer's requirements, but at that height, due to the TextField padding, it's clipping the text on top. I leave you below a screenshot of what is happening and the code I have. Is there any way to resolve this?

I'm new to Jetpack Compose and that's all I need to close this component.

Search component

@Preview
@Composable
fun SearchTextField() {
    val state = remember { mutableStateOf(TextFieldValue("")) }

    TextField(
        value = state.value,
        onValueChange = { value -> state.value = value },
        textStyle = TextStyle18Normal,
        placeholder = {
            Text(text = stringResource(id = R.string.search), style = TextStyle18Normal)
        },
        trailingIcon = {
            Image(
                painter = painterResource(id = R.drawable.ic_search),
                contentDescription = ""
            )
        },
        singleLine = true,
        shape = RoundedCornerShape(Dimen13),
        colors = TextFieldDefaults.textFieldColors(
            cursorColor = Color.DarkGray,
            trailingIconColor = colorResource(id = R.color.purple),
            backgroundColor = Color.White,
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent
        ),
        modifier = Modifier
            .width(Dimen320)
            .height(Dimen45)
    )
}

If I remove the .height(45) my problem is solved, but the component is not correct.

user_2016562 · Answer

The TextField has hardcoded paddings.

Starting with 1.2.0 you can use the BasicTextField together with the TextFieldDecorationBox. With the contentPadding attribute you can define custom vertical paddings.

Something like:

val colors = TextFieldDefaults.textFieldColors(backgroundColor = White)

BasicTextField(
    value = value,
    onValueChange = onValueChange,
    textStyle = TextStyle.Default.copy(fontSize = 18.sp),
    modifier = modifier
        .background(
            color = colors.backgroundColor(enabled).value,
            shape = RoundedCornerShape(13.dp). //rounded corners
        )
        .indicatorLine(
            enabled = enabled,
            isError = false,
            interactionSource = interactionSource,
            colors = colors,
            focusedIndicatorLineThickness = 0.dp,  //to hide the indicator line
            unfocusedIndicatorLineThickness = 0.dp //to hide the indicator line
        )
        .height(45.dp),
    
    interactionSource = interactionSource,
    enabled = enabled,
    singleLine = singleLine
) {
    TextFieldDefaults.TextFieldDecorationBox(
        value = value,
        innerTextField = it,
        singleLine = singleLine,
        enabled = enabled,
        visualTransformation = VisualTransformation.None,
        trailingIcon = { /* ... */ },
        placeholder = { /* ... */ },
        interactionSource = interactionSource,
        // keep horizontal paddings but change the vertical
        contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
            top = 0.dp, bottom = 0.dp
        )
    )
}

TextField is cutting text at the bottom because default padding

1 Answers