Is it possible to give an `OutlinedTextField` elevation with shadow? I tried to apply `Modifier.shad...

# compose

[Anastasia Rozovskaya]

Is it possible to give an OutlinedTextField elevation with shadow? I tried to apply Modifier.shadow(elevation = 8.dp, shape = RoundedCornerShape(8.dp)) directly to OutlinedTextField, but the result was horrible. Should I use BasicTextField instead? I see some decorationBox parameter in there, which might help.

[Anastasia Rozovskaya]

I know I can wrap it all in Card and apply elevation to it, but this seems to be a workaround rather than a good practice

[Anastasia Rozovskaya]

Also I want to remove elevation with shadow, when the view is focused to better highlight it for the user. Can anyone help?

[Kirill Grouchnikov]

Do you have a screenshot or a mock of how you want it to look like?

[Kirill Grouchnikov]

The way elevation works in Android is it requires a fully opaque component. If the component does not fully paint its background, the end result will indeed be unpleasant.

[Anastasia Rozovskaya]

@Kirill Grouchnikov This is the intended view. With OutlinedTextField I can set only the backgroudColor or shape . Could you please explain in more details about the fully painted background for the OutlinedTextField particularly?

[Kirill Grouchnikov]

How does it look like when you set background color and elevation?

[Anastasia Rozovskaya]

Like the shadow is applied to inside area, not outside.

OutlinedTextField(
            value = login,
            onValueChange = { login = it },
            placeholder = { Text(stringResource(id = R.string.text_hint_login)) },
            shape = RoundedCornerShape(12.dp),
            colors = outlinedTextFieldColors,
            modifier = Modifier
                .fillMaxWidth()
                .padding(top = 18.dp)
                .shadow(elevation = 12.dp, RoundedCornerShape(12.dp))
        )

[Kirill Grouchnikov]

It's outside as well. This looks like the artifact of a non-opaque view with elevation. A component like a button with elevation would "hide" these artifacts since it's overdrawing them with its own opaque background fill.

[Anastasia Rozovskaya]

Yeah, I remember fixing this issue in old xml-based view by adding a background shape, but as you can see I’m struggling to use this life hack in compose

[Anastasia Rozovskaya]

If this would help anyone, I managed to solve the first problem by choosing the right order of extension functions .shadow() and .background() in Modifier:

modifier = Modifier
            .shadow(elevation = 12.dp)
            .background(color = AppTheme.colors.surface, RoundedCornerShape(12.dp))

[Anastasia Rozovskaya]

Finally, by adding onFocusChanged listener I managed to solve my issue. Here is the code:
1. created fields

var focusState by remember { mutableStateOf<FocusState?>(null) }
    val elevation: Dp = if (focusState?.isFocused == true) 0.dp else 12.dp

2. then used them in modifier like so

modifier = Modifier
            .onFocusChanged { focusState = it }
            .shadow(
                elevation = animateDpAsState(targetValue = elevation).value,
                shape = RoundedCornerShape(12.dp)
            )
            .background(color = AppTheme.colors.surface, RoundedCornerShape(12.dp))