下部ナビゲーションビューで選択したタブの色


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" />に追加します
追加

1
私の場合、動的メニューを生成する必要があり、このソリューションは機能しませんでした。唯一有効な解決策は、メニュー項目を手動で設定することでした。stackoverflow.com/a/7106111/2098878
Rafael

9
「state_checked not state_selected」。どのような時間の節約になります:)ありがとうございます!
PiotrŚlesarew2017

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

66

1.内部の解像度は名前の色でフォルダを作成します(描画可能なように)

2. colorフォルダーを右クリックします。選択して 新規作成]> [カラーリソースファイル- > 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代わりに使用する必要があります
Mahdi Moqadasi

これが最良の答えです。「selector」メソッドは、「darker_gray」を元のタブとは異なる非アクティブなタブの色として使用します。またandroid:textColorSecondary私のために働きます。ありがとう!
Sam Chen

8

プログラムでアイコンとテキストの色を変更したい場合:

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

回答するには遅すぎますが、誰かに役立つかもしれません。私は非常にばかげた間違いをしていました。選択と選択解除の色の変更にbottom_color_nav.xmlという名前のセレクターファイルを使用していましたが、それでもBottomNavigationViewの色の変更を反映していませんでした。

その後、私はonNavigationItemSelectedメソッドでfalse返していました。このメソッドでtrueを返す場合は問題なく動作します。


2

セレクター項目属性ではandroid:state_enabledなくを使用してみてくださいandroid:state_selected


質問で述べたように、state_enabledも試しましたが、これはこの特定のウィジェットで使用する正しい状態属性ではありません。問題は答えで述べられたものでした:1.順序が間違っていました(デフォルトの状態はセレクターの最後の項目である必要があります)2. state_checkedは、BottomNavigationViewで使用される正しい状態属性です。
Javad Sadeqzadeh 2016

1

textColorを設定するために、xmlから直接設定できるBottomNavigationView2つのスタイルプロパティがあります。

  • 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>

1

私は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>


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>

Androidをお楽しみください!

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.