[Compose] ModalBottomSheet 구현 시 Navigation Color 문제 해결

내 앱의 Background 색상과 Navigation Color, StatusBar Color 를 맞춰주기 위해 나는 다음과 같이 MainActivity 에서 EdgeToEdge 를 설정해주었다.

모든 화면에서 잘 적용되고 있었기에, 잘되는구나 싶었지만 ModalBottomSheet 를 사용하는 순간 EdgeToEdge 의 NavigationStyle 설정이 풀려버리는 문제를 확인할 수 있었다.

이를 해결하기 위해 Codex 의 도움 /Web Searching 을 진행해보았으나 별 수확은 없었고, 안드로이드 개발자 카톡방에 답을 물어 이지훈님의 답변을 통해 문제를 해결할 수 있었다.

해결 방법

https://www.youtube.com/watch?v=fdfhaEvxdy4 의 25분부터 나오는 이슈가 나와 같은 현상이었다.

ModalBottomSheet 는 Dialog 이고 Dialog 는 별도의 window 를 가지기 때문에 각각의 SystemBarBackground 를 가질 수 있다는 것이다.

이에 대한 해결로는 다음과 같은 코드를 ModalBottomSheet 에 넣어 해결해주었다.

val window = (LocalView.current.parent as DialogWindowProvider).window

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.Q) {
    window.isNavigationBarContrastEnforced = false
} else {
    window.navigationBarColor = Color.Transparent.toArgb()
}