하단 네비게이션보기에서 선택된 탭의 색상


142

BottomNavigationView프로젝트에를 추가하고 있으며 선택한 탭에 대해 다른 텍스트 (및 아이콘 색조) 색상을 원합니다 (선택되지 않은 탭 효과를 흐리게 표시하기 위해). android:state_selected="true"색상 선택기 리소스 파일에서 다른 색상을 사용하면 작동하지 않는 것 같습니다. 또한 android:state_focused="true"또는로 추가 항목 항목을 시도했지만 android:state_enabled="true"불행히도 효과가 없습니다. 또한 state_selected기본 (선택하지 않은) 색상에 대해 속성을 false (명시 적으로)로 설정했지만 운이 없었습니다.

레이아웃에 뷰를 추가하는 방법은 다음과 같습니다.

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:itemBackground="@color/silver"
        app:itemIconTint="@color/bnv_tab_item_foreground"
        app:itemTextColor="@color/bnv_tab_item_foreground"
        app:menu="@menu/bottom_nav_bar_menu" />

내 색상 선택기 ( bnv_tab_item_foreground.xml) 는 다음과 같습니다 .

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@android:color/darker_gray"  />
    <item android:state_selected="true" android:color="@android:color/holo_blue_dark" />
</selector>

그리고 내 메뉴 리소스 ( bottom_nav_bar_menu.xml) :

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

    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_local_taxi_black_24dp"
        android:title="@string/home" />
    <item
        android:id="@+id/action_rides"
        android:icon="@drawable/ic_local_airport_black_24dp"
        android:title="@string/rides"/>
    <item
        android:id="@+id/action_cafes"
        android:icon="@drawable/ic_local_cafe_black_24dp"
        android:title="@string/cafes"/>
    <item
        android:id="@+id/action_hotels"
        android:icon="@drawable/ic_local_hotel_black_24dp"
        android:title="@string/hotels"/>

</menu>

도움을 주시면 감사하겠습니다.

답변:


310

를 만드는 동안 selector항상 기본 상태를 마지막에 유지하십시오. 그렇지 않으면 기본 상태 만 사용됩니다. 다음과 같이 선택기에서 항목을 다시 주문해야합니다.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@android:color/holo_blue_dark" />
    <item android:color="@android:color/darker_gray"  />
</selector>

그리고 함께 사용될 상태 BottomNavigationBarstate_checked아닙니다 state_selected.


77
<android.support.design.widget.BottomNavigationView app : itemIconTint = "@ drawable / nav_item_color_state"app : itemTextColor = "@ drawable / nav_item_color_state"/>에 추가
dianakarenms

1
필자의 경우 동적 메뉴를 생성해야했지만이 솔루션이 작동하지 않았습니다. 유일한 해결책은 메뉴 항목 stackoverflow.com/a/7106111/2098878
Rafael

9
"state_checked not state_selected"입니다. 얼마나 시간 절약 :) 감사합니다!
Piotr Ślesarew

3
@ drawable 대신 <android.support.design.widget.BottomNavigationView app : itemIconTint = "@ color / nav_item_color_state"app : itemTextColor = "@ color / nav_item_color_state"/>에 추가
Anton Makov

1
나처럼 붙어있는 누군가를 위해, 나는 "res"에 "color"디렉토리를 생성 하고이 파일을 거기에 넣어야했다.
Tayyab Mazhar

67

1. 내부 입술 이름 폴더 (드로우 어블)

2. 컬러 폴더를 마우스 오른쪽 버튼으로 클릭하십시오. 선택 새로 만들기 -> 색상 자원 파일 -> color.xml 파일 생성 (bnv_tab_item_foreground)을 (그림 1 : 파일 구조)

3. bnv_tab_item_foreground를 복사하여 붙여 넣기

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_marginEnd="0dp"
            android:layout_marginStart="0dp"
            app:itemBackground="@color/appcolor"//diffrent color
            app:itemIconTint="@color/bnv_tab_item_foreground" //inside folder 2 diff colors
            app:itemTextColor="@color/bnv_tab_item_foreground"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:menu="@menu/navigation" />

bnv_tab_item_foreground :

 <?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/white" />
        <item android:color="@android:color/darker_gray"  />
    </selector>

그림 1 : 파일 구조 :

그림 1 : 파일 구조


53

BottomNavigationView사용 colorPrimary를 선택한 탭에 적용 주제에서 그것을 사용 android:textColorSecondary 비활성 탭 아이콘 색조에 대한.

선호하는 기본 색상으로 스타일을 만들고 BottomNavigationViewxml 레이아웃 파일에서 테마로 설정할 수 있습니다.

styles.xml :

 <style name="BottomNavigationTheme" parent="Theme.AppCompat.Light">
        <item name="colorPrimary">@color/active_tab_color</item>
        <item name="android:textColorSecondary">@color/inactive_tab_color</item>
 </style>

your_layout.xml :

<android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?android:attr/windowBackground"
            android:theme="@style/BottomNavigationTheme"
            app:menu="@menu/navigation" />

