Systems Design
Adaptive Components
Overview
As part of the Material 3 Expressive launch, I defined and specified the adaptive logic for core components. Moving beyond simple fluid scaling, this project introduced a system of behaviors—Resize, Hide/Show, and Recomposition—where components can automatically reconfigure their layout based on available space and user context. I partnered with engineering to encode these behaviors directly into the library, allowing developers to implement ergonomic, context-aware interfaces without writing custom adaptation code.
Impact
By productizing complex UI logic, we eliminated the need for product teams to reinvent adaptive behaviors. This ensures that apps built with Material remain legible and ergonomic across the Android ecosystem, from narrow phones to tablet displays.
Discovery
Responsive to Adaptive
We identified that "responsive" design in the ecosystem often resulted in suboptimal user experiences: components were simply stretching to fill screen width, leading to unergonomic touch targets on tablets or broken layouts (like overlapping elements) on small screens. The core challenge was that components lacked "self-knowledge." To solve this, we used Jetpack Compose to design components that could respond to their specific container size rather than just the global screen width.
Process
Adaptation Structure
I established three primary pillars for how components should adapt: Resize (changing dimensions), Hide/Show (managing density), and Recomposition (fundamentally changing layout structure).
Categorizing adaptations this way helped us understand how components could adapt to various conditions such as attention, space, and user intent.
Semantic Designations
For complex layouts like button groups, I developed a logic system based on hierarchy. "Fixed" buttons maintain their presence, while "Flexible" buttons resize or hide as space becomes more scarce. This ensured that critical actions remained accessible while the component naturally adapted to its container.
Contextual Composition
Using Dialogs as a proof of concept, I defined how interaction models might shift with screen size for other components. We established that on mobile, Dialogs should be full-screen (immersive) for focused data entry, while on tablets, they should morph into Modals (panes), maintaining context with the background content. Other components, like the app bar, could join with tabs, search, or other nearby components to similarly make better use of space.
Delivery
Delivering Adaptation
I delivered comprehensive updates to 7 components in the first batch of adaptive components, including core components like app bar and navigation components, button groups, etc.
Next Case Study
Girassol
Designing identity and place into a typeface.