A modern programming language that makes developers happier.

kotlinlang

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.

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

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

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

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.

Screenshot 2021-08-02 at 15.59.13.png

Screenshot 2021-08-02 at 15.58.58.png

<@UHED82QLX> 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?

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

Screenshot 2021-08-02 at 18.21.05.png

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))
        )```

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.

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

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))```

Finally, by adding `onFocusChanged` listener I managed to solve my issue. Here is the code:
1. created fields
```var focusState by remember { mutableStateOf&lt;FocusState?&gt;(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))```