CODEWITHSUNDEEP
androidandroid-jetpack-composeandroid-jetpack-compose-material3outlined-text-fields
Neglected Sanity
Neglected Sanity

Reputation: 1434

OutlinedTextField placeholder, not changing color in Jetpack Compose

I've been trying to get the placeholder text inside of an OutlinedTextField to change color and it is just staying black, no matter what I do. I am using M3 theme and components. I can get everything else to change (text color, border color, etc), just not the placeholder. In my Color.kt file I define all the colors, one of them being onSurface...

val md_theme_dark_onSurface = Color(red = 140, green = 207, blue = 242)

Then in my LoginView.kt I am trying to use that to tell the placeholder what color to be...

val textFieldColor = OutlinedTextFieldDefaults.colors(
  focusedPlaceholderColor = MaterialTheme.colorScheme.onSurface,
  unfocusedPlaceholderColor = MaterialTheme.colorScheme.onSurface
)

Then set the colors of the outlined text field...

OutlinedTextField(
  value = uiState.username,
  keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
  onValueChange = { viewModel.setUsername(it) },
  placeholder = { Text("Username") },
  leadingIcon = {
    Image(painter = painterResource(id = R.drawable.user), contentDescription = null)
  },
  colors = textFieldColor
)

One would think that would change the placeholder in the text field, but it does not. I still get a black placeholder. The border and image are correctly colored and change when focused/unfocused but the placeholder stays black, even in Dark theme.

enter image description here

What can I try next?

Upvotes: 2

Views: 1120

Answers (2)

Mohamed Mohamed Taha
Mohamed Mohamed Taha

Reputation: 172

You can use

focusedLabelColor = your color, unfocusedLabelColor = your color

, it will work.

Upvotes: 0

Sasi Kumar
Sasi Kumar

Reputation: 13358

use this code, tested its working

   OutlinedTextField(
        value ="hello",
        keyboardOptions = KeyboardOptions(imeAction = ImeAction.Next),
        onValueChange = {"ssss"},
        placeholder = { Text("Username") },
        leadingIcon = {
            Image(painter = painterResource(id = R.drawable.ic_settings_black_24dp), contentDescription = null)
        },
        colors = TextFieldDefaults.colors(
            focusedPlaceholderColor = Color.Red,
            unfocusedTextColor = Color.Green

        )
    )

Upvotes: 0

Related Questions