Movie 프로젝트 edge-to-edge

v0.1.0 기준

Release v0.1.0 · jhg3410/Movie

 

edge-to-edge 를 디자인 단계에서 넣은 이유는
dark mode 라면 StatusBar 가 검은색인데 만약 영화의 Poster 가 하얀색이라면 대조가 되어 깔끔하지 않았습니다.

 

 

왼쪽보단 오른쪽이 더 아름답지 않나요?

 

 

 

 

 

보시다시피 home Screen과 detail Screen 이 StatusBar 영역을 통과했습니다. 사실 통과했다기보단 뒤에 그려집니다.
(Popular Screen 은 TopBar 가 StatusBar 영역만큼 Padding 을 부여합니다.)

 

edge-to-edge(full-screen)

 

사실 처음엔 edge-to-edge 를 적용하지 않으려고 했습니다. Status bar 의 정보성을 훼손했기 때문입니다.

 

영화의 Poster 가 가변적이라 Status bar 가 Light 로 되어있고, Poster 가 검은색이면, StatusBar 의 정보가 가려졌습니다.

 

다양한 레퍼런스를 참고한 뒤, 

"상단에 Gradient 를 주면 되겠구나" 했습니다.

 

상단 30% 영역에 제공했습니다.

val colorStopsOfTop = arrayOf(
    0.0f to MaterialTheme.colorScheme.background.copy(alpha = 0.5f),
    0.3f to Color.Transparent,
)

 

 

그렇다면 어떻게 edge-to-edge 를 구현하고 대응했을까요?

 

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

 

false 로 해주면 content view 를 WindowInsets 에 fit 시키지 않습니다.

 

이렇게만 하면 사실 StatusBar, navigationBar 의 영역 뒤에 Content View 가 그려집니다.

 

하지만 Scaffold 로 최상위 Composable 을 감쌓다면 적용이 안 될 수도 있습니다.

그 이유는

 

무슨 뜻이냐면,

TopAppBar 에도 windowInsets 가 기본적으로 적용되어 있기 때문에,

Scaffold 에 topBar/bottomBar 가 존재한다면, 그들이 대신 해줄것으로 예상하기에 windowInsets 를 적용하지 않습니다.

 

하지만 topBar/bottomBar 가 없다면, 본인이 해당 영역만큼 padding 을 준다는겁니다.

그렇기에 contentWindowInsets 값을 0.dp 로 넣어주면 됩니다.

 

 

하지만 모든 화면에 edge-to-edge 를 적용시키지 않고 싶을 수 있습니다.

modifier = modifier.statusBarsPadding()

modifier = modifier.navigationBarsPadding()

그렇다면 이렇게 각 영역만큼 Padding 을 주면 됩니다.

 

 

https://developer.android.com/develop/ui/views/layout/edge-to-edge

Display content edge-to-edge in your app  |  Android Developers