Jetpack Compose OutlinedTextField with the label on the inside and golden glow around the outline when selected

Question

I'm trying to make a TextField like in the image using Jetpack Compose. So far no luck in finding a easy way. The label must stay inside the outline, if I use OutlinedTextField there is no way to customise that. If I use the TextField which has the label on the inside there is no outline when selected, just the line below the textfield. Also I need to add a shadow/glow effect with a custom color, here seen in gold. I'm stumped.. Any thoughts?

Answer 1

You can do this by creating a Row with a Modifier.drawBehind that uses native paint to draw blur with color as in this image, the one with pink background has blur with same background color for shadow for instance, you can check the code for drawing colored blur here.

                   val myColor = color
                       .copy(alpha = shadow.alpha)
                       .toArgb()

                   val transparent = color
                       .copy(alpha = 0f)
                       .toArgb()

                   frameworkPaint.color = transparent

                   frameworkPaint.setShadowLayer(
                       radius,
                       dx,
                       dy,
                       myColor
                   )

                 it.drawRoundRect(
                           //...
                           paint = paint
                       )

It draws a shape behind you can draw a shape with stroke.

For the label and input create a Column with Modifier.weight() to use space inside row other than space reserved for Icon with close image.

Instead of TextField you can use a BasicTextfield which doesn't have default padding, however you can achieve the same thing with TextField too, but you will need to set colors to transparent to remove indicator line, it has some default padding you might not want to have.

        TextField(
    
                colors = TextFieldDefaults.textFieldColors(
                    focusedIndicatorColor = Color.Transparent,
                    unfocusedIndicatorColor = Color.Transparent,
                    disabledIndicatorColor = Color.Transparent
                )
            )

Answer 2

We can archive like this by using TextFiled surround with Box

Box(
    modifier = Modifier
        .fillMaxWidth()
        .padding(vertical = 2.dp)
        .border(
            1.dp,
            if (isError) MaterialTheme.colorScheme.errorBg else MaterialTheme.colorScheme.loginBorderColor,
            shape = RoundedCornerShape(8.dp)
        )
) {
    TextField(
        value = value,
        onValueChange = {
            onValueChange(it)
        },
        colors = worksTextFieldColors(),
        modifier = Modifier
            .fillMaxWidth()
            .padding(0.dp),
        label = {
            Text(
                text = hint, color = MaterialTheme.colorScheme.blue1,
                style = MaterialTheme.typography.placeholder
            )
        },
        textStyle = MaterialTheme.typography.loginEntryText.copy(
            color = MaterialTheme.colorScheme.commonTxt
        ),
        singleLine = true,
        keyboardOptions = KeyboardOptions(
            autoCorrect = false, imeAction = ImeAction.Next, keyboardType = KeyboardType.Email
        )
    )
}