Reimagining text fields in Compose (dcNYC 23)

Slide 1

Slide 1 text

Reimagining text fields in Compose Zach Klippenstein (he/him), Google droidcon NYC 2023

Slide 2

Slide 2 text

refresher: TextField var text by remember { mutableStateOf("") } TextField( text, onValueChange = { text = it } )

Slide 3

Slide 3 text

refresher: BasicTextField var text by remember { mutableStateOf("") } BasicTextField( text, onValueChange = { text = it } )

Slide 4

Slide 4 text

refresher: BasicTextField BasicTextField( text, onValueChange = { text = it } )

Slide 5

Slide 5 text

refresher: BasicTextField var text by remember { mutableStateOf("") }

Slide 6

Slide 6 text

It’s got some bugs…

Slide 7

Slide 7 text

Tech debt

Slide 8

Slide 8 text

State management class ViewModel { val text = MutableStateFlow("") fun onTextUpdated(text: String) { // suspending call if (validate(text)) { text.value = text } } }

Slide 9

Slide 9 text

State mismanagement

Slide 10

Slide 10 text

State (mis)management VisualTransformation Single/min/max lines Detecting individual edits …

Slide 11

Slide 11 text

Back to first principles…

Slide 12

Slide 12 text

Plan to plan scoping & estimates

Slide 13

Slide 13 text

Project kick-off brainstorming

Slide 14

Slide 14 text

User study early validation – diverse backgrounds – interviews + take-home project – more info in previous talk: – bit.ly/3LnNqrI sign up: – goo.gle/AndroidDevUX

Slide 15

Slide 15 text

New APIs feedback requested!

Slide 16

Slide 16 text

caveat: Under construction! BasicTextField v2 State Filtering Visual transformations Passwords Line limits Scrolling

Slide 17

Slide 17 text

BasicTextField v2 var text by remember { mutableStateOf("") } BasicTextField( text, onValueChanged = { text = it } ) becomes var text by remember { mutableStateOf("") } BasicTextField( text, onValueChanged = { text = it } )

Slide 18

Slide 18 text

BasicTextField v2 var text by remember { mutableStateOf("") } BasicTextField( text, onValueChanged = { text = it } ) becomes val state: TextFieldState = rememberTextFieldState("") BasicTextField(state)

Slide 19

Slide 19 text

BasicTextField v2 val text = rememberTextFieldState("hello") is essentially val text = remember(TextFieldState.Saver) { TextFieldState("hello") }

Slide 20

Slide 20 text

Reading text var text by remember { mutableStateOf("") } … Text("Hello $text!") becomes val state = rememberTextFieldState("") … Text("Hello ${state.text}!")

Slide 21

Slide 21 text

State hoisting currently class ViewModel { var textState by mutableStateOf("") }

Slide 22

Slide 22 text

State hoisting …becomes class ViewModel { val textState = TextFieldState("") } @Composable fun Screen(viewModel: ViewModel) { TextField(viewModel.textState) }

Slide 23

Slide 23 text

Observing changes currently class ViewModel { private var textState by mutableStateOf("") suspend fun run() { snapshotFlow { textState } .collectLatest { processText(it) } } }

Slide 24

Slide 24 text

Observing changes becomes class ViewModel { val textState = TextFieldState("") suspend fun run() { textState.textAsFlow() .collectLatest { processText(it) } // or textState.forEachTextValue { processText(it) } } }

Slide 25

Slide 25 text

Observing changes example: debouncing textState.textAsFlow() .debounce(500) .collectLatest { runSearch(it) } // or textState.forEachTextValue { delay(500) runSearch(it) }

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

Inserting/deleting text text = buildString { append(text) deleteRange(2, 6) insert(10, "foo") } becomes textState.edit { delete(2, 6) insert(10, "foo") }

Slide 28

Slide 28 text

TextFieldState @Stable class TextFieldState( initialText: String = "", initialSelection: TextRange = … ) { val text: CharSequence val selection: TextRange fun edit(block: TextFieldBuffer.() -> Unit) }

Slide 29

Slide 29 text

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… }

Slide 30

Slide 30 text

State Snapshot-backed (@Stable) Observe via snapshots or flows Edit via mutable buffer Hoistable

Slide 31

Slide 31 text

Filtering currently BasicTextField( text, onValueChange = { if (it.isDigitsOnly()) { text = it } } )

Slide 32

Slide 32 text

Filtering …becomes BasicTextField( text, inputTransformation = { replace("""\D""".toRegex(), "") } )

Slide 33

Slide 33 text

Filtering …or factored out object DigitsOnly : InputTransformation { override fun TextFieldBuffer.transformInput() { replace("""\D""".toRegex(), "") } }

Slide 34

Slide 34 text

Filtering built-in BasicTextField( state, inputTransformation = InputTransformation.digitsOnly() )

Slide 35

Slide 35 text

Filtering chaining BasicTextField( state, inputTransformation = digitsOnly() then maxChars(10) )

Slide 36

Slide 36 text

Filtering keyboard BasicTextField( state, inputTransformation = digitsOnly(), keyboardOptions = KeyboardOptions( keyboardType = Number ) )

Slide 37

Slide 37 text

Filtering keyboard object DigitsOnly : InputTransformation { override val keyboardOptions = KeyboardOptions( keyboardType = Number ) override fun TextFieldBuffer.transformInput() { … } }

Slide 38

Slide 38 text

InputTransformation definition fun interface InputTransformation { val keyboardOptions: KeyboardOptions? get() = null fun TextFieldBuffer.transformInput() }

Slide 39

Slide 39 text

example Formatting a phone number

Slide 40

Slide 40 text

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 }

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

No content

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

OutputTransformation example BasicTextField2( state, outputTransformation = { if (length > 0) insert(0, "(") if (length > 4) insert(4, ") ") if (length > 9) insert(9, "-") } )

Slide 45

Slide 45 text

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) )

Slide 46

Slide 46 text

OutputTransformation fun interface OutputTransformation { fun TextFieldBuffer.transformOutput() }

Slide 47

Slide 47 text

Passwords currently BasicTextField( password, onValueChange = { password = it }, visualTransformation = PasswordVisualTransformation(), )

Slide 48

Slide 48 text

Passwords currently BasicTextField( password, onValueChange = { password = it }, visualTransformation = PasswordVisualTransformation(), modifier = Modifier.semantics { password() }, keyboardOptions = KeyboardOptions( keyboardType = Password ) )

Slide 49

Slide 49 text

Passwords …becomes BasicSecureTextField(state) Obfuscated text (customizable) – No cut/copy/drag (paste allowed) – IME password mode – Autofill support (planned) –

Slide 50

Slide 50 text

Line limits no more nonsense BasicTextField( …, singleLine = true, minLines = 5, maxLines = 10 )

Slide 51

Slide 51 text

Line limits BasicTextField( …, singleLine = true ) becomes BasicTextField( …, lineLimits = SingleLine )

Slide 52

Slide 52 text

Line limits BasicTextField( …, singleLine = false, maxLines = 10 ) becomes BasicTextField( …, lineLimits = MultiLine(maxHeightInLines = 10) )

Slide 53

Slide 53 text

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 –

Slide 54

Slide 54 text

ScrollState val state = rememberTextFieldState("") val scrollState = rememberScrollState() BasicTextField( state, scrollState = scrollState ) LaunchedEffect(scrollState) { scrollState.scrollTo(…) } Horizontal in SingleLine mode – Vertical in MultiLine mode –

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

Contact Kotlin Slack: # Socials: compose issuetracker.google.com – androiddev.social/@zachklipp – twitter.com/@halilozercan Slides bit.ly/3PboGEk