3
android:textColorSecondary작동하지 않습니다. 사용해야하는 android:colorForeground대신
마흐디 Moqadasi에게

이것이 가장 좋은 대답입니다. "selector"방법은 "darker_gray"를 원래 탭과 다른 비활성 탭 색으로 사용합니다. 또한 android:textColorSecondary나를 위해 작동합니다. 감사!
Sam Chen

9

프로그래밍 방식으로 아이콘 및 텍스트 색상을 변경하려는 경우 :

ColorStateList iconsColorStates = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{
                    Color.parseColor("#123456"),
                    Color.parseColor("#654321")
            });

    ColorStateList textColorStates = new ColorStateList(
            new int[][]{
                    new int[]{-android.R.attr.state_checked},
                    new int[]{android.R.attr.state_checked}
            },
            new int[]{
                    Color.parseColor("#123456"),
                    Color.parseColor("#654321")
            });

    navigation.setItemIconTintList(iconsColorStates);
    navigation.setItemTextColor(textColorStates);

5

답변하기에 너무 늦었지만 누군가에게 도움이 될 수 있습니다. 나는 매우 어리석은 실수를하고 있었고 Select 및 select for color change에 bottom_color_nav.xml 이라는 선택기 파일을 사용하고 있었지만 여전히 BottomNavigationView의 색상 변경을 반영하지 않았습니다.

그런 다음 onNavigationItemSelected 메서드 에서 false 를 반환한다는 것을 알고 있습니다. 이 방법으로 true를 반환하면 잘 작동합니다.


2

선택기 항목 속성 android:state_enabled대신 사용하십시오 android:state_selected.


질문에서 언급했듯이 state_enabled도 시도했지만이 특정 위젯에 사용되는 올바른 상태 속성이 아닙니다. 문제는 답변에서 언급 한 것입니다. 1. 순서가 잘못되었습니다 (기본 상태는 선택기의 마지막 항목이어야 함) 2. state_checked는 BottomNavigationView와 함께 사용할 올바른 상태 속성입니다.
Javad Sadeqzadeh

2

나는 com.google.android.material.bottomnavigation.BottomNavigationView(OP와 동일하지 않음)을 사용하고 있으며 위의 다양한 제안 된 솔루션을 시도했지만 효과가 있었던 유일한 것은 설정 app:itemBackgroundapp:itemIconTint선택기 색상이었습니다.

        <com.google.android.material.bottomnavigation.BottomNavigationView
            style="@style/BottomNavigationView"
            android:foreground="?attr/selectableItemBackground"
            android:theme="@style/BottomNavigationView"
            app:itemBackground="@color/tab_color"
            app:itemIconTint="@color/tab_color"
            app:itemTextColor="@color/bottom_navigation_text_color"
            app:labelVisibilityMode="labeled"
            app:menu="@menu/bottom_navigation" />

color/tab_color.xml용도android:state_checked

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/grassSelected" android:state_checked="true" />
    <item android:color="@color/grassBackground" />
</selector>

또한 선택된 상태 색상을 사용하고 있습니다. color/bottom_navigation_text_color.xml

여기에 이미지 설명을 입력하십시오

여기에 완전히 관련이 없지만 완전한 투명성을 위해 내 BottomNavigationView스타일은 다음과 같습니다.

    <style name="BottomNavigationView" parent="Widget.Design.BottomNavigationView">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">@dimen/bottom_navigation_height</item>
        <item name="android:layout_gravity">bottom</item>
        <item name="android:textSize">@dimen/bottom_navigation_text_size</item>
    </style>

1

textColor를 설정하기 위해 xml에서 직접 설정할 수있는 BottomNavigationView두 가지 스타일 속성 이 있습니다.

  • itemTextAppearanceActive
  • itemTextAppearanceInactive
In your layout.xml file:

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bnvMainNavigation"
            style="@style/NavigationView"/>

In your styles.xml file:

<style name="NavigationView" parent="Widget.MaterialComponents.BottomNavigationView">
  <item name="itemTextAppearanceActive">@style/ActiveText</item>
  <item name="itemTextAppearanceInactive">@style/InactiveText</item>
</style>
<style name="ActiveText">
  <item name="android:textColor">@color/colorPrimary</item>
</style>
<style name="InactiveText">
  <item name="android:textColor">@color/colorBaseBlack</item>
</style>

0

이것은 작동합니다 :

setItemBackgroundResource(android.R.color.holo_red_light)

0

선택기를 만드는 대신 스타일을 만드는 가장 좋은 방법입니다.

<style name="AppTheme.BottomBar">
    <item name="colorPrimary">@color/colorAccent</item> 
</style>

선택하거나 선택하지 않은 텍스트 크기를 변경합니다.

<dimen name="design_bottom_navigation_text_size" tools:override="true">11sp</dimen>
<dimen name="design_bottom_navigation_active_text_size" tools:override="true">12sp</dimen>

안드로이드를 즐기십시오!

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.