web-dev-qa-db-ja.com

NavigationView内でアイテムの背景とアイテムのテキストの色をカスタマイズする方法

Material Design Docs に示されているこのようなことを達成したいです。

colorControlHighlightは、チェックされたアイテムの背景に使用されます。

カスタマイズする必要があります：

  • 背景未チェック
  • テキストの色をチェック
  • テキストの色は未チェック
androidmaterial-designdrawerlayoutandroid-design-librarynavigationview
72
Xan

NavigationDrawer（NavigationView）には、チェック/選択された項目の構成のための3つのオプションがあります。

app:itemIconTint="@color/menu_text_color" //icon color
app:itemTextColor="@color/menu_text_color" //text color
app:itemBackground="@drawable/menu_background_color" //background

アイコンとテキストの色

最初の2つのオプション（iconおよびtext）にはcolor state list resource- https://developer.Android.com/guide/topics/ resources/color-list-resource.html 。

このようなmenu_text_colorリソースはres/colorで作成する必要があります。このファイルの内容は次のようになります。

<!-- res/color/menu_text_color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item Android:color="@color/colorWhite" Android:state_checked="true" />
  <item Android:color="@color/colorBlack" Android:state_checked="false"/>
</selector>

  • @color/colorWhite-チェック項目に使用される色リソース

  • @color/colorBlack-未チェックのアイテムに使用される色リソース

両方に対して1つのリソースを作成しましたが、テキスト用とアイコン用の2つの別々のファイルを作成することは可能です。

背景（itemBackground）

背景オプションには、色の代わりに描画可能なリソースが必要です。色を設定しようとするたびに例外が発生します。 Drawableリソースはres/drawableで作成する必要があり、そのコンテンツは次のようになります。

<!-- res/drawable/menu_background_color.xml -->
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
  <item Android:drawable="@Android:color/transparent"  Android:state_checked="false"/>
  <item Android:drawable="@color/colorPrimary" Android:state_checked="true"/>
</selector>

色をシミュレートするドロアブルを作成する必要はありません（私がそのような提案を見た他のソリューション-多分古いSDKバージョンの場合）、色はこのファイルで直接使用できます。このサンプルファイルでは、チェックされていない項目には透明色を使用し、チェックされた項目にはcolorPrimaryを使用しています。

トラブルシューティングと重要事項

  • バックグラウンドリソースでは、常にデフォルトの代わりにstate_checked = "false"を使用します。デフォルトの色では機能しません
  • 動的/プログラムで作成されたメニューの場合、アイテムをcheckableに設定することを忘れないでください：

コード例（動的メニュー項目追加）：

  menu.add(group_id, item_id, Menu.NONE, item_name).setCheckable(true).setChecked(false);

アイテムがチェック可能として設定されない場合、背景は機能しません（予想外のテキストとアイコンの色は期待どおりに機能します）。

88
Maciej Sikora

itemBackground、itemIconTint、およびitemTextColorは設定可能な単純なxml属性ですが、Android:の代わりにカスタムプレフィックスを使用する必要があります。

例

<Android.support.v4.widget.DrawerLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:app="http://schemas.Android.com/apk/res-auto"
    Android:id="@+id/drawer_layout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:fitsSystemWindows="true">

    <!-- Other layout views -->

    <Android.support.design.widget.NavigationView
        Android:id="@+id/nav_view"
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_gravity="start"
        Android:fitsSystemWindows="true"
        app:itemBackground="@drawable/my_ripple"
        app:itemIconTint="#2196f3"
        app:itemTextColor="#009688"
        app:headerLayout="@layout/nav_header"
        app:menu="@menu/drawer_view" />

</Android.support.v4.widget.DrawerLayout>

注：この場合、テキストの色、アイコンの色合い、および背景は静的です。テキストの色を変更したい場合（例：チェックを外したときはピンク、チェックしたときは青緑）、ColorStateListを使用する必要があります。

例

/res/colorに新しい* .xmlファイルを作成します-それに名前を付けましょうstate_list.xml-次の内容で：

<selector xmlns:Android="http://schemas.Android.com/apk/res/Android">
    <!-- This is used when the Navigation Item is checked -->
    <item Android:color="#009688" Android:state_checked="true" />
    <!-- This is the default text color -->
    <item Android:color="#E91E63" />
</selector>

そして、次のように単純に参照します：app:itemTextColor="@color/state_list"

itemIconTintについても同様です。 itemBackgroundにはリソースIDが必要です。 docs も参照してください。

127
reVerse

ColorControlHighlightを使用することは私にとって良い解決策です。最新のサポートライブラリを使用すると、すべてのウィジェットにテーマ（スタイルだけでなく）を定義できることに注意してください。たとえば、colorControlHighlightをNavigationViewテーマに定義できますが、これは他のウィジェットには適用されません。

8
Mimmo Grottoli

イベントに基づいたアクティビティのメニュー項目の色を1つだけ変更する場合は、HANAIHASHEMIのこのブログを参照してください。

https://hanihashemi.com/2017/05/06/change-text-color-of-menuitem-in-navigation-drawer/

private void setTextColorForMenuItem(MenuItem menuItem, @ColorRes int color) {
  SpannableString spanString = new SpannableString(menuItem.getTitle().toString());
  spanString.setSpan(new ForegroundColorSpan(ContextCompat.getColor(this, color)), 0, spanString.length(), 0);
  menuItem.setTitle(spanString);
}

メソッドを呼び出す

setTextColorForMenuItem(item, R.color.colorPrimary);

Xamarin Androidを使用する場合は、これを試してください：

private void SetTextColorForMenuItem(IMenuItem menuItem, Android.Graphics.Color color)
        {
            SpannableString spanString = new SpannableString(menuItem.TitleFormatted.ToString());
            spanString.SetSpan(new ForegroundColorSpan(color), 0, spanString.Length(), 0);
            menuItem.SetTitle(spanString);
        }

メソッドの呼び出し：

SetTextColorForMenuItem(navigationView.Menu.GetItem(0), Android.Graphics.Color.OrangeRed);
4
Jhon

プログラムでこのコードを使用できます：

int[][] states = new int[][] {
    new int[] { Android.R.attr.state_enabled}, // enabled
    new int[] {-Android.R.attr.state_enabled}, // disabled
    new int[] {-Android.R.attr.state_checked}, // unchecked
    new int[] { Android.R.attr.state_pressed}  // pressed
};

int[] colors = new int[] {
    Color.BLACK,
    Color.RED,
    Color.GREEN,
    Color.BLUE
};

ColorStateList myList = new ColorStateList(states, colors);

  nav_view.setItemIconTintList(myList);
4
Ahmad Aghazadeh

ナビゲーションビューでは、独自のアイテムビューを提供することもできます。新しいappcompat-v7:23.1.0でできること

app：actionLayoutまたはMenuItemCompat.setActionView（）を使用して、アイテムのカスタムビューを設定します。

View view = View.inflate(context, R.layout.your_custom_nav_layout_item, null);
MenuItemCompat.setActionView(menuItem, view);

このようにして、TextViewで独自のレイアウトを作成し、必要に応じてbackgrounds/colors/fontsを変更できます。これが役に立てば幸いです:) ソース

3
hkop

次のステートメントを使用して実行できます。

navigationView.setItemBackground(ContextCompat.getDrawable(CustomerHomeActivity.this, R.color.transparent));
0
Sohaib Khalid