Remove corner background from the OutlinedTextField with a rounded corner border

Question

Compose Material 3

I am trying to create a OutlinedTextField that has rounded corners. However, the white background can still be seen squared as the background.

How can I remove this white background

This is my composable:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun EmailEntry(
    modifier: Modifier = Modifier,
    isValidEmail: Boolean,
    onEmailChange: (String) -> Unit
) {
    var emailValue by remember {
        mutableStateOf("")
    }

    OutlinedTextField(
        modifier = modifier.background(
            shape = RoundedCornerShape(10.dp),
            color = MaterialTheme.colorScheme.backgroundInputEntry
        ),
        singleLine = true,
        value = emailValue,
        onValueChange = { newInput ->
            emailValue = newInput
            onEmailChange(newInput)
        },
        placeholder = {
            Text(text = "Email address", color = MaterialTheme.colorScheme.placeholderEntry)
        },
        trailingIcon = {
            if (isValidEmail) {
                Image(
                    painter = painterResource(id = R.drawable.tick),
                    
                    contentDescription = "Valid email tick"
                )
            }
        },
        colors = TextFieldDefaults.outlinedTextFieldColors(
            focusedBorderColor = MaterialTheme.colorScheme.focusedInputEntryBorder,
            unfocusedBorderColor = Color.Transparent),
        shape = RoundedCornerShape(10.dp)
    )
}

@Composable @Preview(showBackground = true)

fun PreviewEmailEntryValidEmail() {
    Surface {
        EmailEntry(
            isValidEmail = true,
            onEmailChange = { email ->
                Log.d("EMAIL_ENTRY", email)
            }
        )
    }
}

It looks like the problem is somewhere on a higher level. Is there Surface filled with background color on the top level? — bylazy, Feb 22 '23 at 19:24
@bylazy You was correct. I was launching the composable wrapped in a surface. Everything was ok after I removed the surface — ant2009, Feb 23 '23 at 01:39
@bylazy If you add your answer that you posted in a commet I will select it as the correct answer. — ant2009, Sep 02 '23 at 08:04

score 0 · Answer 1 · answered Aug 14 '23 at 08:42

I see that it is solved by author, but I also want to show my other solution since it is solved my same problem.

Inside of OutlinedTextField, I was using modifier like that:

        modifier = Modifier
            .fillMaxWidth()
            .background(Color.White),

The problem was from there.

So, steps are:

Remove the .background(Color.White) line from modifier of OutlinedTextField.
Add colors parameter of OutlinedTextField like that:

colors = TextFieldDefaults.outlinedTextFieldColors(
           containerColor = Color.White
       )

Remove corner background from the OutlinedTextField with a rounded corner border

1 Answers1