How to change Jectpack Compose BasicTextField's text color?

user_5809144 0
Viewed 812

I'm trying to make a search bar using BasicTextField.
The default text color is black and I couldn't find any option to change the text color.
Also I need to change the text size, font and other attributes.

@Composable
fun MyBasicTextField(){
    var text by remember { mutableStateOf("Hello") }
    BasicTextField(
        value = text,
        onValueChange = {
            text = it
        },
        decorationBox = { ... },
        modifier = Modifier
            .fillMaxWidth()
            .background(Color.DarkGray, CircleShape)
            .padding(10.dp)
    )
}

Jetpack Compose BasicTextField

If this is not possible through BasicTextField, is there any other approach to create similar view?
I have tried TextField but there was several problems like removing label, height, background...

android-jetpack-compose android
2 Answers

You need textStyle parameter. If you prefer using default text style, use LocalTextStyle:

BasicTextField(
    // ...
    textStyle = LocalTextStyle.current.copy(color = Color.White)
)

Or you can use one of material styles:

BasicTextField(
    // ...
    textStyle = MaterialTheme.typography.body1.copy(color = Color.White)
)
user_35857960

In addition to other answer, this worked for me in adding textStyle property:

textStyle = TextStyle(
                        color = Color.White, 
                        fontFamily = FontFamily.SansSerif,
                        fontSize = 14.sp,
                        textAlign = TextAlign.Center,
                    )

here is all the TextStyle attributes that you can set :

https://developer.android.com/reference/kotlin/androidx/compose/ui/text/TextStyle

public constructor TextStyle(
        color: Color,
        fontSize: TextUnit,
        fontWeight: FontWeight?,
        fontStyle: FontStyle?,
        fontSynthesis: FontSynthesis?,
        fontFamily: FontFamily?,
        fontFeatureSettings: String?,
        letterSpacing: TextUnit,
        baselineShift: BaselineShift?,
        textGeometricTransform: TextGeometricTransform?,
        localeList: LocaleList?,
        background: Color,
        textDecoration: TextDecoration?,
        shadow: Shadow?,
        textAlign: TextAlign?,
        textDirection: TextDirection?,
        lineHeight: TextUnit,
        textIndent: TextIndent?
    )
user_58038110
Related