Placeholders show the hint text for users and help to identify what to enter into the TextField. In this Android Jetpack Compose tutorial, let’s learn how to change the TextField placeholder color.
We can use textFieldColors with TextField composable to change the default placeholder color. See the code snippet given below.
@Composable
fun TextFieldExample() {
var value by remember { mutableStateOf("") }
TextField(
value = value,
placeholder = { Text("Enter text") },
onValueChange = {
value = it
},
colors = TextFieldDefaults.textFieldColors(placeholderColor = Color.Red,
disabledPlaceholderColor = Color.Gray),
modifier = Modifier.padding(20.dp)
)
}You can make use of two parameters- placeholderColor and disabledPlaceholderColor. Following is the output.
In the same way, you can also change the TextField label color.
The complete code is given below.
package com.example.myapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.myapplication.ui.theme.MyApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
MyApplicationTheme {
Surface(
color = MaterialTheme.colors.background,
modifier = Modifier.fillMaxWidth()
) {
TextFieldExample()
}
}
}
}
}
@Composable
fun TextFieldExample() {
var value by remember { mutableStateOf("") }
TextField(
value = value,
placeholder = { Text("Enter text") },
onValueChange = {
value = it
},
colors = TextFieldDefaults.textFieldColors(placeholderColor = Color.Red,
disabledPlaceholderColor = Color.Gray),
modifier = Modifier.padding(20.dp)
)
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
TextFieldExample()
}
}
I hope you liked this Jetpack Compose TextField placeholder color tutorial.
