How to change TextField Label Color in Android Jetpack Compose

By Mohammed Rashid •  November 23rd, 2022 • 

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.

TextField label color jetpack compose

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.

Mohammed Rashid

Keep Reading