https://kotlinlang.org logo
Join Slack
Powered by
Hey want to customize the appearance of a BasicTex...
# compose-android
k
Hey want to customize the appearance of a BasicTextField to remove the underline when displaying text.
I tried setting the 
keyboardOptions
to 
KeyboardOptions(keyboardType = KeyboardType.Password)
as it effectively removes the underline.
r
use decorativebox
k
However, this approach introduces a UX issue: when users copy text, the keyboard clipboard behaves like it’s handling a password field. For example, clipboard suggestions are shown as masked characters, which is not what I want. Here’s the code I’m working with:
Copy code
BasicTextField(
    state = state,
    modifier = Modifier
        .fillMaxWidth()
        .padding(20.dp),
    interactionSource = interactionSource,

    enabled = true,
    lineLimits = TextFieldLineLimits.SingleLine,
    keyboardOptions = KeyboardOptions(
        keyboardType = KeyboardType.Text,
        autoCorrectEnabled = false
    ),
    textStyle = LocalTextStyle.current,
    decorator = TextFieldDefaults.decorator(
        state = state,
        enabled = true,
        lineLimits = TextFieldLineLimits.Default,
        interactionSource = interactionSource,
        outputTransformation = null,
    ),
)
What I need is a way to remove the underline from the BasicTextField while retaining normal keyboard and clipboard behavior. How can I achieve this? Is there a better way to customize the underline appearance without relying on KeyboardType.Password? Any guidance or examples would be greatly appreciated!
How does decorativebox solve this problem? Rapheal
Screenshot 2025-01-20 at 14.28.00.png
r
Copy code
decorationBox = {
                    TextFieldDefaults.DecorationBox(
                        value = value,
                        innerTextField = it,
                        enabled = true,
                        singleLine = singleLine,
                        visualTransformation = VisualTransformation.None,
                        interactionSource = remember { MutableInteractionSource() },
                        isError = isError,
                        label = null,
                        placeholder = null,
                        leadingIcon = leadingIcon,
                        trailingIcon = null,
                        prefix = null,
                        suffix = null,
                        supportingText = null,
                        shape = TextFieldDefaults.shape,
                        colors = colors(
                            errorContainerColor = colors.StatusError
                        ),
                        contentPadding = contentPaddingWithLabel(),
                        container = {}
                    )
                }
It will remove the line
k
it's not working on my side
r
Did you override the container field ?
k
yes
I want to remove text underline when user type something not the container underline
r
Oh, I missunderstood
k
no worries, thanks for helping
r
Do you have a screenshot ?
k
yes, please refer 
dfdfg
text underline.
r
Try
Copy code
visualTransformation = VisualTransformation.None,
                keyboardOptions = KeyboardOptions(
                    keyboardType = KeyboardType.Password
                ),
k
Yes it solves the problem. However, this approach introduces a UX issue: when users copy text, the keyboard clipboard behaves like it’s handling a password field. For example, clipboard suggestions are shown as masked characters, which is not what I want.
r
Of what I saw, underline is based on keyboard type, don't know if you can do more
k
Thanks for your guidance.
z
That underline indicates the composing region, and there’s no way to disable that because for certain languages it’s critical to the way input works
Why do you want to remove it?
k
My UX team wants to remove the underline that appears when a user types something. I'm migrating the entire application from XML TextField to Jetpack Compose TextField. In XML, we use android:inputType="textNoSuggestions" to disable it, but there doesn’t seem to be a similar option in Compose. We don’t need suggestions for any language (including JfK). If there’s a way to remove it in Compose, I’d like to know. Thank you
z
Oh so what you actually want to do is disable suggestions? Does disabling 
autoCorrectEnabled
in your 
KeyboardOptions
work?
k
yes I tried 
autoCorrectEnabled
and it's not working, please have a look on this code.
z
Ah missed that. The other thing you could do is use a 
PlatformTextInterceptor
to manually configure the flags you need on 
EditorInfo
to exactly what you had before.
And then file a feature request to expose that flag in 
KeyboardOptions
k
Do you have any example for this?
z
There’s examples in the docs
k
I tried this code but still happening. Is I am doing anything wrong in here?
Copy code
ssetContent {
            val textFieldState = remember { TextFieldState() }
            val interactionSource = remember { MutableInteractionSource() }

            InterceptPlatformTextInput(
                interceptor = { request, nextHandler ->
                    val modifiedRequest = PlatformTextInputMethodRequest { outAttributes ->
                        request.createInputConnection(outAttributes).also {
                            outAttributes.inputType = InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS
                        }
                    }
                    nextHandler.startInputMethod(modifiedRequest)
                }
            ) {
                BasicTextField(
                    state = textFieldState,
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(100.dp),
                    keyboardOptions = KeyboardOptions(
                        keyboardType = KeyboardType.Text,
                        autoCorrectEnabled = false,
                    ),
                    decorator = { view ->
                        TextFieldDefaults.DecorationBox(
                            value = textFieldState.text.toString(),
                            innerTextField = view,
                            enabled = true,
                            singleLine = true,
                            interactionSource = interactionSource,
                            placeholder = {
                                Text("Only Letter")
                            },
                            visualTransformation = VisualTransformation.None
                        )
                    }
                )
            }
z
lol you changed that code as I was responding
Now you’re not setting the flag? Before I was gonna say you need to or it
k
Sorry my bad, I was trying something and hit accidentally .
I'm setting this flag
Copy code
outAttributes.inputType = InputType.TYPE_TEXT_FLAG_NO_SUGGESTIONS
I solved this using
Copy code
request.createInputConnection(outAttributes).also {
                            outAttributes.inputType = InputType.TYPE_TEXT_VARIATION_VISIBLE_PASSWORD
                        }
z
Keep in mind that using IME flags to disable the underline can be brittle. It’s up to the user’s chosen IME to interpret those flags, and if they’re using a keyboard that behaves differently than the standard gboard or Samsung ones then all bets are off.
🙌 1
k
Okay I'll keep in mind all of those things you n=have mentioned
Thanks for your guidance. It means a lot
38 Views
Open in Slack
PreviousNext
Powered by