Thread
#compose
    Anastasia Rozovskaya

    Anastasia Rozovskaya

    1 year ago
    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

    1 year ago
    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.
    Anastasia Rozovskaya

    Anastasia Rozovskaya

    1 year ago
    @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

    1 year ago
    How does it look like when you set background color and elevation?
    Anastasia Rozovskaya

    Anastasia Rozovskaya

    1 year ago
    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))
            )
    k

    Kirill Grouchnikov

    1 year ago
    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

    Anastasia Rozovskaya

    1 year ago
    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<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))