![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/ls-hero.png)  

### Design for large screens

Create a high quality, engaging user experience on tablets, foldables, and ChromeOS devices.  
[Go to large screen foundations](http://android.devsite.corp.google.com/guide/topics/large-screens/get-started-with-large-screens)

## Get inspired

[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/get-inspired-ls.jpg)](http://android.devsite.corp.google.com/large-screens/gallery)  
Gallery

### [Tour the large screen gallery](http://android.devsite.corp.google.com/large-screens/gallery)

Explore inspiring, optimized designs for large screen devices. Browse UI/UX templates for popular app categories, including media, creativity, games, and more.  
[View the gallery](http://android.devsite.corp.google.com/large-screens/gallery)

## Use proven patterns

Canonical layouts ensure an optimal user experience for all large screen form factors--- tablets, foldables, and ChromeOS devices---as well as supporting all phone sizes. Navigation rail and drawer components provide out-of-the way navigation for UI convenience and control. [![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/list-detail.svg)](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#list-detail)  
Canonical

### [List-detail](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#list-detail)

Enables one-click access to descriptive, explanatory, or other supplementary information for content organized in lists.  
[Learn about list-detail](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#list-detail)  
[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/feed.svg)](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#feed)  
Canonical

### [Feed](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#feed)

Arranges content elements in an expansive grid, associating elements by size and placement, drawing attention to elements using proportion and scale.  
[Learn about feed](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#feed)  
[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/supporting-panel.svg)](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#supporting_pane)  
Canonical

### [Supporting pane](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#supporting_pane)

Organizes apps into primary and secondary display areas to make tools, options, and settings readily accessible and applicable to the main content.  
[Learn about supporting pane](http://android.devsite.corp.google.com/guide/topics/large-screens/large-screen-canonical-layouts#supporting_pane)  
[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/navigation.svg)](http://android.devsite.corp.google.com/guide/topics/large-screens/navigation-for-responsive-uis)  
Canonical

### [Navigation rail and drawer](http://android.devsite.corp.google.com/guide/topics/large-screens/navigation-for-responsive-uis)

Complements the canonical layouts by positioning primary navigation destinations within easy reach while occupying a minimum of screen space.  
[Learn about navigation elements](http://android.devsite.corp.google.com/guide/topics/large-screens/navigation-for-responsive-uis)  

#### Compact

\< 600 dp  

#### Medium

≥ 600 - \< 840 dp  

#### Expanded

≥ 840 dp  

### [Use window size classes](https://developer.android.com/develop/ui/compose/layouts/adaptive/window-size-classes)

Use compact, medium, and expanded window size classes to support different form factors for an optimal user experience.  
[Discover more about window size classes](https://developer.android.com/develop/ui/compose/layouts/adaptive/window-size-classes)

## Use a proven design system

[![](http://android.devsite.corp.google.com/static/images/design/ui/mobile/material-design-3.png)](https://m3.material.io)  

### [Try Material Design 3](https://m3.material.io)

Material Design 3 is an open source, adaptable system of guidelines, components, and tools that support the best practices of user interface design.  
[Go to the Material Design website](https://m3.material.io)

## Develop for large screens

[![](http://android.devsite.corp.google.com/static/images/design/ui/mobile/guides-developer.png)](http://android.devsite.corp.google.com/guide/topics/large-screens/get-started-with-large-screens)  

### [Developer guides](http://android.devsite.corp.google.com/guide/topics/large-screens/get-started-with-large-screens)

Use our developer guides and reference to build your app design.  
[See developer guides](http://android.devsite.corp.google.com/guide/topics/large-screens/get-started-with-large-screens)  
[![](http://android.devsite.corp.google.com/static/images/design/ui/mobile/guides-quality.png)](http://android.devsite.corp.google.com/docs/quality-guidelines/large-screen-app-quality)  

### [Quality guides](http://android.devsite.corp.google.com/docs/quality-guidelines/large-screen-app-quality)

Lay out your designs following Android best practices.  
[See large screen app quality](http://android.devsite.corp.google.com/docs/quality-guidelines/large-screen-app-quality)

## Articles \& reading

[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/understanding_layout.png)](https://m3.material.io/foundations/layout/understanding-layout/overview)  
Material Design

### [Understanding layout](https://m3.material.io/foundations/layout/understanding-layout/overview)

Layout is the visual arrangement of elements. It directs attention to the most important information on the screen and makes it easy for users to take action.  
[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/applying_layout.png)](https://m3.material.io/foundations/layout/applying-layout/window-size-classes)  
Material Design

### [Applying layout](https://m3.material.io/foundations/layout/applying-layout/window-size-classes)

Window size classes help you to create layouts that scale across devices and form factors.  
[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/using_canonical_layouts.png)](https://m3.material.io/foundations/layout/canonical-layouts/overview)  
Material Design

### [Using canonical layouts](https://m3.material.io/foundations/layout/canonical-layouts/overview)

Canonical layouts are ready-to-use compositions that help layouts adapt for common use cases and screen sizes.

## Check out our latest videos

[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/canonical_layouts.png)](https://www.youtube.com/watch?v=FrkIa9vZjCI)  
YouTube video

### [Canonical layouts and visual hierarchy: Designing for larger screens](https://www.youtube.com/watch?v=FrkIa9vZjCI)

**November 10, 2022**  
[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/dos_don_t.png)](https://www.youtube.com/watch?v=m7OL-mVh1E8)  
YouTube video

### [Do's and don'ts: Mindset for optimizing apps for larger screens](https://www.youtube.com/watch?v=m7OL-mVh1E8)

**November 10, 2022**  
[![](http://android.devsite.corp.google.com/static/images/design/ui/large-screens/three_tiers.png)](https://www.youtube.com/watch?v=FCi6Nld4kz4)  
YouTube video

### [Three tiers of large screen quality on Google Play](https://www.youtube.com/watch?v=FCi6Nld4kz4)

**November 09, 2022**