Reimagining text fields in Compose (dcNYC 23)

The Compose Text team is completely rethinking the text field APIs from scratch. Come learn why, how we're approaching the process, and get a sneak peak at what the future might look like.

Transcript

1. Reimagining text fields in Compose Zach Klippenstein (he/him), Google droidcon NYC 2023
2. refresher: TextField var text by remember { mutableStateOf("") } TextField( text, onValueChange = { text = it } )
3. refresher: BasicTextField var text by remember { mutableStateOf("") } BasicTextField( text, onValueChange = { text = it } )
4. refresher: BasicTextField BasicTextField( text, onValueChange = { text = it } )
5. refresher: BasicTextField var text by remember { mutableStateOf("") }
6. It’s got some bugs…
7. Tech debt
8. State management class ViewModel { val text = MutableStateFlow("") fun onTextUpdated(text: String) { // suspending call if (validate(text)) { text.value = text } } }
9. State mismanagement
10. State (mis)management VisualTransformation Single/min/max lines Detecting individual edits …
11. Back to first principles…
12. Plan to plan scoping & estimates
13. Project kick-off brainstorming
14. User study early validation – diverse backgrounds – interviews + take-home project – more info in previous talk: – bit.ly/3LnNqrI sign up: – goo.gle/AndroidDevUX
15. New APIs feedback requested!
16. caveat: Under construction! BasicTextField v2 State Filtering Visual transformations Passwords Line limits Scrolling
17. BasicTextField v2 var text by remember { mutableStateOf("") } BasicTextField( text, onValueChanged = { text = it } ) becomes var text by remember { mutableStateOf("") } BasicTextField( text, onValueChanged = { text = it } )
18. BasicTextField v2 var text by remember { mutableStateOf("") } BasicTextField( text, onValueChanged = { text = it } ) becomes val state: TextFieldState = rememberTextFieldState("") BasicTextField(state)
19. BasicTextField v2 val text = rememberTextFieldState("hello") is essentially val text = remember(TextFieldState.Saver) { TextFieldState("hello") }
20. Reading text var text by remember { mutableStateOf("") } … Text("Hello $text!") becomes val state = rememberTextFieldState("") … Text("Hello ${state.text}!")
21. State hoisting currently class ViewModel { var textState by mutableStateOf("") }
22. State hoisting …becomes class ViewModel { val textState = TextFieldState("") } @Composable fun Screen(viewModel: ViewModel) { TextField(viewModel.textState) }
23. Observing changes currently class ViewModel { private var textState by mutableStateOf("") suspend fun run() { snapshotFlow { textState } .collectLatest { processText(it) } } }
24. Observing changes becomes class ViewModel { val textState = TextFieldState("") suspend fun run() { textState.textAsFlow() .collectLatest { processText(it) } // or textState.forEachTextValue { processText(it) } } }
25. Observing changes example: debouncing textState.textAsFlow() .debounce(500) .collectLatest { runSearch(it) } // or textState.forEachTextValue { delay(500) runSearch(it) }
26. Setting text class ViewModel { private var textState by mutableStateOf("") fun prefill(text: String) { textState = prefill } } becomes class ViewModel { val textState = TextFieldState("") fun prefill(text: String) { textState.setTextAndPlaceCursorAtEnd(text) } }
27. Inserting/deleting text text = buildString { append(text) deleteRange(2, 6) insert(10, "foo") } becomes textState.edit { delete(2, 6) insert(10, "foo") }
28. TextFieldState @Stable class TextFieldState( initialText: String = "", initialSelection: TextRange = … ) { val text: CharSequence val selection: TextRange fun edit(block: TextFieldBuffer.() -> Unit) }
29. TextFieldBuffer aka “StringBuilder with selection” class TextFieldBuffer: Appendable { val length: Int val selection: TextRange fun append(text: CharSequence?) fun replace(start: Int, end: Int, text: CharSequence) fun insert(index: Int, text: CharSequence) fun delete(start: Int, end: Int) fun replace(regex: Regex, text: CharSequence) fun setSelection(range: TextRange) fun placeCursorBeforeCharAt(offset: Int) // lots more to come… }
30. State Snapshot-backed (@Stable) Observe via snapshots or flows Edit via mutable buffer Hoistable
31. Filtering currently BasicTextField( text, onValueChange = { if (it.isDigitsOnly()) { text = it } } )
32. Filtering …becomes BasicTextField( text, inputTransformation = { replace("""\D""".toRegex(), "") } )
33. Filtering …or factored out object DigitsOnly : InputTransformation { override fun TextFieldBuffer.transformInput() { replace("""\D""".toRegex(), "") } }
34. Filtering built-in BasicTextField( state, inputTransformation = InputTransformation.digitsOnly() )
35. Filtering chaining BasicTextField( state, inputTransformation = digitsOnly() then maxChars(10) )
36. Filtering keyboard BasicTextField( state, inputTransformation = digitsOnly(), keyboardOptions = KeyboardOptions( keyboardType = Number ) )
37. Filtering keyboard object DigitsOnly : InputTransformation { override val keyboardOptions = KeyboardOptions( keyboardType = Number ) override fun TextFieldBuffer.transformInput() { … } }
38. InputTransformation definition fun interface InputTransformation { val keyboardOptions: KeyboardOptions? get() = null fun TextFieldBuffer.transformInput() }
39. example Formatting a phone number
40. Visual transformations currently fun interface VisualTransformation { fun filter(text: AnnotatedString): TransformedText } class TransformedText( val text: AnnotatedString, val offsetMapping: OffsetMapping ) interface OffsetMapping { fun originalToTransformed(offset: Int): Int fun transformedToOriginal(offset: Int): Int }
44. OutputTransformation example BasicTextField2( state, outputTransformation = { if (length > 0) insert(0, "(") if (length > 4) insert(4, ") ") if (length > 9) insert(9, "-") } )
45. OutputTransformation with InputTransformation BasicTextField2( state, outputTransformation = { if (length > 0) insert(0, "(") if (length > 4) insert(4, ") ") if (length > 9) insert(9, "-") }, inputTransformation = digitsOnly() then maxChars(10) )
46. OutputTransformation fun interface OutputTransformation { fun TextFieldBuffer.transformOutput() }
47. Passwords currently BasicTextField( password, onValueChange = { password = it }, visualTransformation = PasswordVisualTransformation(), )
48. Passwords currently BasicTextField( password, onValueChange = { password = it }, visualTransformation = PasswordVisualTransformation(), modifier = Modifier.semantics { password() }, keyboardOptions = KeyboardOptions( keyboardType = Password ) )
49. Passwords …becomes BasicSecureTextField(state) Obfuscated text (customizable) – No cut/copy/drag (paste allowed) – IME password mode – Autofill support (planned) –
50. Line limits no more nonsense BasicTextField( …, singleLine = true, minLines = 5, maxLines = 10 )
51. Line limits BasicTextField( …, singleLine = true ) becomes BasicTextField( …, lineLimits = SingleLine )
52. Line limits BasicTextField( …, singleLine = false, maxLines = 10 ) becomes BasicTextField( …, lineLimits = MultiLine(maxHeightInLines = 10) )
53. Line limits SingleLine MultiLine(min, max) Never wraps – No newlines – Fixed height – Horizontal scrolling – Wraps long lines – Newlines allowed – Height shrinks and grows – Vertical scrolling –
54. ScrollState val state = rememberTextFieldState("") val scrollState = rememberScrollState() BasicTextField( state, scrollState = scrollState ) LaunchedEffect(scrollState) { scrollState.scrollTo(…) } Horizontal in SingleLine mode – Vertical in MultiLine mode –
55. Recap BasicTextField2 – TextFieldState + TextFieldBuffer – InputTransformation – OutputTransformation – BasicSecureTextField – LineLimits – ScrollState – also… User studies are great! Sign up: Available in 1.6.x alphas goo.gle/AndroidDevUX
56. Contact Kotlin Slack: # Socials: compose issuetracker.google.com – androiddev.social/@zachklipp – twitter.com/@halilozercan Slides bit.ly/3PboGEk