CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-material3
Ashwin
Ashwin

Reputation: 13547

How to make the background of TextField transparent?

I am using Jetpack Compose with material3. My screen looks like this. I want the text field to have a transparent background instead of the white background. I tried out the below code (see the line background(.. but it doesn't work. What am I missing here?

TextField(          
        value = userNameValue.value,
        onValueChange = { userNameValue.value = it },
        modifier = Modifier
            .fillMaxWidth()
            .background(
                Color.Transparent
            ),
        label = {
            Text(
                "Names" //stringResource(id = R.string.username_label)
            )
        }
}

enter image description here

Upvotes: 2

Views: 1175

Answers (2)

R AM
R AM

Reputation: 5

You can add this to your TextInputEditText

android:backround="@android:color/transparent"

The results (A M3 text field with transparent background)

Upvotes: -3

BenjyTec
BenjyTec

Reputation: 10887

The TextField Composable offers a colors parameter. It takes a value of type TextFieldColors that bundles all sorts of colors contained in a TextField.

In your case, please try to override all the colors that contain the word "Container", similar to this:

TextField(
    value = userNameValue.value,
    onValueChange = { userNameValue.value = it },
    modifier = Modifier.fillMaxWidth(),
    label = {
        Text(
            text = "Names" //stringResource(id = R.string.username_label)
        ),
    },
    colors = TextFieldDefaults.colors(
        focusedContainerColor = Color.Transparent,
        unfocusedContainerColor = Color.Transparent,
        disabledContainerColor = Color.Transparent,
        errorContainerColor = Color.Transparent
    )
}

Upvotes: 5

Related Questions