Mobile development

Stage 2 · Lesson 9 of 10

TextField and forms

Jetpack Compose UI

TextField and OutlinedTextField are hoisted: you pass in value and onValueChange, and keep the text in state yourself. keyboardOptions sets the keyboard type (Email, Number, Password) and the action key (Next or Done). keyboardActions reacts to that key, for example by moving focus with LocalFocusManager.current.moveFocus.

visualTransformation = PasswordVisualTransformation() hides passwords. Show errors with isError and supportingText, ideally after the user leaves the field or taps submit. Newer versions also offer a state-based TextField with TextFieldState, so check which one your tutorial uses.

Common trapa that does not scroll or use imePadding, so the keyboard hides the button.

A question to check yourself, an AI practice session and 1 cheat sheet entry come with the full roadmap. Unlock

Resources for this stage

Start with

Practise

  • Use a free challenge's mobile design image as the spec for a native screen

Keep handy

  • Spacing, type scale, colour and component specs your screens should follow

Mark this stage as not done?