ナビゲーションドロワーのチェックされたメニュー項目の色を変更する


103

新しいAndroidデザインサポートライブラリを使用して、アプリケーションにナビゲーションドロワーを実装しています。

選択したアイテムの色を変更する方法がわかりません!

メニューのxmlは次のとおりです。

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">
    <item
        android:id="@+id/navigation_item_1"
        android:icon="@drawable/ic_1"
        android:title="@string/navigation_item_1"/>

    <item
        android:id="@+id/navigation_item_2"
        android:icon="@drawable/ic_2"
        android:title="@string/navigation_item_2"/>
</group>

そして、これは内に配置されたnavigationview xmlですandroid.support.v4.widget.DrawerLayout

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/black"
    app:itemTextColor="@color/primary_text"
    app:menu="@menu/menu_drawer">

    <TextView
        android:id="@+id/main_activity_version"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_marginBottom="@dimen/activity_vertical_margin"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:textColor="@color/primary_text" />

</android.support.design.widget.NavigationView>

ご協力ありがとうございました !

[編集]私はすでにこのようなソリューションを見てきました:androidメニューの背景色を変更します

それはかなりハックのようです、そして私は新しいデザインサポートライブラリーで、よりきれいな何かが導入されたであろうと私は思いましたか?


回答:


244

これはColor State Resourceを使用して実現できます。あなたがあなたの中で気づいたらNavigationViewあなたは使っています

app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"

ここでは、@color/blackまたは@color/primary_testを使用する代わりに、を使用しColor State List Resourceます。そのためには、まずディレクトリxml内に新しい(drawer_item.xmlなど)を作成します(colorディレクトリ内にある必要がありresます)。名前の付いたディレクトリがない場合colorは作成します。

今内部drawer_item.xmlはこのようなことをします

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="checked state color" android:state_checked="true" />
    <item android:color="your default color" />
</selector>

最後のステップは、 NavigationView

<android.support.design.widget.NavigationView
    android:id="@+id/activity_main_navigationview"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/drawer_header"
    app:itemIconTint="@color/drawer_item"  // notice here
    app:itemTextColor="@color/drawer_item" // and here
    app:itemBackground="@android:color/transparent"// and here for setting the background color to tranparent
    app:menu="@menu/menu_drawer">

このように、あなたがのために別の色の状態リソースのリストを使用することができIconTintItemTextColorItemBackground

アイテムを(チェックインxmlまたはプログラムで)チェック済みに設定すると、特定のアイテムの色がチェックされていないものとは異なります。


Pressedを機能させるには、android:state_checkedからandroid:state_pressedに変更する必要があることに注意してください。
Programista 2015

32
ItemBackgroundの場合、カラーリソースを使用して背景を定義できないため、色の代わりにドローアブルを使用する必要があります。
sirFunkenstine

@sash選択したナビゲーションアイテムのアイコン画像を変更したい場合は、どうすればよいですか?
mohit 2016年

@sirFunkenstineカラーセレクターを使用している場合は、resフォルダーのcolorフォルダーに配置できます。
Kishan Vaghela 16

@KishanVaghelaが提案したことを実行すると、次のエラーが発生します。バイナリXMLファイルの行#3:<item>タグには、「
drawable

66

app:itemBackgroundドローアブルを期待していると思います。以下の手順に従ってください:

highlight_color.xml以下の内容のドローアブルファイルを作成します。

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
     <solid android:color="YOUR HIGHLIGHT COLOR"/>
</shape>

nav_item_drawable.xml次の内容で別のドローアブルファイルを作成します。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:drawable="@drawable/highlight_color" android:state_checked="true"/>
</selector>

最後app:itemBackgroundに、NavViewにタグを追加します。

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:headerLayout="@layout/drawer_header"
app:itemIconTint="@color/black"
app:itemTextColor="@color/primary_text"
app:itemBackground="@drawable/nav_item_drawable"
app:menu="@menu/menu_drawer">

ここで、highlight_color.xmlファイルは、背景に描画可能な無地の色を定義しています。後でこのカラードローアブルがnav_item_drawable.xmlセレクターに割り当てられます。

これでうまくいきました。うまくいけば、これが役立ちます。

********************************************** 更新 *** *******************************************

前述の答え上記のあなたにいくつかのプロパティを細かく制御することができますが、私は約午前方法は感触がより多くの記述にかかわらず、SOLIDとビットであるクーラー

だからあなたができることは、次のようにNavigationViewのThemeOverlayを定義することができますstyles.xml

    <style name="ThemeOverlay.AppCompat.navTheme">

        <!-- Color of text and icon when SELECTED -->
        <item name="colorPrimary">@color/color_of_your_choice</item> 

        <!-- Background color when SELECTED -->
        <item name="colorControlHighlight">@color/color_of_your_choice</item> 

    </style>

次のように、このThemeOverlayをapp:themeNavigationViewの属性に適用します。

<android.support.design.widget.NavigationView
android:id="@+id/activity_main_navigationview"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:theme="@style/ThemeOverlay.AppCompat.navTheme"
app:headerLayout="@layout/drawer_header"
app:menu="@menu/menu_drawer">

これがお役に立てば幸いです。


1
また、このメソッドは、android:background="@drawable/nav_item_drawable"RadioButton、Checkbox、Buttonなどの他のウィジェットと同じように使用できますsetOnCheckedChangeListener。色の強調表示のみを処理するためのブロートウェアプログラミングを削減します。
rupinderjeet

