[Android] BottomNavigationView Custom

내가 커스텀해야 되는 것

1. 상태와 관계 없이
   1. 아이콘 vector
   2. GNB background color
   3. 각 간격 설정
2. active, deactive 상태의
   1. 아이콘 색상
   2. 텍스트 색상
   3. 애니메이션 제거

 

아이콘 벡터 커스텀

→ 그냥 menu 관련 xml file에서 설정해주면 됨.

 

GNB Background Color?

// <com.google.android.material.bottomnavigation.BottomNavigationView/> 안에 넣어주어야 함.
android:background="@color/Gray_1"
app:itemBackground="@color/Gray_1"

둘 다 설정해주어야 됨. 아이템만 설정하면 빈 공간이 있는 경우 원치 않는 색상이 보이게 됨.

 

아이콘 & text 색상 커스텀?

// <com.google.android.material.bottomnavigation.BottomNavigationView/> 안에 넣어주어야 함.
app:itemIconTint="@color/selector_menu_home_color"
app:itemTextColor*="@color/selector_menu_home_color"

//color/selector_menu_home_color 파일 

<?xml version="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
    <itemandroid:color="@color/Gray_15"android:state_checked="true" />
    <itemandroid:color="@color/Gray_9"android:state_checked="false" />
</selector>

 

애니메이션 제거?

// <com.google.android.material.bottomnavigation.BottomNavigationView/> 안에 넣어주어야 함.
app:itemHorizontalTranslationEnabled="false"

이거 외에도 아래의 각 간격 설정 타이틀에서 dimens에 추가로 설정해야 되는 것들이 있음. 아래에 기록함.

 

각 간격 설정

<dimen name="design_bottom_navigation_active_item_max_width">168dp</dimen>
<dimen name="design_bottom_navigation_active_item_min_width">96dp</dimen>
<dimen name="design_bottom_navigation_active_text_size">14sp</dimen>
<dimen name="design_bottom_navigation_elevation">8dp</dimen>
<dimen name="design_bottom_navigation_height">56dp</dimen>
<dimen name="design_bottom_navigation_icon_size">24dp</dimen>
<dimen name="design_bottom_navigation_item_max_width">96dp</dimen>
<dimen name="design_bottom_navigation_item_min_width">56dp</dimen>
<dimen name="design_bottom_navigation_label_padding">10dp</dimen>
<dimen name="design_bottom_navigation_margin">8dp</dimen>
<dimen name="design_bottom_navigation_shadow_height">1dp</dimen>
<dimen name="design_bottom_navigation_text_size">12sp</dimen>

이게 bottom navigation 관련한 values.xml에 설정된 값들임. (안드로이드 내장) 근데 검색해보니까 m3는 더 많은 커스텀 값이 있는 듯함. (m3 관련 커스텀 값 : https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/bottomnavigation/res/values/dimens.xml)

여튼 나는 m3를 사용하지 않기 때문에 내가 원하는 간격 간련해 override한 것만 나열하면 다음과 같음.

// dimens.xml
<!-- bottom navigation custom -->
<dimen name="design_bottom_navigation_text_size" tools:override="true">10dp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">10dp</dimen>
<dimen name="design_bottom_navigation_height" tools:override="true">50dp</dimen>
<dimen name="design_bottom_navigation_margin" tools:override="true">5dp</dimen>

• design_bottom_navigation_text_size : 선택하지 않았을 때의 텍스트 크기
• design_bottom_navigation_active_text_size : 선택했을 때의 텍스트 크기

위의 두 값이 같으면 텍스트가 커지는 애니메이션이 사라지게 됨.

• design_bottom_navigation_height : GNB 자체의 height 설정
• design_bottom_navigation_margin : GNB의 아이콘 + 텍스트를 아이템 하나로 보고, 이 아이템의 마진 값을 설정해주는 부분임. 중요한 건 텍스트도 포함이란 점…