AppBar
The top bar: context on the leading side, global actions on the trailing side, and (on the tablet) the editing tools in between.
Consumer provides: the context (title + date, or Back + editor name), the global actions in the user's order, and in editors the editing tools.
Phone
- Screens: 64 dp. Title (
phone-title-large) with the date under it (phone-body-small,muted); global actions trailing in the user's order (default: Saved meeting notes, Topics, Calendar, Search, Sync, Settings). They fold into ⋮ from the start of the order when the title column would drop below 96 dp; Sync never folds. - Editors: 56 dp. Back + editor name (
phone-title-medium); the global actions fold into ⋮ ("More: …"), but Sync never folds. Editing tools live in the bottom EditorToolBar, not here. - When space is tight, actions fold into ⋮ from the leading end of the group, in the user's order.
Tablet
48 dp, three zones divided by 1 × 24 dp divider ticks:
- Left / context: Back (meetings, topics, calendar-opened journals) and the title (the topic name in a topic), which ellipsizes first and drops under 48 dp; on the overview, the period date (22 sp, at least 120 dp) + ‹ › + a borderless view dropdown (Month → 3 days → 5 days → Day).
- Editing tools: right-aligned against the global group, in order Pen, Eraser, Presets, Lasso │ Undo, Redo │ ‹ 2/3 › │ Add, Delete, kinds separated by 1 × 24 dp ticks. Show the longest prefix that fits with 48 dp kept for »; the rest goes to the ToolTray in the same order.
- Global group: 6 × 48 dp + 8 dp end padding + 17 dp separator = 313 dp by default. Editor bars reserve it first; the overview bar keeps the period date's 120 dp first and folds global actions into ⋮ from the start of the order (Sync never folds).
Width budget: in portrait the tools take what is left after the global group, with 48 dp kept for »; 930 dp+ landscape shows everything, no ». At font scale 1.3 the date text ellipsizes before any control moves.
Rules
- Global actions are the same set, order and icons on both devices; the order is editable in Edit menu bar. The current screen's action shows its selected state.
- The Sync icon shows its state in the icon (cloud + mark) and its content description ("Sync: up to date").
Preview
Phone · 64 dp · title + date, global actions
Today
Wednesday, 4 November
Phone editor · 56 dp · globals fold into ⋮, Sync stays
Journal
Tablet · 48 dp · context │ editing tools │ fixed global group