표준 레이아웃

Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.

Depiction of large screen devices showing the canonical layouts.

The canonical layouts support small screen phones as well as tablets, foldables, and ChromeOS devices. Derived from Material Design guidance, the layouts are aesthetic as well as functional.

The Android framework includes specialized components that make implementation of the layouts straightforward and reliable.

The canonical layouts create engaging, productivity‑enhancing UIs that form the foundation of great apps.

If you're already familiar with the adaptive app canonical layouts but aren't sure which Android APIs to use, jump to the Applicability section for help determining which layout is right for your app's use cases.

List-detail

Wireframe of list-detail layout.

The list-detail layout enables users to explore lists of items that have descriptive, explanatory, or other supplementary information—the item detail.

The layout divides the app window into two side-by-side panes: one for the list, one for the detail. Users select items from the list to display the item detail. Deep links in the detail reveal additional content in the detail pane.

Expanded-width displays (see Use window size classes) accommodate both the list and detail at the same time. Selection of a list item updates the detail pane to show the related content for the selected item.

Medium- and compact-width displays show either the list or the detail, depending on user interaction with the app. When just the list is visible, selection of a list item displays the detail in place of the list. When just the detail is visible, pressing the back button redisplays the list.

Configuration changes such as device orientation changes or app window size changes can change the display's window size class. A list‑detail layout responds accordingly, preserving app state:

  • If an expanded-width display showing both the list and detail panes narrows to medium or compact, the detail pane remains visible and the list pane is hidden
  • If a medium- or compact-width display has just the detail pane visible and the window size class widens to expanded, the list and detail are shown together, and the list indicates that the item corresponding to the content in the detail pane is selected
  • If a medium- or compact-width display has just the list pane visible and widens to expanded, the list and a placeholder detail pane are shown together

List-detail is ideal for messaging apps, contact managers, interactive media browsers or any app where the content can be organized as a list of items that reveal additional information.

Figure 1. Messaging app showing a list of conversations and the details of a selected conversation.

Implementation

목록-세부정보 레이아웃은 Compose, 뷰, 활동 삽입 (기존 앱)을 비롯한 다양한 기술로 만들 수 있습니다. 앱에 가장 적합한 기술을 결정하는 데 도움이 필요하면 적용 대상 섹션을 참고하세요.

SlidingPaneLayout 라이브러리는 뷰 또는 프래그먼트를 기반으로 목록-세부정보 레이아웃을 구현하도록 설계되었습니다.

먼저 SlidingPaneLayout을 XML 레이아웃의 루트 요소로 선언합니다. 그런 다음, 목록 및 세부정보 콘텐츠를 나타내는 두 하위 요소(뷰 또는 프래그먼트)를 추가합니다.

목록-세부정보 뷰 또는 프래그먼트 간에 데이터를 전달하는 통신 방법을 구현합니다. ViewModel은 비즈니스 로직을 저장하고 구성 변경 후에도 유지할 수 있으므로 권장됩니다.

SlidingPaneLayout은 목록과 세부정보를 함께 표시할지 아니면 개별적으로 표시할지를 자동으로 결정합니다. 두 영역을 모두 수용할 수 있는 가로 공간이 충분한 창에서는 목록과 세부정보가 나란히 표시됩니다. 공간이 부족한 창에는 사용자와 앱의 상호작용에 따라 목록이나 세부정보가 표시됩니다.

구현 예는 슬라이딩 창을 사용한 목록-세부정보 샘플을 참고하세요.

활동 삽입

활동 삽입을 사용하면 기존의 다중 활동 앱이 같은 화면에 두 활동을 나란히 표시하거나 스택 (하나가 다른 활동을 오버레이함)으로 표시할 수 있습니다. 앱이 별도의 활동에서 목록-세부정보 레이아웃의 목록과 세부정보를 구현하는 경우 활동 삽입을 사용하면 코드 리팩터링을 사용하지 않거나 최소한으로 사용하여 목록-세부정보 레이아웃을 만들 수 있습니다.

