Canonical layouts are proven, versatile layouts that provide an optimal user experience on a variety of form factors.
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.
List-detail
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, file browsers, or any app where the content can be organized as a list of items that reveal additional information.
Implementation
Compose의 선언형 패러다임은 목록 창과 세부정보 창을 동시에 표시할지 (너비 창 크기 클래스 확장 시), 아니면 목록 창과 세부정보 창 중 하나만 표시할지 (너비 창 크기 클래스가 중간 또는 좁은 너비인 경우) 결정하는 창 크기 클래스 로직을 지원합니다.
단방향 데이터 흐름을 보장하려면 현재 창 크기 클래스 및 선택한 목록 항목 (있는 경우)의 세부정보를 포함한 모든 상태를 끌어올립니다. 그러면 모든 컴포저블이 데이터에 액세스하고 올바르게 렌더링될 수 있습니다.
소형 창 크기에 세부정보 창만 표시하는 경우 BackHandler를 추가하여 세부정보 창을 삭제하고 목록 창만 표시합니다. 핸들러는 창 크기 클래스 및 선택한 세부정보 상태에 종속되므로 BackHandler는 전체 앱 탐색에 포함되지 않습니다.
구현 예는 Compose를 사용한 목록-세부정보 샘플을 참고하세요.
Feed
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.
Implementation
피드는 그리드로 배치된 세로 스크롤 컨테이너에 있는 다수의 콘텐츠 요소로 구성됩니다. 지연 목록은 많은 수의 항목을 열이나 행에 효율적으로 렌더링합니다. 지연 그리드는 항목을 그리드로 렌더링하여 항목 크기 및 스팬 구성을 지원합니다.
사용 가능한 디스플레이 영역을 기준으로 그리드 레이아웃의 열을 구성하여 그리드 항목에 허용되는 최소 너비를 설정합니다. 그리드 항목을 정의할 때 열 스팬을 조정하여 일부 항목을 다른 항목보다 강조할 수 있습니다.
섹션 헤더, 구분선 또는 피드의 전체 너비를 차지하도록 설계된 기타 항목의 경우
maxLineSpan를 사용하여 레이아웃의 전체 너비를 차지합니다.
열 두 개 이상을 표시할 공간이 충분하지 않은 좁은 너비 디스플레이의 경우 LazyVerticalGrid는 LazyColumn처럼 작동합니다.
구현 예는 Compose를 사용한 피드 샘플을 참고하세요.
Supporting pane
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:
- Productivity apps: A document or spreadsheet accompanied by reviewer comments in a supporting pane
- Media apps: A streaming video complemented by a list of related videos in a supporting pane, or the depiction of an album of music supplemented with a playlist
- Search and reference apps: A query input form with results in a supporting pane
Implementation
Compose는 창 크기 클래스 로직을 지원하므로, 기본 콘텐츠와 지원 콘텐츠를 동시에 표시할지 아니면 지원 콘텐츠를 대체 위치에 배치할지 결정할 수 있습니다.
현재 창 크기 클래스와 기본 콘텐츠 및 지원 콘텐츠의 데이터와 관련된 정보를 포함한 모든 상태를 끌어올립니다.
좁은 너비 디스플레이의 경우 지원 콘텐츠를 기본 콘텐츠 아래 또는 하단 시트 내부에 배치합니다. 중간 너비 및 확장 후 너비의 경우 기본 콘텐츠 옆에 지원 콘텐츠를 배치하여 콘텐츠와 사용 가능한 공간에 맞게 크기를 조절합니다. 중간 너비의 경우 기본 콘텐츠와 지원 콘텐츠 사이에 디스플레이 공간을 균등하게 분할합니다. 확장 후 너비의 경우 공간의 70% 를 기본 콘텐츠에, 30% 를 지원 콘텐츠에 부여합니다.
구현 예는 Compose를 사용한 지원 창 샘플을 참고하세요.
Additional resources
- Material Design — Canonical layouts