skip to Main Content

I don’t know what happened even though I copy exactly the code from Android Developer Team official Youtube. The textfield turns red BUT when I remove color = Color.black in SearchBarcomposable, everything works fine. Help me

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MySootheApp()
        }
    }
}


@Composable
fun SearchBar(
    modifier: Modifier = Modifier
) {
    TextField(
        value = "",
        onValueChange = {},
        color = Color.Black,
        leadingIcon = { Icon(Icons.Default.Search , contentDescription = null) },
        placeholder = { Text(text = "Search Here") },
        modifier = Modifier
            .heightIn(min = 56.dp)
            .fillMaxWidth(),

    )
}

I have tried to remove color = Color.Black and it works fine

3

Answers


  1. You can manage color of TextField like this in jetpack compose

    TextField(
       ...
       textStyle = TextStyle(color = Color.Blue) 
    )
    
    Login or Signup to reply.
  2. Your TextField background shows red because you wrap the SearchBar composable using Surface composable. Which take Surface color of red set on theme.kt file.

    If you want to change background color of TextField .

    TextField(
                value = "",
                onValueChange = {},
                colors = TextFieldDefaults.textFieldColors(backgroundColor = Color.Blue ),
                leadingIcon = { Icon(Icons.Default.Search , contentDescription = null) },
                modifier = Modifier
                    .height(56.dp)
                    .fillMaxWidth(),
            )
    
    Login or Signup to reply.
  3. If you want to change the color in the M2 TextField you can use:

    TextField(
        //...
        colors = TextFieldDefaults.textFieldColors(textColor = Black)
     )
    

    The color attribute doesn’t exist in the TextField.

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search