Edge-to-edge 공부

Notice

Recent Posts

Recent Comments

Link

« 2026/01 »
일	월	화	수	목	금	토
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

choiminjun 블로그

Edge-to-edge 공부 본문

Android

Edge-to-edge 공부

mj010504 2025. 12. 22. 10:41

Android 15부터는 Edge-to-edge가 강제로 적용된다.

Edge-to-edge는 안드로이드 앱의 UI 콘텐츠를 화면 가장자리까지 확장하여, 시스템바 영역 뒤까지 앱의 배경이나 콘텐츠가 그려지도록 하는 기법으로 사용자에게 더 몰입감있는 경험을 주기 위해 만들어진 기법이다.

여기서 시스템 바란 상태 표시줄(Status bar)과 내비게이션 바(Navigation Bar) 영역을 말한다.

네비게이션 바(navigation bar) - 버튼 형식, 스와이프 제스처 형식

내부 구현

내부적으로 구현을 살펴보면 WindowCompat.setDecorFitsSystemWindows(window, false)를 통해서 화면을 확장한다는 것을 알 수 있다. 해당 코드의 의미는 메인 윈도우(Decor View)가 시스템 윈도우(시스템 바)까지 영역을 확장할지 말지를 결정하는 것이고 false일때 앱의 콘텐츠가 시스템 윈도우 영역 뒤까지 확장되어 그려진다.

시스템 아이콘(Status Bar에서 시간, 배터리, 와이파이 / Navigation Bar에서 탐색 버튼)은 다크 모드인지, 라이트 모드인지에 따라서 대비 색상으로(다크 모드일 때 White, 라이트 모드일 때 Black) 색상을 자동으로 조정한다.

다음과 같은 코드를 통해서는 Navigation Bar에 강제 색상 대비를 해제할 수 있다.

// Activity 내부
window.isNavigationBarContrastEnforced = true 
// 또는 
WindowCompat.setNavigationBarContrastEnforced(window, true)

다음과 같은 코드를 통해서는 Status Bar의 시스템 아이콘 색상을 밝은 색으로 표시할 지 어두운 색으로 표시할 지 선택할 수 있다.

// Activity 내부
val controller = WindowCompat.getInsetsController(window, window.decorView)
controller.isAppearanceLightStatusBars = true
controller.isAppearanceLightStatusBars = false

사용 방법

앱이 SDK 35 이상을 타겟팅하는 경우 Android 15 이상 기기에서 자동으로 설정된다.

이전 Android 버전에서 더 넓은 화면을 사용 설정하려면 Activity의 onCreate에서 enableEdgeToEdge를 수동으로 호출한다.

문제점

화면의 콘텐츠가 시스템 바 영역까지 확대되면서 앱 UI의 일부가 겹쳐져 가려질 수 있다. 이를 위해서는 Inset을 처리해야 한다.

Inset(인셋)이란 화면에서 시스템 UI 요소(예: 상태 표시줄, 내비게이션 바, 노치, 키보드 등)가 차지하는 공간이나 여백을 의미한다.

Inset의 종류는 다음과 같다.

System Bars Inset - 시스템 바(상태 바, 내비게이션 바)가 차지하는 영역

Display Cutout Inset - 디바이스에 물리적으로 존재하는 노치, 카메라 홀 등이 포함된 영역을 의미한다. 이 컷아웃에 의해서도 앱의 UI가 가려질 수 있으므로 신경써줘야 한다. 일반적으로 디바이스에 상단에 위치하고 디바이스가 가로 모드일 때는 왼쪽에 위치한다.

System Gestures Inset - 네비게이션 바가 스와이프 제스처 모드일 때 시스템 제스처(예: 홈 제스처, 뒤로 가기 제스처)가 우선적으로 사용되는 영역을 나타낸다

해결방안

해결방안은 Compose와 XML에서 각각 다를 수 있다.

Compose

Compose에서 Scaffold를 사용한다면 Scaffold가 제공하는 innerpadding을 적용하여 해결할 수 있다. Scaffold의 innerpadding에는 상태 바(Status Bar), 네비게이션 바(Navigation Bar), Scaffold Top Bar, Scaffold BottomBar의 크기가 모두 포함된다. 화면을 회전해서 가로 모드일 때는 display cutout 크기도 포함되는 것 같다.

Scaffold에 contentWindowInsets 속성에서도 safeDrawing, SafeContent, SafeGestures와 같은 속성을 목적에 맞게 사용할 수 있다.

safeDrawing: displayCutout을 제외하고, 그림을 그리는 데 안전한 영역입니다. 배경처럼 시스템 바 뒤로 그려져도 괜찮지만 노치에는 가려지면 안 되는 경우 사용
safeContent: systemBars, displayCutout, ime 등 모든 시스템 UI를 제외하고 상호작용 가능한 콘텐츠를 배치하기에 안전한 영역입니다.
safeGestures: 뒤로 가기 같은 시스템 제스처 영역을 제외하고 앱의 제스처(스와이프 등)를 사용하기 안전한 영역입니다.

Scaffold를 사용하지 않는다면 다음과 같은 Modifier를 사용하여 padding을 줄 수 있다.

Modifier.statusBarsPadding()
Modifier.navigationBarsPadding()
Modifier.safeDrawingPadding()

XML

많은 뷰 기반 Material 컴포넌트는 인셋을 자동으로 처리한다. 만약에 AppBarLayout 처럼 인셋을 자동처리하지 않는 뷰는 속성에android:fitsSystemWindows="true" 를 추가한다. 해당 속성은 시스템 바와 뷰가 겹치지 않도록 자신의 패딩(padding)을 자동으로 조정한다.

ViewCompat.setOnApplyWindowInsetsListener를 통해 여러 WindowInsets의 크기를 얻어 패딩으로 처리할 수 있다.

WindowInsets 종류

https://developer.android.com/develop/ui/compose/system/insets?hl=ko

창 인셋 정보 | Jetpack Compose | Android Developers

이 페이지는 Cloud Translation API를 통해 번역되었습니다. 창 인셋 정보 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. Android 플랫폼은 상태 표시줄, 탐색 메뉴

developer.android.com

adjustResize 미적용 문제

edge-to-edge에서는 시스템 바가 화면에서 제거된 것으로 처리되기 때문에 adjustResize를 적용하더라도 키보드에 의해 UI가 가려질 수 있다. 이때는 수동으로 padding을 조정해줘야 한다.

몰입 모드(Immerse mode)

일부 콘텐츠는 시스템 표시줄을 숨겨서 전체화면으로 표시하여 사용자에게 더 몰입감 있는 화면을 제공할 수 있다. 나 같은 경우 동영상 player에서 전체 화면 버튼을 클릭햇을 때 전체화면을 표시할 때 사용했다.

val windowInsetsController = WindowCompat.getInsetsController(window, window.decorView)

// Hide the system bars.
windowInsetsController.hide(Type.systemBars())

// Show the system bars.
windowInsetsController.show(Type.systemBars())