CODEWITHSUNDEEP
androidandroid-jetpack-compose
Amir
Amir

Reputation: 1815

How to change Jectpack Compose BasicTextField's text color?

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...

Upvotes: 18

Views: 11740

Answers (3)

Moon Cheesez
Moon Cheesez

Reputation: 2701

If you want to use your current Material theme's colors so that it adapts to light and dark themes, you need to use LocalContentColor.current as well.

val localStyle = LocalTextStyle.current
val mergedStyle = localStyle.merge(TextStyle(color = LocalContentColor.current))
BasicTextField(
    textStyle = mergedStyle,
    cursorBrush = SolidColor(MaterialTheme.colorScheme.primary),
)

You probably also want to change the color of your cursor brush from the default black one. After some digging, I found that TextField uses the primary color (at least for Material 3).

Upvotes: 12

android_dev71
android_dev71

Reputation: 617

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?
    )

Upvotes: 5

Phil Dukhov
Phil Dukhov

Reputation: 87675

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)
)

Upvotes: 22

Related Questions