Search code examples
androidandroid-textinputlayoutandroid-jetpack-composeandroid-compose-textfieldandroid-jetpack-compose-text

Jetpack Compose how to remove EditText/TextField underline and keep cursor?


Hi I need to remove the underline in my TextField because it look ugly when the TextField is circular. I have sat the activeColor to transparent, but then the cursor wont show (because it's transparent). How can I remove the underline/activeColor and keep the cursor?

enter image description here

Here is my Circular TextField code:

@Composable
fun SearchBar(value: String) {
    // we are creating a variable for
    // getting a value of our text field.
    val inputvalue = remember { mutableStateOf(TextFieldValue()) }

    TextField(
            // below line is used to get
            // value of text field,
            value = inputvalue.value,

            // below line is used to get value in text field
            // on value change in text field.
            onValueChange = { inputvalue.value = it },

            // below line is used to add placeholder
            // for our text field.
            placeholder = { Text(text = "Firmanavn") },

            // modifier is use to add padding
            // to our text field, and a circular border
            modifier = Modifier.padding(all = 16.dp).fillMaxWidth().border(1.dp, Color.LightGray, CircleShape),

            shape = CircleShape,


            // keyboard options is used to modify
            // the keyboard for text field.
            keyboardOptions = KeyboardOptions(
                    // below line is use for capitalization
                    // inside our text field.
                    capitalization = KeyboardCapitalization.None,

                    // below line is to enable auto
                    // correct in our keyboard.
                    autoCorrect = true,

                    // below line is used to specify our
                    // type of keyboard such as text, number, phone.
                    keyboardType = KeyboardType.Text,
            ),

            // below line is use to specify
            // styling for our text field value.
            textStyle = TextStyle(color = Color.Black,
                    // below line is used to add font
                    // size for our text field
                    fontSize = TextUnit.Companion.Sp(value = 15),

                    // below line is use to change font family.
                    fontFamily = FontFamily.SansSerif),

            // below line is use to give
            // max lines for our text field.
            maxLines = 1,

            // active color is use to change
            // color when text field is focused.
            activeColor = Color.Gray,

            // single line boolean is use to avoid
            // textfield entering in multiple lines.
            singleLine = true,

            // inactive color is use to change
            // color when text field is not focused.
            inactiveColor = Color.Transparent,

            backgroundColor = colorResource(id = R.color.white_light),

                    // trailing icons is use to add
                    // icon to the end of tet field.
            trailingIcon = {
                Icon(Icons.Filled.Search, tint = colorResource(id = R.color.purple_700))
            },
    )

Solution

  • You can define these attributes to apply a Transparent color:

    • focusedIndicatorColor
    • unfocusedIndicatorColor
    • disabledIndicatorColor

    Something like:

       TextField(
           //..
           colors = TextFieldDefaults.textFieldColors(
                textColor = Color.Gray,
                disabledTextColor = Color.Transparent,
                backgroundColor = Color.White,
                focusedIndicatorColor = Color.Transparent,
                unfocusedIndicatorColor = Color.Transparent,
                disabledIndicatorColor = Color.Transparent
            )
        )
    

    enter image description here


    Starting with 1.2.0 you can also use the new OutlinedTextFieldDecorationBox together with BasicTextField customizing the border or the indicator line.

        val interactionSource = remember { MutableInteractionSource() }
        val enabled = true
        val singleLine = true
        val colors = TextFieldDefaults.outlinedTextFieldColors()
    
        BasicTextField(
            value = value,
            onValueChange = onValueChange,
            modifier = modifier,
            // internal implementation of the BasicTextField will dispatch focus events
            interactionSource = interactionSource,
            enabled = enabled,
            singleLine = singleLine
        ) {
            TextFieldDefaults.OutlinedTextFieldDecorationBox(
                value = value,
                visualTransformation = VisualTransformation.None,
                innerTextField = it,
                // same interaction source as the one passed to BasicTextField to read focus state
                // for text field styling
                interactionSource = interactionSource,
                enabled = enabled,
                singleLine = singleLine,
                // update border thickness and shape
                border = {
                    TextFieldDefaults.BorderBox(
                        enabled = enabled,
                        isError = false,
                        colors = colors,
                        interactionSource = interactionSource,
                        shape = CircleShape,
                        unfocusedBorderThickness = 1.dp,
                        focusedBorderThickness = 1.dp
                    )
                }
            )
        }
    

    enter image description here

    Also you can use a TextFieldDecorationBox applying the indicatorLine modifier specifying the focusedIndicatorLineThickness and unfocusedIndicatorLineThickness values:

       val colors = TextFieldDefaults.textFieldColors(
            backgroundColor = White,
            focusedIndicatorColor = Gray)
    
        BasicTextField(
            modifier = Modifier
                .border(1.dp, Color.LightGray, CircleShape)
                .indicatorLine(
                    enabled = enabled,
                    isError = false,
                    colors = colors,
                    interactionSource = interactionSource,
                    focusedIndicatorLineThickness = 0.dp,
                    unfocusedIndicatorLineThickness = 0.dp
                )
                .background(colors.backgroundColor(enabled).value, CircleShape),
        ) {
            TextFieldDecorationBox(
                //...
                colors = colors
            )
        }