[Kotlin/Android] BottomNavigation 설정/ 눌렀을 때 아이콘 색상 변경

이번 글에서 하고자 하는 것은 :::::::::::::
bottomNavigation에서 아이콘을 클릭했을 떄 사진1처럼 보라색 동그라미 말고,
사진2처럼 아이콘과 글씨의 색이 변하게 하는 것 

예쩐에 만들었떤 앱인데 방법 까먹음 이래서 기록이 중요합니다.

 

 

가봅시다

 

1. 클릭시 색상을 변경하기 위한 drawable 추가

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:color="#555B5F"
        android:state_checked="false"/>

    <item
        android:color="#0084ED"
        android:state_checked="true"/>

</selector>​

2. bottomNavigation 이 있는 xml 파일로 가서 속성 설정

bottomNavigation의 배경색 
app:itemBackground="@color/white"   

bottomNavigation의 아이콘 아래 글자 보이게
app:labelVisibilityMode="labeled"

bottomNavigation의 아이콘 클릭했을때 색상 설정
app:itemIconTint="@drawable/bottomnavi_click_color"

bottomNavigation의 아이콘 아래 글자 색상설정
app:itemTextColor="@drawable/bottomnavi_click_color"


전체코드는 아래와 같음

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity"
    tools:transitionGroup="true">

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/main_container"
        android:name="com.psg.smartflowoperation.ui.Map.MapMainFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@+id/main_bottomNavigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_bottomNavigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:itemBackground="@color/white"
        app:itemIconTint="@drawable/bottomnavi_click_color"
        app:itemTextColor="@drawable/bottomnavi_click_color"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/menu_main_bottomnavigation" />
</androidx.constraintlayout.widget.ConstraintLayout>​

 

근데 왜 리플효과는 안사라져?
다음 글에서는 리플효과 없애는 법을 알아보겠다.