2021年12月31日金曜日

Menuの文字に色を付ける

 AndroidでToolbarを使いMenu表示させると、

以下のように文字が見えず空欄のMenuが表示されてしまう。



これはMenuの文字色が白、背景色も白であることが原因だった。

なのでMenuの文字色を調整する方法を記載する。


styleで色を調整する

Theme.xmlに以下の追加設定を加える。

19行目MenuのItemのstyleを適応する設定

23-25行目style定義で、MenuItemを定義。文字色を任意の色に変える

  1. <resources xmlns:tools="http://schemas.android.com/tools">
  2. <!-- Base application theme. -->
  3. <style name="Theme.MyApplication" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
  4. <item name="colorPrimary">@color/app_color_light</item>
  5. <item name="colorPrimaryVariant">@color/app_color</item>
  6. <item name="colorOnPrimary">@color/black</item>
  7.  
  8. <item name="actionMenuTextColor">@color/black</item>
  9. <item name="colorSecondary">@color/teal_200</item>
  10. <item name="colorSecondaryVariant">@color/teal_700</item>
  11. <item name="colorOnSecondary">@color/black</item>
  12. <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
  13. <!-- ToolBar使うためActionBar削除 -->
  14. <item name="windowActionBar">false</item>
  15. <item name="windowNoTitle">true</item>
  16. <!-- MenuItemのstyleを設定 -->
  17. <item name="android:itemTextAppearance">@style/MenuTextAppearance</item>
  18. </style>
  19.  
  20. <!-- 上で設定したMenuItemのstyleを定義(文字色のみ設定) -->
  21. <style name="MenuTextAppearance" parent="@android:style/TextAppearance.Widget.IconMenu.Item">
  22. <item name="android:textColor">@color/teal_200</item>
  23. </style>
  24. </resources>

結果こんな感じ




余談

ちなみにToolBarではなく、ActionBarを使ってメニュー表示させると

style調整せずにMenuの色はデフォルトで黒色が割りあったっているので、

ActionBarを使うことを検討してみてもいいと思う。

※ActionBarを使っても、今回のstyle設定をすると文字色は変わるので
 色を付けたいときは参考になると思う。


0 件のコメント:

コメントを投稿