Pushing the boundaries of the layout system & typography
summary
Pinterest creates a new unit called Boints (BT) that maps to different DP values per device class to keep a 12-column grid with 13 gutters consistent across phones, tablets and web; layout XML gets custom BT attributes but Android only allows one inflater factory so a custom generic LayoutInflater with hooks is built to apply multiple view customizations and swap image view implementations for experiments; typography uses a span-based tracking/word-spacing approach for ICS+ and an autofit that shrinks at most two sizes; span letter‑spacing costs ~25 ms for small text while word‑spacing and autofit run ~1 ms.
AI-written summary · about
chapters (22)
- 0:00Intro
- 6:12Layout system
- 12:20Custom attributes
- 19:54Custom text view
- 20:05Text sizing
- 21:28Textview
- 22:08Letter Spacing
- 22:48Span
- 23:22Scale Expand
- 23:40BreakIterator
- 24:28ScaleExpand
- 25:20ScaleSpacing
- 25:48ScaleSpacing Utility
- 27:28Internationalization
- 27:53Width
- 28:11Size
- 28:24Performance
- 29:18Multiple approaches
- 29:58Generic layout inflator
- 32:34Alignment
- 32:55Rhythm
- 33:30Questions
related talks
18mCanonical layouts and visual hierarchy: Designing for larger screens
32mBreaking Barriers: Understanding Layout Between UI Design and Code
39mAtomic Design in Android
49mDesign Tools - Closing the Gap Between Design and Development
32mBeyond Mobile: Material Design, Adaptable UIs, and Flutter
44mDesigning for @1x – @3x Without Going Crazy
26mHow we engineered our design system
40mComposing Creatively with Custom Layouts