시스템 표시줄 아래에 배경과 스크롤 콘텐츠를 그려서 화면 전체를 사용하는 환경을 만듭니다.
시스템 인셋 아래에 탭 동작이나 드래그 타겟을 추가하지 마세요. 이러한 동작은 전체 화면 및 동작 탐색과 충돌합니다.
그림 2. 동작 인셋이 녹색으로 강조 표시된 앱
시스템 표시줄 뒤에 콘텐츠 그리기
에지 투 에지 기능을 사용하면 몰입도 높은 환경을 위해 시스템 표시줄 아래에 UI를 그릴 수 있습니다.
앱은 인셋에 반응하여 콘텐츠의 겹침을 해결할 수 있습니다. 인셋은 시스템 표시줄 또는 디스플레이 컷아웃과 같은 실제 기기 기능과 겹치지 않도록 앱 콘텐츠의 패딩을 얼마나 적용해야 하는지 설명합니다. Compose 및 뷰에서 더 넓은 화면을 지원하고 인셋을 처리하는 방법을 알아보세요.
전체 화면 사용 사례를 설계할 때는 다음과 같은 유형의 인셋에 유의하세요.
시스템 표시줄 인셋은 탭할 수 있고 시스템 표시줄에 의해 시각적으로 가려져서는 안 되는 UI에 적용됩니다.
시스템 동작 인셋은 앱보다 우선순위가 높은 OS에서 사용하는 동작 탐색 영역에 적용됩니다.
디스플레이 컷아웃 인셋은 카메라 컷아웃과 같이 디스플레이 표면으로 확장되는 기기 영역에 적용됩니다.
상태 표시줄 고려사항
기본 시스템 표시줄 디자인 안내는 Android 시스템 표시줄을 참고하세요. 다음 섹션에서는 추가 상태 표시줄 고려사항을 설명합니다.
콘텐츠 스크롤
스크롤하는 동안 상단 앱 바가 접혀야 합니다. Material 3 TopAppBar를 접을 방법을 알아봅니다.
check_circle
권장사항
앱 바가 고정된 경우 상단 앱 바를 상태 표시줄 높이로 접습니다.
check_circle
권장사항
상단 앱 바가 고정되지 않은 경우 일치하는 배경 색상 그라데이션을 추가합니다.
UI가 아래로 스크롤될 때 상태 표시줄 아이콘이 복잡해 보이지 않도록 상태 표시줄은 반투명해야 합니다. 이렇게 하려면 먼저 LazyColumn 또는 RecyclerView 문서의 단계를 구현하여 스크롤 가능한 UI를 가장자리까지 만듭니다. 그런 다음 다음 중 하나를 실행하여 시스템 표시줄이 반투명한지 확인합니다.
일반적으로 배경과 구분선도 가장자리에서 가장자리까지 그려야 하며 텍스트와 버튼과 같은 콘텐츠는 시스템 UI 및 하드웨어 요소를 피하기 위해 안쪽으로 배치해야 합니다.
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-07-27(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-07-27(UTC)"],[],[],null,["# Edge-to-edge design\n\nAn edge-to-edge app takes advantage of the entire screen by drawing UI under the\nsystem bars.\n**Figure 1.** Left. An app that isn't edge-to-edge. Right. An app that is edge-to-edge.\n\nTakeaways\n---------\n\n- Draw background and scrolling content underneath system bars for an edge-to-edge experience.\n- Avoid adding tap gestures or drag targets under system insets; these conflict with edge-to-edge and gesture navigation.\n\n**Figure 2.** An app with gesture insets highlighted green.\n\n### Draw your content behind the system bars\n\nThe edge-to-edge feature lets you draw the UI under the system bars for an\nimmersive experience.\n\nAn app can address overlaps in content by reacting to *insets* . Insets describe\nhow much the content of your app needs to be padded to avoid overlapping with\nsystem bars or with physical device features such as [display cutouts](/develop/ui/views/layout/display-cutout). Read\nabout how to support edge-to-edge and handle insets in [Compose](/develop/ui/compose/layouts/insets) and\n[Views](/develop/ui/views/layout/edge-to-edge).\n\nBe aware of the following types of insets when designing edge-to-edge use cases:\n\n- *System bar insets* apply to UI that is both tappable and shouldn't be visually obscured by the system bars.\n- *System gesture insets* apply to gesture-navigational areas used by the OS that take priority over your app.\n- *Display cutout insets* apply to device areas that extend into the display surface, such as the camera cutout.\n\n### Status bar considerations\n\nSee the [Android System Bars](/design/ui/mobile/guides/foundations/system-bars) for fundamental system bar design guidance. The\nfollowing section discusses additional status bar considerations.\n\n#### Scrolling content\n\nTop app bars should collapse while scrolling. Learn how to [collapse](/develop/ui/compose/components/app-bars#scroll) the\nMaterial 3 TopAppBar. \ncheck_circle\n\n### Do\n\nCollapse the top app bar to status bar height if the app bar is sticky. \ncheck_circle\n\n### Do\n\nAdd a matching background color gradient if the top app bar is not sticky.\n\nStatus bars should be translucent when the UI scrolls underneath, so that the\nstatus bar icons don't look cluttered. To accomplish this, first make a\nscrollable UI edge-to-edge by implementing the steps in the [LazyColumn](/develop/ui/compose/layouts/insets#scaffold) or\n[RecyclerView](/develop/ui/views/layout/recyclerview#enable-edge-to-edge-display) documentation. Then, ensure the system bar is translucent by\ndoing one of the following:\n\n- Rely on the Material 3 TopAppBar automatic protection when [scrolling](/develop/ui/compose/components/app-bars#scroll), if applicable.\n- Create a custom gradient composable or use [GradientProtection](/reference/androidx/core/view/insetscontrast/GradientProtection) for Views. For more information on doing this in compose, see [System bar protection](/develop/ui/compose/layouts/system-bars).\n\n**Figure 3.** An app with gesture insets highlighted green.\n\nFor adaptive layouts, ensure there are separate protections for panes with\ndifferent background colors. \ncancel\n\n### Don´t\n\nHave gradient protection that mismatches each pane's background \ncheck_circle\n\n### Do\n\nHave gradient protection that matches each pane's background.\n\nLikewise, navigation drawers should also have a separate protection from the\nrest of the app.\n**Figure 4.** A translucent status bar for the navigation drawer. This image shows status bar protection for the navigation drawer but not the app.\n\nDon't stack status bar protections, for example by using both the Material 3\nTopAppBar built-in protection and a custom protection.\n\n### Navigation bar considerations\n\nSee the [Android System Bars](/design/ui/mobile/guides/foundations/system-bars) for fundamental navigation bar design guidance.\nThe following section includes additional navigation bar considerations.\n\n#### Scrolling content\n\nBottom app bars should collapse while scrolling. \ncheck_circle\n\n### Do\n\nAdd system bar scrim for three-button navigation when the bottom app bar animates away. \ncheck_circle\n\n### Do\n\nKeep gesture navigation transparent and don't add an additional scrim.\n\n### Display cutouts\n\nDisplay cutouts can affect the appearance of your UI. Apps must handle display\ncutout insets so that important parts of the UI don't draw underneath the\ndisplay cutout. \ncheck_circle\n\n### Do\n\nInset critical UI using display cutout insets. \ncancel\n\n### Don´t\n\nPlace critical UI at the very edge of the screen.\n\nHowever, solid app bar backgrounds should draw into the display cutout as shown\nin the following image.\n**Figure 5.** Solid app bar backgrounds draw into the display cutout while important UI is inset.\n\nEnsure horizontal carousels draw into the display cutout.\n**Figure 6.** An edge-to-edge horizontal display, where the carousel scrolls through the display cutout.\n\nRead about how to support display cutouts in [Compose](/develop/ui/compose/system/cutouts) and [Views](/develop/ui/views/layout/display-cutout).\n\n### Other guidance\n\nIn general, backgrounds and divider lines should also draw edge-to-edge while\ncontent like text and buttons should be inset to avoid the system UI and\nhardware elements."]]
