안드로이드 BottomNavigationView ( icon, text 색상 변경 )

BottomNavigationView 사용을 위해 라이브러리를 추가해줍니다.

 

Gradle

dependencies {
implementation 'com.android.support:design:29.0.0' // bottomNavigationView
}

 

activity_main.xml에 사용을 합니다.

( menu는 미리 이름을 작성했습니다. 아래에서 menu를 만들 것입니다. )

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="start"
        app:menu="@menu/my_navigation_items"
        app:layout_constraintBottom_toBottomOf="parent" />

BottomNavigationView에 보여줄 menu, item을 만들어 줍니다.

my_navigation_items.xml 작성에 앞서 미리 아이콘을 준비합니다.

( Android Studio - Vector Asset 이미지를 이용했습니다. )

 

my_navigation_items.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/list"
        android:icon="@drawable/ic_assignment_black_24dp"
        android:enabled="true"
        android:title="list" />
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_access_alarm_black_24dp"
        android:enabled="true"
        android:checked="true"
        android:title="home" />
    <item
        android:id="@+id/user"
        android:icon="@drawable/ic_account_balance_black_24dp"
        android:enabled="true"
        android:title="user" />
</menu>

 

<실행 화면> BottomNavigationView가 생겼습니다.

 

● BottomNavigationView 선택한 Icon, Text 색상 변경 방법

 

drawable -> menu_selector_color.xml을 만듭니다.

menu_selector_color.xml ( 선택했을 때와 아닐 때 색상을 지정합니다.)

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

</selector>

BottomNavigationView 속성에 적용합니다.

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="start"
        app:menu="@menu/my_navigation_items"
        app:itemIconTint="@drawable/menu_selector_color"
        app:itemTextColor="@drawable/menu_selector_color"
        app:layout_constraintBottom_toBottomOf="parent" />

<실행 화면> BottomNavigationView 선택한 Icon, Text 색상 변경했습니다.

( BottomNavigationView의 itemIconTint,  itemTextColor 속성 이용 )

 

● BottomNavigationView 선택한 Icon 변경 방법

선택이 안됐을 때 아이콘을 미리 추가시켰습니다.

BottomNavigationView의 itemIconTint, itemTextColor 속성을 지웠습니다.

( 아이콘을 변경할 것이기 때문에)

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_gravity="start"
        app:menu="@menu/my_navigation_items"


        app:layout_constraintBottom_toBottomOf="parent" />

 

 

 

아이템들의 초기 이미지를 선택 안된 이미지로 변경합니다.

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/list"
        android:icon="@drawable/unselected_list_icon_24dp"
        android:enabled="true"
        android:title="list" />
    <item
        android:id="@+id/home"
        android:icon="@drawable/unselected_home_icon_24dp"
        android:enabled="true"
        android:title="home" />
    <item
        android:id="@+id/user"
        android:icon="@drawable/unselected_user_icon_24dp"
        android:enabled="true"
        android:title="user" />
</menu>

 

이제 MainAcitivty.java에서 OnNavigationItemSelectedListener()를 이용하여 선택이 됐을 때, 이미지들을 변경합니다.

package com.lcw.ex_bottomnavigationview;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    BottomNavigationView bottomNavigationView;
    Menu menu;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        bottomNavigationView=findViewById(R.id.navigation);
        menu=bottomNavigationView.getMenu();

        bottomNavigationView.setOnNavigationItemSelectedListener(new ItemSelectedListener());
        bottomNavigationView.setSelectedItemId(R.id.home);  //선택된 아이템 지정
    }// onCreate()..

    class ItemSelectedListener implements BottomNavigationView.OnNavigationItemSelectedListener{
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
            switch(menuItem.getItemId())
            {
                case R.id.list:
                    menuItem.setIcon(R.drawable.ic_assignment_black_24dp);    // 선택한 이미지 변경
                    menu.findItem(R.id.home).setIcon(R.drawable.unselected_home_icon_24dp);
                    menu.findItem(R.id.user).setIcon(R.drawable.unselected_user_icon_24dp);
                    break;

                case R.id.home:
                    menuItem.setIcon(R.drawable.ic_access_alarm_black_24dp);    // 선택한 이미지 변경
                    menu.findItem(R.id.list).setIcon(R.drawable.unselected_list_icon_24dp);
                    menu.findItem(R.id.user).setIcon(R.drawable.unselected_user_icon_24dp);
                    break;

                case R.id.user:
                    menuItem.setIcon(R.drawable.ic_account_balance_black_24dp);    // 선택한 이미지 변경
                    menu.findItem(R.id.list).setIcon(R.drawable.unselected_list_icon_24dp);
                    menu.findItem(R.id.home).setIcon(R.drawable.unselected_home_icon_24dp);
                    break;
            }// switch()..
            return true;
        }
    }// ItemSelectedListener class..


}// MainActivity class..

 

<추가 설명 그림>

<실행 화면> 선택한 이미지가 변경됩니다.