Android BottomNavigationView 색상 변경 방법 (icon, text, background)

안드로이드의 BottomNavigationView의 색상을 변경하는 방법에 대해 알아봅시다. 이를 통해 사용자가 앱의 하단 탐색 바의 배경색, 아이콘 색상, 그리고 텍스트 색상을 원하는 대로 설정할 수 있습니다.

 

 

Background 색상 변경

이는 xml 파일에서 BottomNavigationView 항목의 "android:background" 설정을 수정함으로써 이루어집니다.

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="0dp"
            android:layout_marginEnd="0dp"
            android:background="?attr/colorPrimary"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/bottom_nav_menu" />

 

Icon 색상 변경

먼저, drawable 폴더에서 "bottomnavigation_select_color.xml" 파일을 생성합니다.

drawable 폴더에서 파일 생성

bottomnavigation_select_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#000000" android:state_checked="true" />
    <item android:color="#CCCCCC" android:state_checked="false" />
</selector>

그리고 이 파일에 state_checked (선택 여부)에 따른 색상을 지정합니다.

 

 

그 후, 이 xml 파일을 BottomNavigationView 항목에 추가합니다. 이는 "app:itemIconTint" 항목을 통해 이루어집니다.

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginStart="0dp"
            android:layout_marginEnd="0dp"
            android:background="@color/white"
            app:itemIconTint="@drawable/bottomnavigation_select_color"
            app:itemTextColor="@drawable/bottomnavigation_select_color"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/bottom_nav_menu" />

 

Text 색상 변경

텍스트 색상의 변경도 아이콘 색상 변경과 유사한 과정을 거칩니다. "app:itemTextColor" 항목에 "bottomnavigation_select_color.xml" 파일을 추가함으로써 텍스트 색상을 변경할 수 있습니다.

 

텍스트와 아이콘의 색상을 다르게 설정하려면, "bottomnavigation_select_color.xml" 형태의 파일을 두 개 생성하고 각각 다른 색상을 지정하면 됩니다. 이렇게 하면 BottomNavigationView의 배경색, 아이콘 색상, 텍스트 색상을 사용자의 원하는 색상으로 간편하게 변경할 수 있습니다.