목차
- Intro
- 문제
- 원인과 elevation에 대하여
- 해결방법
- Outro
Intro
스타카토를 개발하던 중 스낵바(Snackbar)가 바텀 시트(BottomSheet)에 가려지는 현상이 발생했다. 오늘은 이 문제가 발생했던 원인과 해결 방법에 관해 이야기해 보겠다.
👿 문제
바텀 시트 배경에 그림자를 적용하기 전까지는 MainActivity에서 스낵바가 정상적으로 보였다. 그러나 바텀 시트에 그림자 효과를 주기 위해 elevation을 8dp로 설정한 이후, 스낵바가 보이지 않는 문제가 발생했다.
🤔 원인과 elevation에 대하여
elevation은 그림자를 설정해 주는 동시에 z축 위치를 나타낸다. 즉, 뷰의 계층을 결정한다고 볼 수 있다!
Android Docs | Create shadows and clip views
The elevation of a view, represented by the Z property, determines the visual appearance of its shadow. Views with higher Z values cast larger, softer shadows, and they occlude views with lower Z values. However, the Z value of a view doesn't affect the view's size.
스낵바가 보이지 않는 이유는 elevation에 대한 공식 문서를 통해 짐작할 수 있었다. Z값이 높은 View는 더 크고 부드러운 그림자를 생성하며, Z값이 낮은 View를 가린다! 이러한 이유로 스낵바가 바텀 시트에 가려졌을 가능성이 있다고 판단했고, 스낵바의 기본 elevation 값을 확인해 보았다.
🥳 해결 방법
Material Design3의 Snackbar 관련 문서를 확인해 보니 스낵바의 기본 elevation은 6dp였다.
즉, 바텀 시트 배경의 elevation(8dp)보다 Snackbar의 elevation(6dp)이 낮아 바텀 시트 아래에 스낵바가 위치하게 되면서 발생한 문제였다. 따라서 바텀 시트 배경의 elevation을 스낵바보다 낮은 4dp로 설정해 문제를 해결했다!
| 바텀시트 배경 elevation 8dp | 바텀시트 배경 elevation 4dp |
|---|---|
Outro
뭔가 이상하면 일단 공식 문서를 뒤져보자!
참고자료
Android Docs | Create shadows and clip views
Material Design3 Snackbar
