How to correctly set height in TextField in Jetpack Compose?

user_9764412 0
Viewed 4316

So I have this textfield,

var value = remember { mutableStateOf("") }

OutlinedTextField(
    value = value.value,
    placeholder = {
        Text("Search Users")
    },
    singleLine = true,
    modifier = Modifier.height(40.dp),
    onValueChange = {
        value.value = it
    },
)

I am setting height to 40.dp as you can see. However it looks like this,

enter image description here

Looks like the text/placeholder is cut off. How to fix this?

android-jetpack-compose kotlin android
3 Answers

I run into same problem using OutlinedTextField. Obviously, this is material component that have exact padding, that is causing crop on text (even with smaller font size).

Here is result:

compose custom TextField

Solution is to use BasicTextField, and here is the code:

@Composable
private fun CustomTextField(
modifier: Modifier = Modifier,
leadingIcon: (@Composable () -> Unit)? = null,
trailingIcon: (@Composable () -> Unit)? = null,
placeholderText: String = "Placeholder",
fontSize: TextUnit = MaterialTheme.typography.body2.fontSize
) {
var text by rememberSaveable { mutableStateOf("") }
BasicTextField(modifier = modifier
    .background(
        MaterialTheme.colors.surface,
        MaterialTheme.shapes.small,
    )
    .fillMaxWidth(),
    value = text,
    onValueChange = {
        text = it
    },
    singleLine = true,
    cursorBrush = SolidColor(MaterialTheme.colors.primary),
    textStyle = LocalTextStyle.current.copy(
        color = MaterialTheme.colors.onSurface,
        fontSize = fontSize
    ),
    decorationBox = { innerTextField ->
        Row(
            modifier,
            verticalAlignment = Alignment.CenterVertically
        ) {
            if (leadingIcon != null) leadingIcon()
            Box(Modifier.weight(1f)) {
                if (text.isEmpty()) Text(
                    placeholderText,
                    style = LocalTextStyle.current.copy(
                        color = MaterialTheme.colors.onSurface.copy(alpha = 0.3f),
                        fontSize = fontSize
                    )
                )
                innerTextField()
            }
            if (trailingIcon != null) trailingIcon()
        }
    }
)
}

calling it with changed background shape:

CustomTextField(
        leadingIcon = {
            Icon(
                Icons.Filled.Search,
                null,
                tint = LocalContentColor.current.copy(alpha = 0.3f)
            )
        },
        trailingIcon = null,
        modifier = Modifier
            .background(
                MaterialTheme.colors.surface,
                RoundedCornerShape(percent = 50)
            )
            .padding(4.dp)
            .height(20.dp),
        fontSize = 10.sp,
        placeholderText = "Search"
)
user_67736060

Instead of using height you can set the minHeight:

modifier = Modifier.defaultMinSize(minHeight = 40.dp)
user_144991000

See the problem is that the font size is too big for the provided height. The correct way to provide a height for the field is using the modifiers as you already are doing. However, to work around this problem either increase the height of the text field or decrease the size of the font.

user_158808650
Related