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.

@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.

CodePudding user response：

For anyone who has the same issue, I solved my problem with the following code:

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

    BasicTextField(
        modifier = Modifier
            .width(Dimen320)
            .height(Dimen45)
            .background(Color.White, RoundedCornerShape(Dimen13)),
        value = state.value,
        onValueChange = { value -> state.value = value },
        singleLine = true,
        textStyle = TextStyle18Normal,
        decorationBox = { innerTextField ->
            Row(verticalAlignment = Alignment.CenterVertically) {
                Box(
                    Modifier
                        .weight(1f)
                        .padding(start = Dimen30)) {
                    if (state.value.text.isEmpty()) {
                        Text(
                            text = stringResource(id = R.string.search),
                            style = TextStyle18Normal
                        )
                    }

                    innerTextField()
                }

                val trailingIcon = @Composable {
                    Image(
                        painter = painterResource(id = R.drawable.ic_search),
                        contentDescription = "",
                        modifier = Modifier.padding(
                            end = Dimen20,
                            top = Dimen13,
                            bottom = Dimen13,
                            start = Dimen10
                        )
                    )
                }

                trailingIcon()
            }
        }
    )
}

CodePudding user response：

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