How change OutlineTextField border width in Android Jetpack Compose?

Question

My code:

OutlinedTextField(
     value = state.value,
     onValueChange = { state.value = it },
     modifier = Modifier.fillMaxWidth().padding(start = 30.dp, end = 30.dp),
     label = { Text(text = "Something", fontSize = 14.sp) },
     shape = RoundedCornerShape(12.dp),
)

I want to increase the border width so that the colors focusedBorderColor, disabledBorderColor are supported.

Cottage

Answer 1

Outline border is defined as a constant value in OutlinedTextField.

private val IndicatorUnfocusedWidth = 1.dp
private val IndicatorFocusedWidth = 2.dp

There is no direct way to override these values.

So, you have to create complete custom TextField Composables if you need to achieve dynamic border width.

You can copy-paste the complete code in OutlinedTextField.kt and TextFieldImpl.kt and modify them as required to create the custom Composables.

Charlton

Answer 2

So, I had the similar problem that I wasn't satisfied with the defined condition of UnfocusedBorderThickness = 1.dp with OutlinedTextField.

I tried several options and the solution which worked for me is a Custom One. I am using BasicTextField with OutlinedTextFieldDefaults.DecorationBox and OutlinedTextFieldDefaults.ContainerBox.

var searchText by rememberSaveable { mutableStateOf("") }
val interactionSource = remember { MutableInteractionSource() }

BasicTextField(
    value = searchText,
    singleLine = true,
    interactionSource = interactionSource,
    cursorBrush = SolidColor(Color.White),
    onValueChange = { newText -> searchText = newText }
) { innerTextField ->
    OutlinedTextFieldDefaults.DecorationBox(
        value = searchText,
        innerTextField = innerTextField,
        enabled = true,
        singleLine = true,
        interactionSource = interactionSource,
        visualTransformation = VisualTransformation.None,
        placeholder = {
            Text(
                text = stringResource(R.string.text),
            )
        },
        container = {
            OutlinedTextFieldDefaults.ContainerBox(
                enabled = true,
                isError = false,
                interactionSource = interactionSource,
                colors = OutlinedTextFieldDefaults.colors(),
                shape = RoundedCornerShape(Dimens.ActionButtonRadius),
                focusedBorderThickness = 5.dp,
                unfocusedBorderThickness = 5.dp
            )
        }
    )
}

Hebron

That's actually a really good one. Thanks! – Taveras

Appreciate this! Been looking for nearly an hour before stumbling upon this – Aldridge

Answer 3

You can change OutlinedTextField border like this

    var hasFocus by remember { mutableStateOf(false) }

    OutlinedTextField(
        modifier = modifier
            .border(
                width = 1.dp,
                color = if (hasFocus) Color.Red else Color.Unspecified
            )
            .onFocusChanged { focusState -> hasFocus = focusState.hasFocus },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = Color.Unspecified,
            unfocusedBorderColor = Color.Unspecified
        )
    )

Another solution is to use BasicTextField instead of OutlinedTextField

Hjerpe

This doesn't really answers the question about increasing the border width while using OutlinedTextField – Hebron