Portrait and Landscape Layouts

The device accelerometer can capture orientation events to detect whether the device is being held in a portrait or landscape orientation. Your app has the choice to constrain itself to a particular orientation, or to readjust its layout to match the device orientation. It is generally recommended, however, that apps provide both a portrait and a landscape layout. As mentioned earlier, users hold tablets in a variety of ways and orientations, and your application should give users this flexibility.

Panes automatically resize to fit the available width in the view unless the panes are fixed in width. Consider how your app content appears within the view's panes in both orientations and rearrange the layout of the content if necessary to maximize the amount of content displayed in the available space.

Note that header and footers adjust to fit the full width of the pane in which they are located. The items that appear in the header and footer areas should remain the same even if the available space changes between orientations. Switching between orientations should not introduce new content or functionality.

Single-Pane Layouts

Grid



Grid-based layouts scale well between portrait and landscape. A grid-based layout should reorder itself to fit as many grid items as possible within the horizontal space within the pane.

Single-Column



A single-column layout does not scale well between portrait and landscape. This layout should be avoided if possible. When a single-column layout is unavoidable, do not scale the column to full width in landscape.

The overall width of the column should remain the same between landscape and portrait orientations.

Split View



A split view contains a fixed pane on the left and a free pane on the right.

The fixed pane remains the same width regardless of orientation and the free pane fits the available space.

The content in the free pane should reflow to fill the available space when the orientation changes.

Users typically change to a landscape orientation to see more content in this layout. Try to fulfill the user's expectations by ensuring that the amount of content displayed in landscape is maximized.

Sliding Panes





Panes within the Sliding Panes layout are generally fixed in width, except for the detail pane, which adjusts to fit the available space.

The content in the free pane reflows to fill the available space when the orientation changes, provided that the width of the pane is at least 320 px.