How to remove indicator line of TextField in Androidx Compose Material?

Question

I would like to remove the purple line/indicator (see the following image) of TextField. Is that possible or should I create my own custom TextField to achieve that?

What are you trying to achieve? Do you want to change the color from purple to your desired colour or you completely wants to remove the blinker line and other. — CodeRED Innovations, Oct 15 '20 at 07:00
`TextField` is Compose UI's text-entry composable following Material Design guidelines. `BaseTextField` is the foundation for plain text entry, without the Material Design elements. Long-term, it is unclear how much configuration they will offer that allows `TextField` to deviate from Material Design. Eventually, the community will create more flexible alternatives, for projects that do not want a ~100% Material Design look. — CommonsWare, Oct 15 '20 at 10:45

vikas kumar · Answer 1 · 2023-05-31T06:52:06.670

This has been changed in the recent Jetpack Compose UI Beta release 1.0.0-beta01 now you can pass the

TextFieldDefaults with desired colors.

 colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            backgroundColor = Color.LightGray,
        )

example

TextField(
        value = searchText,
        onValueChange = { Log.d(HOME_COMPONENT, it) },
        label = { Text(text = "Search") },
        shape = RoundedCornerShape(10.dp),
        leadingIcon = {
            Image(
                painter = painterResource(id = R.drawable.ic_search),
                contentDescription = "search"
            )
        },
        colors = TextFieldDefaults.textFieldColors(
            focusedIndicatorColor = Color.Transparent,
            disabledIndicatorColor = Color.Transparent,
            unfocusedIndicatorColor = Color.Transparent,
            backgroundColor = Color.LightGray,
        )
    )

image:

or if you want to customize the component according to your UI/UX then use the BasicTextField

@Composable
fun ToolbarComponent() {
    var searchText by remember { mutableStateOf("") }
    Row(
        modifier = Modifier
            .padding(16.dp)
            .fillMaxWidth(), verticalAlignment = Alignment.CenterVertically
    ) {

        Icon(
            painter = painterResource(id = R.drawable.ic_search),
            contentDescription = "search",
            modifier = Modifier.size(20.dp),
            tint = iconTintColor
        )

        Spacer(modifier = Modifier.size(16.dp))

        BasicTextField(
            value = searchText,
            onValueChange = { searchText = it },
            modifier = Modifier
                .background(shape = RoundedCornerShape(10.dp), color = Color.LightGray)
                .fillMaxWidth()
                .padding(16.dp),
            decorationBox = {
                Text(text = "Search")
            }
        )
    }
}

Edit: 31 May 2023

In Latest Stable version 1.4.7 TextFieldDefaults.textFieldColors is deprecated so now we can change the default colors using TextFieldDefaults.colors in TextField.


 colors = TextFieldDefaults.colors(
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                cursorColor = MaterialTheme.colorScheme.onSurface.copy(alpha = 0.5f),
                focusedContainerColor = Color.White,
                unfocusedContainerColor = Color.White,
            )

One may also want to set `errorIndicatorColor = Color.Transparent,` — Arthur Khazbs, Mar 03 '23 at 11:39

Gabriele Mariotti · Answer 2 · 2022-02-24T13:42:01.780

Starting with 1.2.0-alpha04 you can use the TextFieldDecorationBox together with BasicTextField to build a custom text field based on Material Design text fields.

In your case you can apply the indicatorLine modifier to define the focusedIndicatorLineThickness and the unfocusedIndicatorLineThickness parameters:

var text by remember { mutableStateOf("") }
val singleLine = true
val enabled = true
val interactionSource = remember { MutableInteractionSource() }
BasicTextField(
    value = text,
    onValueChange = { text = it },
    modifier = Modifier
        .indicatorLine(enabled, false,
            interactionSource,
            TextFieldDefaults.textFieldColors(),
            focusedIndicatorLineThickness = 0.dp,
            unfocusedIndicatorLineThickness = 0.dp
        )
        .background(
            TextFieldDefaults.textFieldColors().backgroundColor(enabled).value,
            TextFieldDefaults.TextFieldShape
        )
        .width(TextFieldDefaults.MinWidth),
    singleLine = singleLine,
    interactionSource = interactionSource
) { innerTextField ->
    TextFieldDecorationBox(
        value = text,
        innerTextField = innerTextField,
        enabled = enabled,
        singleLine = singleLine,
        visualTransformation = VisualTransformation.None,
        interactionSource = interactionSource,
        label = { Text("Label") }
    )
}

Otherwise you can use TextField defining these attributes:

focusedIndicatorColor
unfocusedIndicatorColor
disabledIndicatorColor

Something like:

    TextField(
        ....
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = .....,
            focusedIndicatorColor =  Transparent,
            unfocusedIndicatorColor = Transparent)
    )

Muthukrishnan Rajendran · Accepted Answer · 2020-10-15T07:49:37.797

1

If You use TextField in that you can give the activeColor to Color.Transparent

Note: activeColor is not only for indicator, its for label bottom indicator and cursor

Ex:

    var text: String by mutableStateOf("")
    TextField(value = text, onValueChange = {
        text = it
    }, activeColor = Color.Transparent)

As per the document, activeColor is

activeColor the color of the label, bottom indicator and the cursor when the text field is in focus

If you want to use your own you can try BaseTextField

edited Oct 15 '20 at 07:49

answered Oct 15 '20 at 07:32

Muthukrishnan Rajendran

11,122
3
31
41

I tested this solutions but it didnt work in my Compose version – Agna JirKon Rx Oct 15 '20 at 16:49
what is the version you are using? – Muthukrishnan Rajendran Oct 15 '20 at 17:13
I updated to latest version it worked. Not fully because the line is still there when TextField is not selected, but it is acceptable – Agna JirKon Rx Oct 15 '20 at 18:06
1

@Trinity, For that we should use inactiveColor, but the problem is inactiveColor is color of either the input text or placeholder when the text field is in focus, and the color of the label and bottom indicator when the text field is not in focus so if we give the color as Transparent then the text will not be visible. This is a very early stage, so later they might improve more on this API. – Muthukrishnan Rajendran Oct 15 '20 at 18:22

score 1 · Answer 4 · answered Nov 28 '20 at 13:49

Actually (version alpha 7) this is the easiest version I have found to remove Divider.

Set activeColor and inactiveColor to Color.Transparent in order to hide the indicator line under the TextField, whatever his state.

If you add only inactiveColor to Color.Transparent, the line will be invisible only when TextField is not focused

Add textStyle = TextStyle(color = Color.White) in order to display the color, whenever if the TextField is focused or not.

This solution will remove the line, but also the cursor indicator. It's not the best for the moment but it's also the alpha actually on Compose.

TextField(
    value = MyValue,
    onValueChange = { },
    textStyle = TextStyle(color = Color.White),
    activeColor = Color.Transparent,
    inactiveColor = Color.Transparent,
    shape = RoundedCornerShape(20)
)

How to remove indicator line of TextField in Androidx Compose Material?

4 Answers4