Designing for large screens

Large screens on Galaxy Z Fold and Galaxy Tab devices give users more space to work, play, and create. These guidelines can help you make sure your app is taking full advantage of this extra space and providing the best experience to your users.

Multi-pane layout

A multi-pane layout lets you show more information at once. On larger screens, a multi-pane layout lets you show the app hierarchy. By flattening navigation, users can access content quickly without a full-screen transition.

The ratios below are recommended for multi-pane layouts. For Z Fold devices, a 50:50 ratio is recommended.

Breakpoint (dp)	1st pane	2nd pane
600 ≤ Width < 960	42%	58%
960 ≤ Width	38%	62%
Foldable only	50%	50%

Stretched-out apps are harder to read and waste the extra space of the large screen. Use a multi-pane layout to show more information at once.

Find out more on

Make navigation controls fit the screen

For small screens, use a navigation bar at the bottom of the screen. For medium-sized screens, a navigation rail along the side gives you more space for buttons. On large screens, keep the full navigation drawer visible to make navigation more intuitive.

Window class	Panes	Navigation
Compact (Width < 600)	1	Navigation bar, modal navigation drawer
Medium (600 ≤ Width < 840)	1(recommended) or 2	Navigation rail, modal navigation drawer
Expanded (840 ≤ Width)	1 or 2 (recommended)	Navigation rail, modal or standard navigation drawer

Find out more on

Get things done without leaving the screen

For an input field that requires a small amount of information, use a small pop-over instead of filling the entire screen. Showing on top of the previous screen helps users accomplish their task without forgetting what they were working on.

On large screens, make the pop-up appear near the button or other UI element that the user interacted with. Keeping the pop-up near the button reduces finger travel distance and saves time. On the Galaxy Fold and Tablet, apps are showing pop-ups at the various location as follows.

Drag and drop

In multi-window view, use drag and drop to allow users to move, copy, or attach content such as text, images, or web addresses.

Provide visual feedback to show when the user starts dragging items and visual cues to help users understand where they can drop items.

Find out more on

Multitasking and Multi-instance

Larger screens are perfect for multitasking, allowing users to have up to 3 split screen view and 5 pop-up view open simultaneously. Users can customize their layout by resizing windows.

Multitasking

Multi-instance

Find out more on