Jetpack Compose: No background in OutlinedTextField-CodePudding

I have two layers in my compose layout: One for the actual content and the one above is a Box-wrapped OutlinedTextField for search queries. Here's the sample code:

// Placeholder for layout content
Box(modifier = Modifier.fillMaxSize()) {
    Text(
        text = stringResource(id = R.string.lorem_ipsum),
        color = Color.Gray
    )
}

// Overlaying Box with OutlinedTextField
Box(modifier = Modifier
    .padding(start = 16.dp, end = 16.dp, bottom = 16.dp, top = 64.dp)
) {
    OutlinedTextField(
        value = viewModel.query.value,
        onValueChange = { viewModel.updateQuery(it) },
        modifier = Modifier
            .fillMaxWidth()
            .align(Alignment.BottomCenter)
            .navigationBarsWithImePadding(),
        keyboardOptions = KeyboardOptions(
            capitalization = KeyboardCapitalization.Characters,
            autoCorrect = false,
            keyboardType = KeyboardType.Text,
            imeAction = ImeAction.None
        ),
        shape = CircleShape,
        colors = TextFieldDefaults.textFieldColors(
            backgroundColor = Color.White
        ),
        placeholder = { Text(stringResource(id = R.string.search_input_placeholder)) },
        maxLines = 1,
        singleLine = true
    )
}

Even though i'm setting

colors = TextFieldDefaults.textFieldColors(
        backgroundColor = Color.White
    )

in the OutlinedTextField the background stays transparent as you can see in the following screenshot:

Adding a background color on the OutlinedTextField's modifier is giving the whole row a rectangled background, which is also not the desired result.

The OutlinedTextField with it's CircleShape should only have a background inside of the shape, how can i achieve that?

CodePudding user response：

I think this happens because the OutlinedTextField is not filled, and essentially has no real background.

From

CodePudding user response：

Reason

Unfortunately, in version 1.0.4, OutlinedTextField ignores the backgroundColor even if you specify it, so you can remove the colors parameter.

Support for it will be added in 1.1.0: