[Jetpack Compose] Navigation Bar 커스텀하기

Compose의 NavigationBar(전 BottomNavigation)에는 Floating Action Button(FAB)가 없다. 따라서 위의 사진처럼 중앙 버튼이 위로 이동한 형태의 내비게이션 바를 만들기 위해서는 커스텀이 필요하다.

 

 

코드 설명

Scafflod의 FAB를 사용해 제작할 수 있는데 Scafflod의 FAB는 bottomBar 파라미터 위에 별도로 그려지기 때문에 bottomBar에서 해당 공간을 마련해야 한다.

Scaffold(
    bottomBar = { 중앙에 공간 필요 },
    floatingActionButtonPosition = FabPosition.Center,
    floatingActionButton = {
        Box(
            contentAlignment = Alignment.Center,
            modifier = Modifier
                .graphicsLayer { translationY = 60.dp.toPx() }
                .size(56.dp)
                .shadow(2.dp, CircleShape)
                .background(Color.White, CircleShape)
                .border(1.5.dp, Color.Black, CircleShape)
                .clickable { 클릭 이벤트 }
        ) {
            Icon(
                imageVector = ImageVector.vectorResource(R.drawable.ic_add_navigation),
                contentDescription = "추가",
                tint = Color.Black
            )
        }
    }
) { innerPadding ->
    // NavHost 코드
}

floatingActionButtonPosition을 중앙으로 설정하고 graphicsLayer를 사용해 아래로 이동시켜 준다. 다른 부분은 사진에 있는 디자인이며 본인이 필요한 데로 수정해서 사용하면 된다.

 

 

Reference

https://developer.android.com/develop/ui/compose/components/fab?hl=ko