[Kotlin] Bottom Navigation Icon Click Event 처리

Flo 클론코딩을 할 때도 그랬지만, Bottom Navigation Bar는 요즘 사용하는 어플에서 빼놓을 수 없는 요소라고 생각한다. 아이콘을 클릭하는 걸로 Fragment가 전환되게끔 하는 코드는 짜봤었지만, 유저가 어느 화면에 위치해 있는지 알기 위해서는 현재 화면의 아이콘만 색상을 변경해줄 필요가 있다고 느꼈다. 그래서 이를 코드로 짜봤다.

 

//menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_writing"
        android:icon="@drawable/navigation_write_selector"
        android:title="@string/blank" />
    <item
        android:id="@+id/action_test"
        android:icon="@drawable/ic_menu_test"
        android:title="@string/blank" />
    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_menu_home"
        android:title="@string/blank"
        />
    <item
        android:id="@+id/action_search"
        android:icon="@drawable/navigation_search_selector"
        android:title="@string/blank" />
    <item
        android:id="@+id/action_myPage"
        android:icon="@drawable/navigation_my_selector"
        android:title="@string/blank" />
</menu>

menu.xml에는 하단에 위치할 아이콘들을 넣어줄 수 있다. 내 경우에는 5개의 아이콘을 사용하기 때문에 item도 5rofmf 만들어줬다.

 

//navigation_my_selector.xml

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

selector를 사용해서 클릭을 하면 아이콘을 ic_menu_my_selected 로 변경하게끔 설정했다. 이렇게 설정하면 아래와 같이 보여지게 된다.

어플 Hi STORY 화면

한 가지 확인해야 할 점은 가끔씩 화면 전환이나 아이콘 변경이 늦게 되는 경우가 있는데 이게 AVD로 테스트를 해서 발생하는 건지, 또는 코드 자체의 문제인지 확인해 볼 필요가 있어 보인다. selector는 기록하기 화면을 만들 때 썼어서 익숙하게 사용할 수 있었다.