An indicator line in a TextField helps users quickly identify whether the input is focused or not. It also helps to give distinguish color when an error occurs during validation. Let’s learn how to change the default indicator color of TextField in Jetpack Compose.
Using textFieldColors you can change placeholder color, label color, indicator color, etc. See the code snippet given below.
@Composable
fun TextFieldExample() {
var value by remember { mutableStateOf("") }
TextField(
value = value,
onValueChange = { value = it },
maxLines = 2,
colors = TextFieldDefaults.textFieldColors(focusedIndicatorColor = Color.Red,
disabledIndicatorColor = Color.Gray, errorIndicatorColor = Color.Gray,
unfocusedIndicatorColor = Color.Gray),
modifier = Modifier.padding(20.dp)
)
}As you see, you can customize the indicator colors for different scenarios of focus and error. Following is the output where TextField is focused.
Following is the complete code.
package com.example.composeapplication
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
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.composeapplication.ui.theme.ComposeApplicationTheme
class MainActivity : ComponentActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContent {
ComposeApplicationTheme {
Surface(
modifier = Modifier.fillMaxWidth(),
color = MaterialTheme.colors.background
) {
TextFieldExample()
}
}
}
}
}
@Composable
fun TextFieldExample() {
var value by remember { mutableStateOf("") }
TextField(
value = value,
onValueChange = { value = it },
maxLines = 2,
colors = TextFieldDefaults.textFieldColors(focusedIndicatorColor = Color.Red,
disabledIndicatorColor = Color.Gray, errorIndicatorColor = Color.Gray,
unfocusedIndicatorColor = Color.Gray),
modifier = Modifier.padding(20.dp)
)
}
@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
ComposeApplicationTheme {
TextFieldExample()
}
}That’s how you change the TextField indicator color in Jetpack Compose.
