I have an OutlinedTextField
and I want it to have a white background but only the TextField
. The thing is, when I add modifier = Modifier.background(color = AppWhite)
, not only the TextField
is white, but also what's surrounding it (see first attached image) and when I remove the modifier
, everything is green (like the second image).
This is my Composable:
Row(
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.Center
) {
OutlinedTextField(
shape = RoundedCornerShape(20.dp),
modifier = Modifier.background(color = AppWhite),
value = searchText,
onValueChange = { searchText = it },
label = {
Text(stringResource(R.string.searchHint))
},
.
.
.
)
Image(
modifier = Modifier.padding(top = 8.dp),
painter = painterResource(R.drawable.isotype_white),
contentDescription = null
)
}
How can I set only the TextField's background to white without having the extra white outside it??
You can set colors
for your OutlinedTextField
container using colors
parameter like this:
OutlinedTextField(
shape = RoundedCornerShape(20.dp),
value = searchText,
onValueChange = { searchText = it },
label = {
Text(stringResource(R.string.searchHint))
},
colors = OutlinedTextFieldDefaults.colors(
unfocusedContainerColor = Color.White,
focusedContainerColor = Color.White
)
)