Jetpack Compose ¿cómo eliminar el subrayado de EditText/TextField y mantener el cursor?

4 minutos de lectura

Avatar de usuario de Christer
Cristóbal

Hola, necesito eliminar el subrayado en mi TextField porque se ve feo cuando el TextField es circular. He puesto el color activo en transparente, pero luego el cursor no se muestra (porque es transparente). ¿Cómo puedo eliminar el subrayado/activeColor y mantener el cursor?

ingrese la descripción de la imagen aquí

Aquí está mi código Circular TextField:

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

  • No utilice componentes de materiales muy modificados. En su lugar, utilice los componentes básicos de composición (BasicTextField en lugar de TextField) y modificarlos.

    – Noé

    18 de enero de 2021 a las 20:17

Avatar de usuario de Gabriele Mariotti
gabriele mariotti

Puede definir estos atributos para aplicar un color transparente:

  • focusedIndicatorColor
  • unfocusedIndicatorColor
  • disabledIndicatorColor

Algo como:

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

ingrese la descripción de la imagen aquí


Empezando con 1.2.0 también puedes usar el nuevo OutlinedTextFieldDecorationBox Juntos con BasicTextField personalizar el borde o la línea indicadora.

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

ingrese la descripción de la imagen aquí

También puedes usar un TextFieldDecorationBox aplicando el indicatorLine modificador que especifica el focusedIndicatorLineThickness y unfocusedIndicatorLineThickness valores:

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

  • Solo una nota rápida para cualquiera que use Material3, que el backgroundColor ha cambiado a containerColor.

    – netcyrax

    12 de marzo a las 14:35

Si no necesita parámetros/funciones de TextField como colapsar etiqueta, marcador de posición, etc., puede usar una capa de Text/BasicTextField para crear un SearchField (que es una solución sugerida de acuerdo con problema FilledTextField: no se puede eliminar el indicador inferior ):

@Composable
fun Search(
        hint: String,
        endIcon: ImageVector? = Icons.Default.Cancel,
        onValueChanged: (String) -> Unit,
) {
    var textValue by remember { mutableStateOf(TextFieldValue()) }

    Surface(
        shape = RoundedCornerShape(50),
        color = searchFieldColor
    ) {
        Box(
            modifier = Modifier
                .preferredHeight(40.dp)
                .padding(start = 16.dp, end = 12.dp),
            contentAlignment = Alignment.CenterStart
        )
        {
            if (textValue.text.isEmpty()) {
                Text(
                    text = "Search...",
                    style = MaterialTheme.typography.body1.copy(color = MaterialTheme.colors.onSurface.copy(ContentAlpha.medium)),
                    )
            }

            Row(
                verticalAlignment = Alignment.CenterVertically
            ) {
                BasicTextField(
                    modifier = Modifier.weight(1f),
                    value = textValue,
                    onValueChange = { textValue = it; onValueChanged(textValue.text) },
                    singleLine = true,
                    cursorColor = YourColor,
                )
                endIcon?.let {
                    AnimatedVisibility(
                        visible = textValue.text.isNotEmpty(),
                        enter = fadeIn(),
                        exit = fadeOut()
                    ) {
                        Image(
                            modifier = Modifier
                                .preferredSize(24.dp)
                                .clickable(
                                    onClick = { textValue = TextFieldValue() },
                                    indication = null
                                ),
                            imageVector = endIcon,
                            colorFilter = iconColor
                        )
                    }
                }
            }
        }
    }
}

¿Ha sido útil esta solución?