OneUI - Design | Samsung Developers

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.

Large screen layouts

Learn how to design layouts for large screens and view examples from Galaxy apps.

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.

①Single pane

②Dual pane

③Triple pane

  • 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%

①600 ≤ Width < 960

②960 ≤ Width

③Foldable only

  • 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

  • Sliding pane layout

    Android Developers

  • Activity Embedding

    Android Developers

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

  • Navigation rail

    Material design

  • Navigation drawer

    Material design

Things to check
  • 1. Use a navigation rail for Z Fold devices in portrait orientation.
  • 2. Use a triple-pane layout for tablets in landscape orientation to get the most out of the available screen space.

    • 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

    • Drag & drop

      Android Developers

    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

    • Multi window

      Android Developers

    • Layout design for large screens