XML 구성 파일을 사용하여 작업 창 분할을 지정하면 활동 삽입을 구현할 수 있습니다. 분할은 기본 활동(분할 시작)과 보조 활동을 정의합니다. 창 크기 클래스 중단점을 사용하여 분할의 최소 표시 너비를 지정합니다. 디스플레이 너비가 최소 중단점 아래로 떨어지면 활동이 다른 활동에 오버레이되어 표시됩니다. 예를 들어 최소 디스플레이 너비가 600dp인 경우 활동은 소형 디스플레이에 겹쳐서 표시되지만 중간 및 확장 디스플레이에는 나란히 표시됩니다.

활동 삽입은 Android 12L (API 수준 32) 이상에서 지원되지만 기기 제조업체에서 구현하는 경우 더 낮은 API 수준에서도 사용할 수 있습니다. 기기에서 활동 삽입을 사용할 수 없는 경우 대체 동작으로 인해 목록 활동 또는 세부정보 활동이 사용자와 앱의 상호작용에 따라 전체 앱 창을 차지하게 됩니다.

자세한 내용은 활동 삽입을 참고하세요.

구현 예는 활동 삽입을 사용한 목록-세부정보 샘플을 참고하세요.

Feed

Wireframe of feed layout.

A feed layout arranges equivalent content elements in a configurable grid for quick, convenient viewing of a large amount of content.

Size and position establish relationships among the content elements.

Content groups are created by making elements the same size and positioning them together. Attention is drawn to elements by making them larger than nearby elements.

Cards and lists are common components of feed layouts.

A feed layout supports displays of almost any size because the grid can adapt from a single, scrolling column to a multi‑column scrolling feed of content.

Feeds are especially well suited for news and social media apps.

Figure 2. Social media app showing posts in cards of varying sizes.

Implementation

A RecyclerView efficiently renders a large number of items in a single column. A GridLayoutManager lays out items in a grid, allowing configuration of the item sizes and spans.

Configure the grid columns based on the size of the available display area to set the minimum allowable width for items.

The GridLayoutManager default spanning strategy, which is one span per item, can be overridden by creating a custom SpanSizeLookup. Adjust the span to emphasize some items over others.

On compact-width displays that have enough space for only one column, use LinearLayoutManager instead of GridLayoutManager.

For an example implementation, see the Feed with views sample.

Supporting pane

Wireframe of supporting pane layout.

Supporting pane layout organizes app content into primary and secondary display areas.

The primary display area occupies the majority of the app window (typically about two thirds) and contains the main content. The secondary display area is a pane that takes up the remainder of the app window and presents content that supports the main content.

Supporting pane layouts work well on expanded-width displays (see Use window size classes) in landscape orientation. Medium- or compact‑width displays support showing both the primary and secondary display areas if the content is adaptable to narrower display spaces, or if the additional content can be initially hidden in a bottom or side sheet accessible by means of a control such as a menu or button.

A supporting pane layout differs from a list‑detail layout in the relationship of the primary and secondary content. Secondary pane content is meaningful only in relation to the primary content; for example, a supporting pane tool window is irrelevant by itself. The supplementary content in the detail pane of a list‑detail layout, however, is meaningful even without the primary content, for example, the description of a product from a product listing.

Use cases for supporting pane include:

Figure 3. Shopping app with product descriptions in a supporting pane.

Implementation

A supporting pane layout is implemented using a helper layout such as LinearLayout or ConstraintLayout. Establish the window size classes that divide the amount of horizontal display space available for your app into three categories: compact (< 600dp), medium (>= 600dp), and expanded (>= 840dp).

For each window size class, define layouts as follows:

  • Compact: In the app resources layout folder, place content that renders the supporting pane below the main content or inside a bottom sheet
  • Medium: In the layout-w600dp folder, provide supporting pane content that results in the main content and supporting pane rendering side by side, splitting the horizontal display space equally
  • Expanded: In the layout-w840dp folder, include supporting pane content that results in the main content and supporting pane rendering side by side; however, the supporting pane takes up only 30% of the horizontal space, leaving the remaining 70% for the main content

Use a ViewModel for communication between the main content and the supporting pane whether using views, fragments, or a combination.

For implementation examples, see the following samples:

Applicability

The canonical layouts create multifaceted presentations of content for easy access and deep exploration. Use the following flowchart to determine which layout and implementation strategy is best for your app's use cases.

For examples of the canonical layouts implemented in different types of apps, see the large screen gallery.

Figure 4. Large screen canonical layout decision tree.

Additional resources