How to set/disable the OutlinedTextField focus?

user_16292512 0
Viewed 185

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
    )
}
android-jetpack-compose android
1 Answers

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
                )
            }
        )
    }
user_20165620
Related