Jetpack Compose - How to use custom height on TextFieldDefaults.OutlinedTextFieldDecorationBox

Question

I'm trying to create a custom TextField using Android Jetpack compose, see below

                  TextFieldDefaults.OutlinedTextFieldDecorationBox(
                    contentPadding = PaddingValues(vertical = 10.dp),
                    value = searchText,
                    innerTextField = innerTextField,
                    enabled = enabled,
                    singleLine = singleLine,
                    visualTransformation = VisualTransformation.None,
                    interactionSource = interactionSource,
                    colors = textFieldColors,
                    leadingIcon = {
                        Icon(
                            modifier = Modifier.size(leadingIconSize),
                            painter = painterResource(id = R.drawable.ic_search),
                            contentDescription = ""
                        )
                    },
                    placeholder = {
                        Text("what is doin ")
                    }
                )

The height of the text field should be 36dp due to design requirements, however the text field has its own height about 56dp.

I could not find any information how to customize that value so I used the parameter contentPadding to achieve the goal.

However, it seems too ugly for me. Is there any other way to achieve to implement this?

Thanks in advance.

Answer 1

Apply the height modifier to the BasicTextField.
Something like:

    BasicTextField(
        value = text,
        onValueChange = { text = it },
        modifier = Modifier
            .height(36.dp),
        singleLine = singleLine,
        interactionSource = interactionSource
    ) { innerTextField ->
        TextFieldDefaults.OutlinedTextFieldDecorationBox(
            value = text,
            innerTextField = innerTextField,
            enabled = enabled,
            singleLine = singleLine,
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            contentPadding = TextFieldDefaults.textFieldWithoutLabelPadding(
                top = 0.dp,
                bottom = 0.dp 
            )
        )
    }