Jetpack Compose: Custom TextField design

Question

In general, most components in Jetpack Compose seem to be very easy to customize.

However, the same cannot be said for the TextField. For example, say that I wanted to make something like this:

One would think that simply wrapping the BaseTextField would work. However, it appears that there has been a bug in the BaseTextField component, and I have opened an issue. This bug will not permit the user to focus the text field after focusing-away from it once already, until the component is re-rendered.

Citing this, I attempted to customize the OutlinedTextField and TextField components, but am not able to customize them to look like the image above. Were it not for the fact that the cursor color uses the activeColor property, I could make it work.

What would be a proper work-around to create a usable text field that looks like the above?

@Thracian Well, you’d need to wrap everything in a column so that the counter appears below the text field, and then use the text field’s state to get the ‘.length’ — foxtrotuniform6969, Jan 09 '21 at 17:18
Thank you very much. I thought it's a native component for TextField. Still no char counter, assistive text, and error message yet i guess. — Thracian, Jan 09 '21 at 17:22
How do you remove underline from TextField, i couldn't also remove that either. I'm trying to create a rounded corner TextField with no underline for TopBar search with leading icon. BasicTextField has no icon property so i'm trying to do it with TextField but if it's not working i will do it manually with BasicTextField and Image. — Thracian, Jan 09 '21 at 17:24
You need to add a border that's thick enough to cover the existing line — foxtrotuniform6969, Jan 10 '21 at 17:03

Gabriele Mariotti · Answer 1 · 2022-01-19T12:41:42.877

You can use the TextField:

removing the label with label = null
applying custom color with the TextFieldDefaults.textFieldColors parameter to hide the indicator.
adding in the onValueChange a function to fix the max number of characters as described here

Finally use a Column to add 2 Text composables to complete the external label and counter text.

Something like:

var text by remember { mutableStateOf("") }
val maxChar = 5

Column(){
    //External label
    Text(
        text = "Label",
        modifier = Modifier.fillMaxWidth(),
        textAlign = TextAlign.Start,
        color = Blue
    )

    TextField(
        value = text,
        onValueChange = {
            if (it.length <= maxChar) text = it
        },
        modifier = Modifier
            .fillMaxWidth()
            .padding(vertical = 4.dp),
        shape = RoundedCornerShape(8.dp),
        trailingIcon = {
            Icon(Icons.Filled.Add, "", tint = Blue)
        },
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = ....,
            focusedIndicatorColor =  Color.Transparent, //hide the indicator
            unfocusedIndicatorColor = .....)
    )
    //counter message
    Text(
        text = "${text.length} / $maxChar",
        textAlign = TextAlign.End,
        color = Blue,
        style = MaterialTheme.typography.caption, //use the caption text style
        modifier = Modifier.fillMaxWidth()
    )

score 30 · Accepted Answer · edited Jul 31 '21 at 19:50

By this exemple you can learn a lot. With 1.0.0 you can do like this:

Custom TextField printscreen here

Column {
        var textState by remember { mutableStateOf("") }
        val maxLength = 110
        val lightBlue = Color(0xffd8e6ff)
        val blue = Color(0xff76a9ff)
        Text(
            text = "Caption",
            modifier = Modifier
                .fillMaxWidth()
                .padding(bottom = 4.dp),
            textAlign = TextAlign.Start,
            color = blue
        )
        TextField(
            modifier = Modifier.fillMaxWidth(),
            value = textState,
            colors = TextFieldDefaults.textFieldColors(
                backgroundColor = lightBlue,
                cursorColor = Color.Black,
                disabledLabelColor = lightBlue,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent
            ),
            onValueChange = {
                if (it.length <= maxLength) textState = it
            },
            shape = RoundedCornerShape(8.dp),
            singleLine = true,
            trailingIcon = {
                if (textState.isNotEmpty()) {
                    IconButton(onClick = { textState = "" }) {
                        Icon(
                            imageVector = Icons.Outlined.Close,
                            contentDescription = null
                        )
                    }
                }
            }
        )
        Text(
            text = "${textState.length} / $maxLength",
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 4.dp),
            textAlign = TextAlign.End,
            color = blue
        )
    }

score 6 · Answer 3 · answered Oct 27 '20 at 16:23

6

Well, until the issue I mentioned is resolved, the choices are:

Roll back to Compose version 1.0.0-alpha04 (issue was introduced in alpha05)

Add a border to a TextField or OutlinedTextField as so:

TextField(
    value = myValue,
    onValueChange = myOnChange,
    modifier = Modifier.clip(myShape).border(5.dp, myColor)
)

answered Oct 27 '20 at 16:23

foxtrotuniform6969

3,527
7
28
54

2

In newer versions, you have pass the shape to TextField itself, as it overwrites the clip parameter with the shape coming in there – EpicPandaForce Aug 28 '21 at 11:09

score 2 · Answer 4 · answered May 01 '22 at 17:22

In addition to Gabriele Mariotti's Answer
If you like to have custom color for your cursor, you can achieve it using:

Column(){
    //External label
    Text(
        ...
        ...
    )

    TextField(
        ...
        ...

        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = ...,
            focusedIndicatorColor =  ..., 
            unfocusedIndicatorColor = ...,
            cursorColor = Color.Black)
    )
    //counter message
    Text(
        ...
        ...
    )

Jetpack Compose: Custom TextField design

4 Answers4