Formatting numbers in compose TextField

Question

I am trying to create a reusable NumberField component:

@Composable
fun NumberField(
  value: Number?,
  onNumberChange: (Number) -> Unit,
) {
  TextField(
    value = value?.toString() ?: "",
    onValueChange = {
      it.toDoubleOrNull()?.let { value ->
        if (value % 1.0 == 0.0) {
          onNumberChange(value.toInt())
        } else {
          onNumberChange(value)
        }
      }
    },
    singleLine = true,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
  )
}

To be used as:

@Composable
fun NumberContent() {
  val number = remember { mutableStateOf<Number?>(null) }

  NumberField(value = number.value) {
    number.value = it
  }
}

I would like the number to be an Int or Double depending on what the user is typing. What I have above works until you try to enter a decimal number, as it seems "5.", does not parse as double. I want to allow the user to type 5. and then fill in rest. As such I don't want to add a zero after decimal automatically because that might not be the next number they want to enter. Is this the best way to go about it? I know that I can just accept any text and then try to format the text they entered later as an int or double and make them fix it then, just thought it would be nice to bundle it all in the composable.

The question is not clear. What do you want to display when the user type: `5.` ? — Gabriele Mariotti, May 19 '21 at 06:16
To be honest I don't understand what you are trying to achieve (if the user types `5.` the default field just displays `5.`). In any case don't use `onValueChange`, but use the `visualTrasformation` — Gabriele Mariotti, May 19 '21 at 12:38
I would like to limit to only numbers. If the user types 5.Urdu that’s invalid, they should not be able to type that. Or 5.74.64.62 or &@. I would like to restrict the field to only numbers, ints and doubles. — lostintranslation, May 19 '21 at 12:48

Gabriele Mariotti · Answer 1 · 2021-05-31T07:31:12.680

14

You can use something like:

TextField(
    value = text,
    onValueChange = {
        if (it.isEmpty()){
            text = it
        } else {
            text = when (it.toDoubleOrNull()) {
                null -> text //old value
                else -> it   //new value
            }
        }
    },
    singleLine = true,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
)

edited May 31 '21 at 07:31

answered May 30 '21 at 20:42

Gabriele Mariotti

320,139
94
887
841

Om Kumar · Answer 2 · 2021-05-31T18:10:36.980

Here is an implementation that handles all stated conditions while also exposing the state to parents.

@Composable
fun NumberField(
    value: Number?,
    onNumberChange: (Number?) -> Unit,
) {
    val number = remember { mutableStateOf(value) }
    val textValue = remember(value != number.value) {
        number.value = value
        mutableStateOf(value?.toDouble()?.let {
            if (it % 1.0 == 0.0) {
                it.toInt().toString()
            } else {
                it.toString()
            }
        } ?: "")
    }

    val numberRegex = remember { "[-]?[\\d]*[.]?[\\d]*".toRegex() }
    // for no negative numbers use "[\d]*[.]?[\d]*"

    TextField(
        value = textValue.value,
        onValueChange = {
            if (numberRegex.matches(it)) {
                textValue.value = it
                number.value = it.toDoubleOrNull()
                onNumberChange(number.value)
            }
        },
        singleLine = true,
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number)
    )
}

An example usage is shown below.

@Composable
fun DemoUsage() {
    Column {
        val number = remember { mutableStateOf<Number?>(null) }
        
        NumberField(value = number.value) {
            number.value = it
        }

        Button(onClick = { number.value = number.value?.toDouble()?.plus(1) }) {
            Text("Increment")
        }
    }
}

Formatting numbers in compose TextField

2 Answers2