BottomNavigationView 클릭했을때와 안했을 때 다른 아이콘 넣기

혼자 앱을 만들때는 아이콘이 필요할땐 그냥 안스 기본 내장 vector icon 들을 사용하곤 했다.

하지만 최근엔 디자이너님들과 협업을 하면서 아이콘을 만들어주신 것들을 사용하는데 평소와 다른점이 있어 블로그에 작성해보려 한다.

바텀 네비게이션 뷰 에서 아이콘을 클릭하면 아이콘의 테두리만 두꺼워지고 primary color로 바뀐다.

만약 클릭했을때 다음과 같이 변화를 주려면 어떻게 해야할까

같은 아이콘 처럼 보이지만 클릭했을때와 안했을때는 다른 아이콘이다. 테두리만 두꺼워지지 않고 색이 채워져버리기 때문이다. 다음과 같이 구성하려면

bottom_nav xml에 각 다음과 같은 drawable 파일들을 넣어주면 된다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/ic_home" android:state_checked="false"/>
    <item android:drawable="@drawable/ic_home_fill" android:state_checked="true"/>
</selector>

아이콘을 체크의 유무에 따라 다른 아이콘을 넣어주면 된다.

참고로 바텀네비게이션뷰의 title 없이 icon만 가운데로 오게 하고 싶을땐
title = ""로 선언해주고

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_main"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="start"
        android:background="@color/white"
        app:layout_constraintBottom_toBottomOf="parent"
        app:labelVisibilityMode="unlabeled"
        app:menu="@menu/item_bottom_nav" />

위 코드처럼

 app:labelVisibilityMode="unlabeled"

를 추가해주면 된다!

xml 디자인 관련해서도 아직 부족한 부분이 많기 때문에 블로그에 정리하며 공부해보도록 하겠다.