[android] M3 Modal BottomSheet System Bar 적용하기

오늘은 인터넷에 검색해도 나오지않는 Modal Bottom Sheet의 문제와 해결법에 설명하려고 합니다.
우리가 일반적으로 생각하는 BottomSheet는 SystemBar위에서 시작합니다.

(BottomSheet가 SystemBar 상단에 위치한것을 볼수 있다)

하지만 예상과 달리 실행을하면, SystemBar 아래에 위치하게 됩니다.

Modal Bottom Sheet내부를 확인해 봅시다.
windowInsets을 통해 시작부분을 정하는것을 확인할 수 있습니다.

@Composable
@ExperimentalMaterial3Api
fun ModalBottomSheet(
    onDismissRequest: () -> Unit,
    modifier: Modifier = Modifier,
    sheetState: SheetState = rememberModalBottomSheetState(),
    shape: Shape = BottomSheetDefaults.ExpandedShape,
    containerColor: Color = BottomSheetDefaults.ContainerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomSheetDefaults.Elevation,
    scrimColor: Color = BottomSheetDefaults.ScrimColor,
    dragHandle: @Composable (() -> Unit)? = { BottomSheetDefaults.DragHandle() },
    //이 WindowInsets을 통해 조절이된다.
    windowInsets: WindowInsets = BottomSheetDefaults.windowInsets,
    content: @Composable ColumnScope.() -> Unit,
)

하지만 WindowInsets.navigationBars.asPaddingValues().calculateBottomPadding()을 로깅으로 찍었을때 0dp가 발생하게 됩니다.

왜 WindowInset이 제대로 동작을 하고있지 않을까요?

문서에 따르면, 부모View가 상위 root에서 해당 이벤트를 가로채고 있기 때문에 전파를 받지않는다고 설명되어 있습니다.

그래서 위의 WindowCompat.setDecorFitsSystemWindows(window, false) 을 적용하면 아래와 같이 이쁘게 나오는것을 볼수 있습니다.

아직 끝나지 않았으니 더 읽어주세요

이로인한 Side Effect

위와 아래 어떤 차이가 느껴지시나요?? TopAppBar의 두께가 좀 더 두꺼워졌다고 느끼셨을껍니다.

WindowCompat.setDecorFitsSystemWindows(window, false)을 씀에따라 원래는 0이였을 WindowInset이 값을 가지게 된것인데요.

해결하기 위해서는 windowInsets을 windowInsets = WindowInsets(0.dp) 로 처리해줍시다.

WindowCompat.setDecorFitsSystemWindows(window, false)을 씀에 따라 모든 windowInsets들이 크기를 가지는것 같습니다.

해당 코드를 적용한 후, 변한부분을 자세히 확인해보시면 좋을것 같습니다.

참고

---

안드로이드 WindowInsets으로 키보드 애니메이션 구현하기 (2)

ModalBottomSheet 및 시스템 탐색 메뉴 — Jetpack Compose