Android Jetpack Compose Scaffold 및 BottomAppBar 여백 없애는 방법

 

Scaffold란?

Jetpack Compose에서 Scaffold는 앱의 기본 화면 레이아웃 구조를 제공하는 컴포넌트입니다. 앱 화면을 구성할 때 자주 사용되는 Material Design UI 요소인 TopAppBar, BottomAppBar, FloatingActionButton, Drawer 등을 쉽게 배치할 수 있습니다.

Scaffold 주요 슬롯 구성 요소

• topBar: 상단 앱바 배치를 위한 슬롯
• bottomBar: 하단 앱바 배치를 위한 슬롯
• floatingActionButton: 플로팅 액션 버튼 슬롯
• drawerContent: 네비게이션 서랍 콘텐츠 슬롯
• content: 메인 콘텐츠 영역

 

---

BottomAppBar란?

BottomAppBar는 화면 하단에 고정되어 중요한 메뉴 버튼이나 네비게이션 요소를 표시하는 앱바입니다. Material Design 가이드라인에 따라 앱의 일관된 탐색 경험을 제공할 수 있도록 도와줍니다.

@Composable
fun BottomAppBarExample() {
    Scaffold(
        bottomBar = {
            BottomAppBar(
                content = {
                    Text(text = "하단 앱바")
                }
            )
        }
    ) { innerPadding ->
        // 메인 콘텐츠
        Text(modifier = Modifier.padding(innerPadding), text = "Main Content")
    }
}

 

BottomAppBar 기본 여백 적용

Scaffold는 기본적으로 콘텐츠 영역에 패딩을 적용하여 BottomAppBar와 겹치지 않도록 합니다. 

 

근데...

여백은 사용하기 싫단 말이죠.......?!

 

 

 

---

 

다 방법이 있습니다..!

아주 초 간단한 방법 !!

 

 

BottomAppBar 여백 없애는 방법 🧐

이러한 여백을 제거하려면 다음과 같은 방법으로 설정할 수 있습니다.

 

1. BottomAppBar contentPadding 사용

Scaffold의 contentPadding 의 값을 0.dp 로 설정 해줍니다.

@Composable
fun MyBottomAppBar(bottomNavHost: NavHostController) {
    BottomAppBar(
        actions = {
            BottomButton(
                onItemClick = { route ->
                    bottomNavHost.safeNavigate(route = route)
                }
            )
        },
        contentPadding = PaddingValues(0.dp)
    )
}

 

 

---

결론 🥳

Scaffold의 bottomAppBar에서 여백이 생기는 문제는 bottomAppBar 적용하면 메뉴를 감싸는 기본 패딩이 존재하기 때문 입니다.  contentPadding 을 사용하여 이를 해결할 수 있습니다.

 

 

꿀팁 공유 완료 👍

 

 

contentPadding = PaddingValues(0.dp)

 

 

 

 

BottomAppBar

 

추가로 BottomAppBar 에서 windowInsets 하단 영역을

기본으로 여백을 잡고 있어 따로 페이지에 여백을 설정해주지 않아도 된다!

 

흰색 네비게이션 영역이 Padding 준 결과, 회색이 BottomAppBar 기본 여백