Compose enableEdgeToEdge를 이용해 전체화면 구현하기.

기본적인 Compose로 구현하는 화면은 상단에 statusBar가 있고 아래에 navigationBar가 있는 형태입니다.

modifier에 statusBarsPadding() navigationBarsPadding()를 추가해서 상단과 하단의 영역을 제외한 나머지 영역을 사용하도록 합니다.

하지만 요즘은 이 영역을 모두 사용해서 더 이쁘게 앱을 만드는 추세입니다.

Jetpack Compose에서 전체화면을 사용해 컨텐츠를 표시하는 방법을 알아보겠습니다.

코드를 통해 확인해봅시다.

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun MyScreen() {
    Scaffold {
        Column(
            modifier = Modifier
                .fillMaxSize()
                .statusBarsPadding()
                .navigationBarsPadding()
                .background(Color(0xFFafeeee)),
            verticalArrangement = Arrangement.SpaceBetween,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Screen Top")
            Text("Screen Bottom")
        }
    }
}

이제 statusBar와 navigationBar를 모두 사용해서 전체화면으로 만들어보겠습니다.

Activity의 onCreate에서 enableEdgeToEdge를 호출하여 앱의 더 넓은 디스플레이를 사용 설정할 수 있습니다.

이때 주의할것이 있습니다. setContentView 전에 호출해야 합니다.

enableEdgeToEdge의 구성을 보도록 하겠습니다.

인자로 statusBarStyle: SystemBarStyle, navigationBarStyle: SystemBarStyle 를 받습니다.

추가해줍니다.

override fun onCreate(savedInstanceState: Bundle?) {
    enableEdgeToEdge(
        statusBarStyle = SystemBarStyle.light(
            Color.Transparent.toArgb(), Color.Transparent.toArgb()
        ),
        navigationBarStyle = SystemBarStyle.light(
            Color.Transparent.toArgb(), Color.Transparent.toArgb()
        )
    )
    ...
}

뭔가 달라지긴 했지만 원했던 전체화면은 여전히 아닙니다.

ui.theme/Theme.kt 파일에서 수정을 더 해줘야합니다.

Theme.kt 의 가운데에 아래의 소스코드가 있습니다.

if (!view.isInEditMode) {
    SideEffect {
        val window = (view.context as Activity).window
        window.statusBarColor = colorScheme.primary.toArgb()
        WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = darkTheme
    }
}

여기서 window.statusBarColor 와 .isAppearanceLightStatusBars 를 수정해줘야 합니다.

 

아래 코드로 수정해줍니다.

SideEffect {
    val window = (view.context as Activity).window
    window.statusBarColor = Color.Transparent.toArgb()
    WindowCompat.getInsetsController(window, view).isAppearanceLightStatusBars = !darkTheme
}

이제 statusBar와 navigationBar를 모두 사용해서 앱을 표시해줄 수 있습니다.

하지만 위,아래 영역이 겹치니 컨텐츠를 표시할 패딩이 필요합니다.

아래처럼 소스코드를 수정해줍니다.

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun MyScreen() {
    Scaffold {
        Column(
            modifier = Modifier
                .fillMaxSize()
//                .statusBarsPadding()
//                .navigationBarsPadding()
                .background(Color(0xFFafeeee))
                .padding(top = it.calculateTopPadding())
                .padding(bottom = it.calculateBottomPadding()),
            verticalArrangement = Arrangement.SpaceBetween,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Screen Top")
            Text("Screen Bottom")
        }
    }
}

완성입니다.

전체 소스코드를 아래에 두겠습니다.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge(
            statusBarStyle = SystemBarStyle.light(
                Color.Transparent.toArgb(), Color.Transparent.toArgb()
            ),
            navigationBarStyle = SystemBarStyle.light(
                Color.Transparent.toArgb(), Color.Transparent.toArgb()
            )
        )
        super.onCreate(savedInstanceState)
        setContent {
            MyComposeExTheme {
                MyScreen()
            }
        }
    }
}

@SuppressLint("UnusedMaterial3ScaffoldPaddingParameter")
@Composable
fun MyScreen() {
    Scaffold {
        Column(
            modifier = Modifier
                .fillMaxSize()
//                .statusBarsPadding()
//                .navigationBarsPadding()
                .background(Color(0xFFafeeee))
                .padding(top = it.calculateTopPadding())
                .padding(bottom = it.calculateBottomPadding()),
            verticalArrangement = Arrangement.SpaceBetween,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Text("Screen Top")
            Text("Screen Bottom")
        }
    }
}