Text problem in TextField - Android Jetpack Compose

Question

As I set the Height of TextField to 40dp, I can't see the Text properly like this image.

How can I solve this problem?

@Composable
fun SearchTextField(
    onSearchClick: () -> Unit
) {
    var text by remember { mutableStateOf("") }

    TextField(
        value = text,
        onValueChange = { text = it },
        placeholder = { Text("Search") },
        singleLine = true,
        leadingIcon = {
            Icon(
                imageVector = Icons.Filled.Search,
                contentDescription = ""
            )
        },
        modifier = Modifier.height(40.dp),
        shape = RoundedCornerShape(10.dp),
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent
        ),
        keyboardActions = KeyboardActions {
            onSearchClick()
        },
        textStyle = TextStyle.Default
    )
}

Answer 1

There is an embedded height in Compose's TextField. The content is not displayed completely because you fixed the height. There are three ways to solve the problem: you can choose the one you need to solve the problem.

1. Obviously, you need to increase the height of the TextField in Compose. The minimum height of TextField is defined in TextFieldDefaults. The minHeight of TextField is 56dp. Your modifier.height only needs to be higher than this height. And the built-in padding of TextFiled is 16dp

2. Reduce the fontSize of the font to adapt to the reduced height.

3. Customize TextField. If you feel that TextField is not suitable, you can customize TextField to meet your needs. Use BasicTextField to define an input box that meets the requirements. I put my own BasicTextField here. You can try it first and write it as a corresponding reproduce:

@Composable
fun InputEditText(
    value: String,
    modifier: Modifier,
    onValueChange: (String) -> Unit,
    contentTextStyle: TextStyle,
    hintTextStyle: TextStyle,
    placeHolderString: String = "",
    enabled: Boolean = true,
    readOnly: Boolean = false,
    singleLine: Boolean = false,
    maxLines: Int = Int.MAX_VALUE,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    cursorColor: Color = Color.Black,
) {
    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier,
        textStyle = contentTextStyle,
        decorationBox = {innerTextField ->
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .offset {
                        if (contentTextStyle.textAlign == TextAlign.Start)
                            IntOffset(x = 10, y = 0)
                        else
                            IntOffset(x = 0, y = 0)
                    },
                contentAlignment = Alignment.CenterStart,
            ) {
                if (value.isEmpty()) {
                    Text(
                        text = placeHolderString,
                        color = hintTextStyle.color,
                        fontSize = hintTextStyle.fontSize
                    )
                }

                innerTextField()

            }
        },
        enabled = enabled,
        readOnly = readOnly,
        singleLine = singleLine,
        maxLines = maxLines,
        keyboardOptions = keyboardOptions,
        keyboardActions = keyboardActions,
        cursorBrush = SolidColor(cursorColor)
    )
}