Desktop-Class Apps: More Than Stretched Phone Screens

▶ Watch (0:09)

Users on large screens expect apps that feel native with keyboard and mouse, said Josh Hale. Android now delivers three resources to help: new desktop design guidelines, desktop developer guidelines, and a desktop emulator in Android Studio. The emulator provides freeform windows, keyboard/mouse testing, and multiple display support. No physical device required for every scenario. The guidelines cover how to use window space, create intuitive navigation, and design pointer interactions like hover effects and context menus.

Designing Layouts with Window Size Classes and Panes

▶ Watch (2:48)

Jason Yan advised designing for window sizes, not device screens. Android provides opinionated breakpoints called window size classes. As windows grow, ship content into multiple columns to reduce scrolling. Use panes to flatten app structure and show supporting content side by side. For medium and above windows, replace bottom navigation with a navigation rail to the side. In extra-large windows, expand the rail to reveal labels.

Desktop Input: Mouse, Trackpad, and Keyboard

▶ Watch (5:48)

Desktop input requires more than compatibility. Clickable elements must show hover states. Use secondary click, right-click or two-finger tap, for context menus. Cursor icons like I-beam indicate selectable text. Keyboard support means every interactive component reachable via Tab and Arrow keys, triggered with Enter or Space. Compose 1.11 treats trackpad events as pointer type.mouse, aligning behavior. New testing APIs validate trackpad gestures.

Multi-Instance Support and Creation-First Design

▶ Watch (11:02)

Francesco described the desktop mindset. Users open two documents side by side. Apps must support multiple instances running concurrently without state conflicts. An editor app on desktop defaults to creation-first: cursor blinking in the editor, full toolset visible, no separate edit mode. Android’s adaptive panes and input support let users carry tasks from phone to desktop environment seamlessly. This shift from consumption-first to creation-first defines the desktop experience.

Notable Quotes

Users on these larger screens are looking for apps that really take advantage of the extra real estate. They expect more than just a stretched out phone app. Josh Hale · ▶ Watch (0:09)

When window size increases, first look for opportunities to ship content segments into multiple columns so that users can see more content without scrolling. Jason Yan · ▶ Watch (3:54)

A true desktop app assumes an expansive canvas from day one. Francesco Romano · ▶ Watch (9:09)

The moment you open a document, your cursor is already blinking in the editor. Francesco Romano · ▶ Watch (12:15)

The boundaries between mobile and desktop are disappearing. Francesco Romano · ▶ Watch (12:54)

Key Takeaways

  • Use window size classes and panes to adapt layouts for desktop screens.
  • Support mouse hover, right-click, keyboard navigation, and trackpad gestures.
  • Enable multiple app instances and default to creation-first for desktop users.