Text Field Gradient Border On Focus Jetpack Compose?

Question

I am trying to change a gradient border on the input focus. The example below is what I want to achieve, but how can I make 'focusedBorderColor' into a gradient border?

colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = md_theme_light_primary,
            unfocusedBorderColor =md_theme_light_inversePrimary,
            focusedLabelColor = Color.White,
            trailingIconColor = Color.White,
//            disabledTextColor = NaviBlue
        ),

focusedBorderColor's default type is Color. So basically you will have to create custom composable for OutlinedTextField() with type Brush instead of color, or you can switch to BasicTextField() as shown below — Megh, Dec 16 '22 at 07:30

score 2 · Accepted Answer · answered Dec 16 '22 at 07:23

You can use CardView() with BasicTextField()

    var name by remember {
        mutableStateOf("")
    }

    val interactionSource = remember { MutableInteractionSource() }
    val isFocused by interactionSource.collectIsFocusedAsState()
    val focusRequester = remember {
        FocusRequester()
    }

    Card(
        modifier = Modifier
            .fillMaxWidth()
            .padding(horizontal = 20.dp, vertical = 20.dp)
            .shadow(ambientColor = Color.Blue, spotColor = Color.Cyan, elevation = if (isFocused) 15.dp else 0.dp, clip = true, shape = CircleShape) ,
        shape = CircleShape
    ) {
        BasicTextField(
            value = name,
            onValueChange = { name = it },
            interactionSource = interactionSource,
            modifier = Modifier
                .fillMaxWidth()
                .border(
                    width = 1.dp,
                    brush = Brush.horizontalGradient(listOf(Color.Cyan, Color.Blue)),
                    shape = CircleShape
                )
                .padding(16.dp)
                .background(Color.White)
                .focusRequester(focusRequester),
        )
    }

Below is sample gif!

Text Field Gradient Border On Focus Jetpack Compose?

1 Answers1