How to change border color of textfield in jetpack compose?

Question

I am trying to give a border color for textfield in jetpack compose but I couldn't find information about textfield border color or layout color I just found about How to change layout or border color of outlinedtextfield. Is there a solution like in outlinetextfield? at the textfield?

I want to do like this but for textfield

How to change the outline color of OutlinedTextField from jetpack compose?

hear is my textfield code:

TextField(
                value = currentWeight,
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(5.dp),
                onValueChange = { currentWeight = it },
                label = { Text(text = "Mevcut kilon (kg)") },
                shape = RoundedCornerShape(5.dp),
                colors = TextFieldDefaults.textFieldColors(
                    textColor = Grey2,
                    disabledTextColor = Color.Transparent,
                    backgroundColor = Grey3,
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    disabledIndicatorColor = Color.Transparent,
                )
            )

result:

I added focused label color in textfield colors part but it didn't work

EDIT I did it like this @Gabriele Mariotti but there are some problems

val interactionSource = remember { MutableInteractionSource() }
            val isFocused = interactionSource.collectIsFocusedAsState()
            val shape = RoundedCornerShape(2.dp)
            val borderModifier = if (isFocused.value) Modifier.border(1.dp,Red, shape) else Modifier
            val singleLine = true
            val enabled = true
            BasicTextField(
                value = currentWeight,
                onValueChange = { currentWeight = it },
                interactionSource = interactionSource,
                enabled = enabled,
                singleLine = singleLine,
                modifier =  borderModifier.background(
                    color = TextFieldDefaults.textFieldColors().backgroundColor(true).value,
                    shape = shape
                )
            ) {
                TextFieldDefaults.TextFieldDecorationBox(
                    value = currentWeight,
                    innerTextField = it,
                    singleLine = singleLine,
                    enabled = enabled,
                    label = { Text("Label") },
                    placeholder = { Text("Placeholder") },
                    visualTransformation = VisualTransformation.None,
                    interactionSource = interactionSource,
                    colors = TextFieldDefaults.textFieldColors()
                )
            }

ISSUES

TextFieldDefaults.TextFieldDecorationBox
And `Text()`

TextFieldDecorationBox is red color and error is Unresolved reference: TextFieldDecorationBox

 label = { Text("Label") },
 placeholder = { Text("Placeholder") },

Texts error

@Composable invocations can only happen from the context of a @Composable function

Modifier has the `border()` method. I think you can use that! — ndriqa, Jan 31 '23 at 09:21
this works but the border is always there I just want the border to appear when I click it — NewPartizal, Jan 31 '23 at 09:32
maybe you can save a variable to save the focus state of the TextField focus, and use modifier's `onFocusChanged` to change it whenever the focus changes, which in turn recomposes the border to whichever u like on and off focus — ndriqa, Jan 31 '23 at 09:40
The TextField doesn't have a border, but an indicator line. What are you trying to achieve? — Gabriele Mariotti, Jan 31 '23 at 09:41
on top of that, you can animate the color changes so it looks smooth, with the `transition.animateColor` method, you can research on that one — ndriqa, Jan 31 '23 at 09:44
When the user clicks on the textfield, I want to give a border, so when the cursor is on the textfield, it will have a border.something like that — NewPartizal, Jan 31 '23 at 09:44

score 2 · Answer 1 · answered Jan 31 '23 at 09:55

2

You can use BasicTextField applying a border modifier and TextFieldDecorationBox.

Something like:

    val isFocused = interactionSource.collectIsFocusedAsState()
    val shape = RoundedCornerShape(2.dp)
    val borderModifier = if (isFocused.value) Modifier.border(1.dp,Red, shape) else Modifier

    BasicTextField(
        value = value,
        onValueChange = { value = it },
        interactionSource = interactionSource,
        enabled = enabled,
        singleLine = singleLine,
        modifier =  borderModifier.background(
            color = TextFieldDefaults.textFieldColors().backgroundColor(enabled).value,
            shape = shape
        )
    ) {
        TextFieldDefaults.TextFieldDecorationBox(
            value = value,
            innerTextField = it,
            singleLine = singleLine,
            enabled = enabled,
            label = { Text("Label") },
            placeholder = { Text("Placeholder") },
            visualTransformation = VisualTransformation.None,
            interactionSource = interactionSource,
            colors = TextFieldDefaults.textFieldColors()
        )
    }

answered Jan 31 '23 at 09:55

Gabriele Mariotti

320,139
94
887
841

Should I create the TextField Decoration Box if I am going to create it, how can I create it because that part appears in red? TextFieldDefaults.TextFieldDecorationBox <-- this part – NewPartizal Jan 31 '23 at 10:40
@NewPartizal what is your issue? did you declare singleLine,enabled and interactionSource? – Gabriele Mariotti Jan 31 '23 at 10:45
I added code that you said but there are some problems I edited my question you can look again. To be honest I don't know how to use basictextfield because I haven't used before but I did some research and I applied your code but as I said there some problems in my code. maybe i did it wrong because i don't know – NewPartizal Jan 31 '23 at 11:07
Are you mixing the import of material and material3? Which version of compose are you using? – Gabriele Mariotti Jan 31 '23 at 11:46
I am using material – NewPartizal Jan 31 '23 at 11:46
Check your import if you are also importing androidx.compose.material3. The errors on the label and placeholder parameters are quite strange. Add also the package androidx.compose.material in front of Text, to understand the kind of issue. – Gabriele Mariotti Jan 31 '23 at 11:50
I updated my build.gradle material and compose versions and it works but there is a problem when i click it the cursor disappears immediately and i can't type anything. By the way I did singleline and enabled true. I wrote it because I thought maybe this could be – NewPartizal Feb 02 '23 at 10:23

How to change border color of textfield in jetpack compose?

1 Answers1