How to set border color in jetpack compose BasicTextField?

Question

I use BasicTextField from package androidx.compose.foundation.text and it has a default grey field color as visible here:

I do not want this grey highlight, therefore I want to set the backgroundColor completely to black:

BasicTextField(
    modifier = Modifier
        .background(Color.Black)
)

But this does take effect only partially as visible here

There is a border still having grey color.

It is ok to keep the border dimensions, but I would like to have a complete black background as here

How can I manage this?

Edit: I tried to add a border() modifier with color = Color.Black - in vain.

why are you trying to pass `R.color.black`? You should use `Color.Black`. Or is this some extension of yours? `Modifier.background(Color.Black)` works fine to me — Phil Dukhov, Mar 14 '22 at 13:06

score 0 · Accepted Answer · answered Mar 15 '22 at 01:10

0

I'm not sure about the code of your Composable,please try:

@Composable
fun Simple() {
    var v by remember { mutableStateOf("Text") }
    Row(Modifier.background(Color.Black).padding(16.dp),verticalAlignment = Alignment.CenterVertically) {
        Icon(Icons.Filled.ArrowBack, contentDescription = "back",tint = Color.White)
        BasicTextField(
            v, { v = it },
            Modifier
                .weight(1f)
                .padding(start = 13.dp),
            textStyle = TextStyle(Color.White, 13.sp),
            singleLine = true
        )
    }
}

answered Mar 15 '22 at 01:10

Yshh

654
1
10

Shrinking you example @Composable fun Simple() { var v by remember { mutableStateOf("Text") } BasicTextField( v, { v = it }, Modifier .background(Color.Black) .padding(start = 13.dp), textStyle = TextStyle(Color.White, 13.sp), singleLine = true ) } did the same. – Ralf Wickum Mar 15 '22 at 07:48
yes, I'm just writing according to the picture, add Icons arrowback – Yshh Mar 16 '22 at 00:51

How to set border color in jetpack compose BasicTextField?

1 Answers1