Is it possible to give an `OutlinedTextField` elevation with

Question

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 · Answer

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 · Answer

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 · Answer

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

Kirill Grouchnikov · Answer

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 · Answer

< 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 · Answer

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

Anastasia Rozovskaya · Answer

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 · Answer

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 · Answer

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 · Answer

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 · Answer

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