본문 바로가기

android

[j android] BottomNavigationBar/View Indicator (해당 메뉴 표시, 색 변경)

728x90
반응형

BottomNavigationView에 Indicator를 추가와 해당 버튼이 선택됐을 때 , 선택 안됐을 때 색 변경을 해보자.

 

먼저 res/drawable 폴더에 각각 파일을 생성

 

- 색 변경

1. drawable/bottom_icon_color.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/yellow" >
    </item>
    <item android:state_checked="false" android:color="@color/gray"/>
</selector>
  • state_checked로 선택이 됐을 때 (true) 색상과 안 됐을 때 (false) 색상을 설정해준다.

 

- Indicator

1. drawable/bottom_nav_indicator.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/yellow" >
    <layer-list>
        <item android:gravity="top|center_horizontal">
            <shape android:shape="rectangle">
                <size android:width="50dp" android:height="5dp" />
                <solid android:color="@color/yellow" />
            </shape>
        </item>
    </layer-list>
</item>
</selector>
  • gravity : indicator 위치를 지정
  • shape : 모양을 설정
  • size : 크기 설정
  • solid : 색상 설정

 

파일을 생성한 후 xml 파일에 적용한다.

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/nav_view"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="?android:attr/windowBackground"
            app:itemIconTint="@drawable/bottom_icon_color"
            app:itemTextColor="@drawable/bottom_icon_color"
            app:itemBackground="@drawable/bottom_nav_indicator"
            app:labelVisibilityMode="unlabeled"
            app:menu="@menu/bottom_nav_menu" />
  • itemIconTint, itemTextColor 는 색 변경을 해주는 파일을 적용
  • itemBackground 는 indicator 파일을 적용

 

 

 

 

 

** 실행화면 **

 

 

728x90
반응형