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?

Demos

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. – Alphabetical

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. – Breda

I would like to completely remove the line – Demos

Answer 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

Noblenobleman

I tested this solutions but it didnt work in my Compose version – Demos

what is the version you are using? – Noblenobleman

I updated to latest version it worked. Not fully because the line is still there when TextField is not selected, but it is acceptable – Demos

@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. – Noblenobleman

Answer 2

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,
            )

Song

You saved me a trouble thank you! – Quinone

One may also want to set errorIndicatorColor = Color.Transparent, – Martyrology

Answer 3

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)
    )

Spidery

Similar question: How to remove the underline appearing under the current word, like the one under "indicator" word above? Is it a OS behavior? – Bondy

Answer 4

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)
)

Soerabaja

Answer 5

If you are using BasicTextField with TextFieldDefaults.DecorationBox as decorator box, then pass empty function ({}) into container of TextFieldDefaults.DecoratorBox.

TextFieldDefaults.DecorationBox(
            value = value,
            visualTransformation = visualTransformation,
            innerTextField = it,
            label = label,
            supportingText = supportingText,
            shape = shape,
            singleLine = singleLine,
            enabled = enabled,
            isError = isError,
            interactionSource = interactionSource,
            colors = colors,
            container = {}
        )

container takes composable function which by default draws indicator line at the bottom of textfield.

container: @Composable () -> Unit = {
        ContainerBox(enabled, isError, interactionSource, colors, shape)
    }

source code of ContainerBox

@Composable
fun ContainerBox(
    enabled: Boolean,
    isError: Boolean,
    interactionSource: InteractionSource,
    colors: TextFieldColors,
    shape: Shape = TextFieldDefaults.shape,
) {
    Box(
        Modifier
            .background(colors.containerColor(enabled, isError, interactionSource).value, shape)
            .indicatorLine(enabled, isError, interactionSource, colors))
}

Knowable