Anastasia Rozovskaya
08/02/2021, 10:32 AMOutlinedTextField
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.Kirill Grouchnikov
08/02/2021, 12:13 PMAnastasia Rozovskaya
08/02/2021, 1:09 PMbackgroudColor
or shape
. Could you please explain in more details about the fully painted background for the OutlinedTextField particularly?Kirill Grouchnikov
08/02/2021, 1:10 PMAnastasia Rozovskaya
08/02/2021, 3:23 PMOutlinedTextField(
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
08/02/2021, 3:50 PMAnastasia Rozovskaya
08/03/2021, 7:51 AM.shadow()
and .background()
in Modifier:
modifier = Modifier
.shadow(elevation = 12.dp)
.background(color = AppTheme.colors.surface, RoundedCornerShape(12.dp))
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))