CODEWITHSUNDEEP
androidandroid-jetpack-compose
AloneWalker
AloneWalker

Reputation: 99

How to set/disable the OutlinedTextField focus?

What I want:

  1. I want my OutlinedTextField to be always focused or disable the ability to focus.
  2. I want the OutlinedTextField to be RoundedCornerShape but when I use background it goes out of the shape.

My Code:

Column(modifier = Modifier
    .weight(1f)
    .background(Color.Gray)
    .clip(RoundedCornerShape(35.dp))

) {
    OutlinedTextField(
        value = "12",
        onValueChange = {},
        readOnly = true,
        shape = RoundedCornerShape(35.dp),
        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End),
        leadingIcon = { Icon(painter = painterResource(id = R.drawable.ic_coin), contentDescription = null)},
        modifier = Modifier
    )
}

Upvotes: 1

Views: 2804

Answers (1)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363439

Using enabled = false the text field will be neither editable nor focusable, the input of the text field will not be selectable, visually text field will appear in the disabled UI state readOnly.

To change the background color use the attribute backgroundColor in the TextFieldDefaults.outlinedTextFieldColors parameter:

    OutlinedTextField(
        value = "12",
        onValueChange = {},
        enabled = false,
        shape = RoundedCornerShape(35.dp),
        textStyle = LocalTextStyle.current.copy(textAlign = TextAlign.End),
        colors = TextFieldDefaults.outlinedTextFieldColors(
            backgroundColor = Color.Gray,
            disabledTextColor= LocalContentColor.current.copy(LocalContentAlpha.current),
        )
    )

enter image description here

If you want to wrap the component in a Column change the order of the modifiers:

Column(modifier = Modifier
    .clip(RoundedCornerShape(35.dp))
    .background(Color.Gray)
){
  //....
}

If you want to change the border width you have to use the version 1.2.x and the OutlinedTextFieldDecorationBox specifying the border attribute:

   BasicTextField(
      //....
    ) {
        OutlinedTextFieldDecorationBox(
            border = {
                TextFieldDefaults.BorderBox(
                    //...
                    unfocusedBorderThickness = 4.dp,
                    focusedBorderThickness = 4.dp
                )
            }
        )
    }

Upvotes: 1

Related Questions