[Android, Kotlin] Compose Material3 Bottom Navigation의 Indicator 효과를 제거하기 (2)

죽은 프로젝트 살리기 2탄

이슈 해결기

 

지난 죽은 프로젝트 살리기 1탄에서는 v2 계획 후 데이터베이스 설계까지 완료하였다.

그래서 필자는 지난 포스팅을 올리고 난 뒤로 바로 Planner v2 개발을 시작하였다.

필자의 머릿속에는 bottom navigation을 활용해서 화면 2개를 메인으로(달력이 있는 화면, 통계 화면) navigation bar를 구성하는 작업을 하는 중

다음과 같은 UI적 불편함(?)이 있었다.

문제의 이슈 사진

사진을 보면 클릭이 된 부분에 파랗게(?) 둥근 effect가 발생하고 있는 것을 볼 수 있다.

필자 기억으로는 material3에서 제공하는 기본적인 indicator라고 알고 있는데,

필자의 경우에는 저 effect를 삭제하고 싶었다.

 

저 effect를 indicator라고 한다.

compose를 다루는 사람들이면 한 번씩은 들어본 단어일 것이다.

indicator는 어떤 component가 클릭된 상태일 때 나타나는 effect 같은 거라고 보면 될 듯하다.

 

그래서 indicator를 삭제하는 방법에 대해 검색을 해보았지만 비슷한 질문들은 있었지만 크게 도움이 되는 것들은 없었다.

검색을 해도 만족스러운 결과가 나오지 않아서 navigation bar 쪽 코드를 뒤져보던 중 유용한 속성을 발견해 생각보다 쉽게(?) 해결할 수 있었다.(검색을 했더니 custom indicator를 제작해 그것을 적용해 오류를 해결하는 방법밖에 나오지 않았다. 하지만 필자는 굳이 custom indicator까지 만드는 귀찮은 짓(?)은 가능하면 피하고 싶었다.)

 

이번 포스팅에서는 위의 UI적 이슈를 고치는 과정에 대해서 기록을 남겨볼까 한다.

 

1. 이슈 해결법

우선 필자가 구현한 navigation 코드부터 보자.

@Composable
fun PlannerV2BottomNavigation(navHostController: NavHostController) {
    val bottomNavItems = listOf(
        BottomNavItem.Calendar,
        BottomNavItem.Statistics
    )

    NavigationBar(
        modifier = Modifier,
        containerColor = Color.White
    ) {
        val navBackStackEntry by navHostController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route

        bottomNavItems.forEach { navItem ->
            NavigationBarItem(
                selected = currentRoute == navItem.route,
                onClick = {
                    navHostController.navigate(navItem.route) {
                        popUpTo(navHostController.graph.findStartDestination().id) {
                            saveState = true
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                },
                icon = {
                    Icon(
                        painter = painterResource(id = navItem.icon),
                        contentDescription = "navigation icon"
                    )
                },
                colors = NavigationBarItemDefaults.colors(
                    selectedIconColor = Color.Black,
                    unselectedIconColor = Color.LightGray
                )
            )
        }
    }
}

Navigation Component들의 이름들이 기존의 Material 버전과는 다르다. 이 점을 참고하자.

• material의 BottomNavigation이 material3에서는 NavigationBar로 변경
• material의 BottomNavigationItem이 material3에서는 NavigationBarItem으로 변경

그래도 하는 역할은 동일하고 사용법도 크게 다르지 않아서 걱정하지 않아도 될 듯하다.

 

위의 코드는 전형적인(?) bottom navigation 코드이다.

근데 저 코드를 실행하면 위에서 언급한 사진처럼 item을 클릭했을 때 거슬리는(?) effect가 발생한다.

검색을 해보니까 material3의 bottom navigation bar에서는 indicator를 제거할 수 있는 기능은 지원하지 않는다고 했다.

그러면 기존의 material 버전으로 만들어야 하는가?

그런데 필자는 그렇게 하지 않았다. 한 번 정했으니 끝을 보자는 마인드로 해결법을 찾아 나섰다.(그냥 component 이름만 바꿨으면 됐을 수도 있다.)

그래서 30분 동안 씨름해서 결국 방법을 찾아냈다.(생각보다 오래 걸리지는 않았다. 다행)

 

해결 방법은

NavigationItem Component의 colors 파라미터는 text와 icon의 selected/unselected 상태의 색을 정할 수 있기에 bottom navigation bar를 사용하는 개발자들이 거의 웬만하면 사용할 거라고 본다.

바로 그곳에 해결 방법이 숨겨져 있었다.

NavigationBarItem(
    . . .
    colors = NavigationBarItemDefaults.colors(
        selectedIconColor = Color.Black,
        unselectedIconColor = Color.LightGray
    )
)

 

NavigationBarItemDefaults.colors()에서 parameter의 정보를 보면

indicatorColor 파라미터로 indicator를 지울 수는 없어도 색은 변경할 수 있어 보였다.

그래서 바로 Transparent로 설정하면 투명해져서 없는 것과 마찬가지가 되지 않을까? 해서 바로 시도해 보았다.

colors = NavigationBarItemDefaults.colors(
    selectedIconColor = Color.Black,
    unselectedIconColor = Color.LightGray,
    indicatorColor = Color.Transparent
)

결과는....

???

왜인지는 모르겠지만 indicator 부분이 투명해지는 게 아니라 검게 변했다. 혹시 몰라서 Color(0x00FFFFFF)도 해보았는데 똑같았다.(이유를 아시는 분은 댓글로 알려주시면 감사하겠습니다.)

그래서 일단 해결책으로는 자신이 설정한 bottom navigation bar와 같은 색으로 설정해 주면 임시방편으로 해결할 수 있다.

colors = NavigationBarItemDefaults.colors(
    selectedIconColor = Color.Black,
    unselectedIconColor = Color.LightGray,
    indicatorColor = Color.White
)

필자의 경우에는 bottom navigation bar의 background color를 white로 설정해 놓았기에, indicatorColor도 white로 설정해 주었다.

그러면

옳은 예시(?)

indicator 효과가 사라진 것(?)을 볼 수 있다.

하지만 item을 클릭했을 때의 indicator의 잔상(?)이 보이는 것은 어쩔 수가 없는 듯하다.

잔상(?)은 아래의 영상을 보면 이해가 될 것이다.

 

아무튼 성공 영상

 

정리

• bottom navigation bar를 만들면서 발생한 사소한(?) 이슈를 해결하는 것으로 생존 신고를 했다.
• 아직 indicator를 삭제하는 방법은 없는 듯하다 나중에는 만들어줄지도?
• 현재 indicator로 고통받고 계실 분들을 위해(그리고 나중에 다시 bottom navigation bar를 사용할 나를 위해)이 포스팅을 보고 도움을 받으셨으면 좋겠다.

 

개발 기록을 남기기 위해 일기 형식으로 작성해서 글이 길어졌네요. 끝까지 읽어 주셔서 감사합니다(꾸벅)