[Android Compose] 바텀 시트와 시스템 네비게이션 바가 겹치는 현상 해결 방법

바텀 시트를 만들던 도중 아래처럼 바텀 시트의 내용물들이 시스템 네비게이션 바와 겹쳐서 표시되는 현상이 일어났다.

 

 

원인은 간단했다. TextField에서 키보드를 띄우기 위해 키보드 inset을 고려해서 아래처럼 코드를 짰었다.

 

ModalBottomSheet(
    // ...
    windowInsets = WindowInsets.ime,
)

 

이렇게 하고 앱을 실행하면 위의 사진처럼 시스템 네비게이션 바와 바텀 시트 안의 내용물이 겹쳐서 표시될 수 있다.

해결하려면 아래처럼 수정하면 된다. 바텀 시트 안에서 Column을 사용하기 때문에 아래처럼 수정했음을 참고한다.

 

ModalBottomSheet(
    // ...
    windowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Bottom), // 수정
) {
    Column(
        modifier = Modifier
            .padding(16.dp)
            .navigationBarsPadding(), // 추가
    )

 

이렇게 수정한 후 재실행하면 바텀 시트와 시스템 네비게이션 바가 겹치지 않는다.

 

 

이제 왜 이렇게 되는지 알아야 할 차례다. 먼저 ModalBottomSheet의 windowInsets를 아래처럼 수정했다.

 

windowInsets = WindowInsets.systemBars.only(WindowInsetsSides.Bottom),

 

이것은 시스템 네비게이션 바의 하단 부분만을 inset으로 고려한다는 뜻이다. 키보드가 표시될 때 키보드 관련 inset도 처리하려면 아래처럼 수정할 수 있다.

 

windowInsets = WindowInsets.systemBars
    .only(WindowInsetsSides.Bottom)
    .union(WindowInsets.ime)

 

그리고 Column에 navigationBarsPadding()을 추가해서 Column이 시스템 네비게이션 바 위에 위치하게 한다.

 

Column(
    modifier = Modifier
        .padding(16.dp)
        .navigationBarsPadding(),
)

 

이렇게 수정해서 바텀 시트와 시스템 네비게이션 바가 겹치지 않게 수정할 수 있었다.