androidkotlinandroid-studioandroid-jetpack-composeandroid-compose-textfield

Set Composable TextField's background color to white. Android Jetpack compose


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

enter image description here


Solution

  • 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
        )  
    )