TextField is a very important UI element. It helps users to input relevant data through text. Thus, styling TextField properly increases the appeal of your mobile app. Here, let’s check how to use a custom TextField label color in Jetpack Compose.
The textFieldColors function helps us to change the default colors of TextField composable. You can change label color using four parameters- focusedLabelColor, unfocusedLabelColor, disabledLabelColor, and errorLabelColor. These are label colors for different scenarios.
@Composable
fun TextFieldExample() {
var value by remember { mutableStateOf("") }
TextField(
value = value,
placeholder = { Text("Enter text") },
onValueChange = {
value = it
},
colors = TextFieldDefaults.textFieldColors(unfocusedLabelColor = Color.Red,
focusedLabelColor = Color.Red, disabledLabelColor = Color.Gray, errorLabelColor = Color.Red ),
label = { Text("Enter text") },
modifier = Modifier.padding(20.dp)
)
}Following is the output. It shows the defined label color when TextField is focused.
Following is the complete code for reference.
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(unfocusedLabelColor = Color.Red,
focusedLabelColor = Color.Red, disabledLabelColor = Color.Gray, errorLabelColor = Color.Red ),
label = { Text("Enter text") },
modifier = Modifier.padding(20.dp)
)
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
MyApplicationTheme {
TextFieldExample()
}
}
I hope this Jetpack Compose TextField label color is helpful for you.
