Text problem in TextField - Android Jetpack Compose

user_16421464 0
Viewed 3596

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?

an image of a search bar where the text is clipped and not clearly visible

@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
    )
}
android-jetpack-compose kotlin textfield android user-interface
1 Answers

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