https://kotlinlang.org logo
#compose
Title
# compose
a

Anastasia Rozovskaya

08/02/2021, 10:32 AM
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?
k

Kirill Grouchnikov

08/02/2021, 12:13 PM
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.
a

Anastasia Rozovskaya

08/02/2021, 1:09 PM
@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?
k

Kirill Grouchnikov

08/02/2021, 1:10 PM
How does it look like when you set background color and elevation?
a

Anastasia Rozovskaya

08/02/2021, 3:23 PM
Like the shadow is applied to inside area, not outside.
Copy code
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))
        )
k

Kirill Grouchnikov

08/02/2021, 3:50 PM
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.
a

Anastasia Rozovskaya

08/03/2021, 7:51 AM
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:
Copy code
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
Copy code
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
Copy code
modifier = Modifier
            .onFocusChanged { focusState = it }
            .shadow(
                elevation = animateDpAsState(targetValue = elevation).value,
                shape = RoundedCornerShape(12.dp)
            )
            .background(color = AppTheme.colors.surface, RoundedCornerShape(12.dp))
👍 1
🕺 1
2 Views