@Ankushこれは機能しますが、テキストとアイコンが消えます。アイテムの色合いも設定しましたが、機能しません。それがどのように行われるかを私に提案していただけませんか
ユーザー

1
@ユーザーコードのどこが問題だったかはわかりませんが、答えを追加しました。少ない労力で同じことを達成するためのまったく異なる方法。あなたはそれをチェックすることができます。
Ankush 2017年

1
これは答えとして受け入れられるべきです!どうもありがとうございました!!!
Svetlana Rozhkova

4

NavigateItemアイテムNavigateViewがクリックされるたびにチェックをtrue に設定する必要があります

//listen for navigation events
NavigationView navigationView = (NavigationView)findViewById(R.id.navigation);
navigationView.setNavigationItemSelectedListener(this);
// select the correct nav menu item
navigationView.getMenu().findItem(mNavItemId).setChecked(true);

追加NavigationItemSelectedListenerNavigationView

  @Override
  public boolean onNavigationItemSelected(final MenuItem menuItem) {
    // update highlighted item in the navigation menu
    menuItem.setChecked(true);
    mNavItemId = menuItem.getItemId();

    // allow some time after closing the drawer before performing real navigation
    // so the user can see what is happening
    mDrawerLayout.closeDrawer(GravityCompat.START);
    mDrawerActionHandler.postDelayed(new Runnable() {
      @Override
      public void run() {
        navigate(menuItem.getItemId());
      }
    }, DRAWER_CLOSE_DELAY_MS);
    return true;
  }

助けてくれてありがとうVikalp、しかし私はすでにそうしています(setChecked(true))。チェックしたアイテムの色が変化しているのを確認できますが、自分で変更することはできません。色は、常にnavigatioviewの背景の明るいバージョンです。
グレッグ

@GregデフォルトsetChecked(true)Viewは、デバイスが使用するテーマまで背景色を変更します。あなたには、いくつかの他の色にアイテムの背景を変更するなら、あなたはあなたの中にレイアウトを膨らませる必要があるDrawerLayoutか、NavigationView自分でハンドル。
Vikalp Patel 2015

もう一度ありがとうございます。私はあなたが私に言ったことを実行しようとしましたが、成功しませんでした。
グレッグ

2

これを実現する別の方法を次に示します。

public boolean onOptionsItemSelected(MenuItem item) {

    int id = item.getItemId();

    item.setOnMenuItemClickListener(new MenuItem.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem item) {
            item.setEnabled(true);
            item.setTitle(Html.fromHtml("<font color='#ff3824'>Settings</font>"));
            return false;
            }
        });


    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }

    return super.onOptionsItemSelected(item);
}

}


私のデビューは、ポップアップメニューの選択された項目の色を変更したい場合のことでしたが、あなたのおかげで、このソリューションから選択されたメニュー項目の色を変更するための1つの素晴らしいアイデアが得られました...投票してください!!! そして回避策は次のようになります:: item.setTitle(Html.fromHtml( "<font color = '#ff3824'>設定</ font>"));
Tarit Ray

1

アクティビティのonCreateメソッドでこれを行う方法は次のとおりです。

NavigationView navigationView = findViewById(R.id.nav_view);
ColorStateList csl = new ColorStateList(
    new int[][] {
        new int[] {-android.R.attr.state_checked}, // unchecked
        new int[] { android.R.attr.state_checked}  // checked
    },
    new int[] {
        Color.BLACK,
        Color.RED
    }
);
navigationView.setItemTextColor(csl);
navigationView.setItemIconTintList(csl);

1

ステップ1: チェック済み/未チェックのセレクターを作成します。

selector.xml

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

ステップ2:ウィジェットapp:itemTextColor内 のxml属性を使用してNavigationView、テキストの色を選択します。

<android.support.design.widget.NavigationView
    android:id="@+id/nav_view"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/navigation_header_layout"
    app:itemTextColor="@drawable/selector"
    app:menu="@menu/navigation_menu" />

ステップ3:
何らかの理由でNavigationViewメニューからアイテムをヒットした場合、これはボタンチェックとは見なされません。したがって、選択したアイテムを手動でチェックして、以前に選択したアイテムをクリアする必要があります。それを行うには、以下のリスナーを使用してください

@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {

    int id = item.getItemId();

    // remove all colors of the items to the `unchecked` state of the selector
    removeColor(mNavigationView);

    // check the selected item to change its color set by the `checked` state of the selector
    item.setChecked(true);

    switch (item.getItemId()) {
      case R.id.dashboard:
          ...
    }

    drawerLayout.closeDrawer(GravityCompat.START);
    return true;
}

private void removeColor(NavigationView view) {
    for (int i = 0; i < view.getMenu().size(); i++) {
        MenuItem item = view.getMenu().getItem(i);
        item.setChecked(false);
    }
}

手順4:
アイコンの色を変更するapp:iconTintには、NavigationViewメニュー項目の属性を使用して、同じセレクターに設定します。

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/nav_account"
        android:checked="true"
        android:icon="@drawable/ic_person_black_24dp"
        android:title="My Account"
        app:iconTint="@drawable/selector" />
    <item
        android:id="@+id/nav_settings"
        android:icon="@drawable/ic_settings_black_24dp"
        android:title="Settings"
        app:iconTint="@drawable/selector" />

    <item
        android:id="@+id/nav_logout"
        android:icon="@drawable/logout"
        android:title="Log Out"
        app:iconTint="@drawable/selector" />
</menu>

結果:

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