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


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>

그리고 함께 사용될 상태 BottomNavigationBar는 state_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:itemBackground및 app: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.