【Android】自動生成されるNavigation barの背景やラベルのcolorの変え方

android studio: 4.2.2
sdk version: 30

# 変更前

自動生成で以下のようなNavigation barが作成されます。
色合いが微妙なのでこれを変えていきます。

![Screenshot_2021-10-17-17-43-22-23_ba25f4753e85d4aec26bd28a3969eaa8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/d56a9287-6b63-dc6b-06a4-76ae5faedc22.png)

## Navigation barを設定している場所

このnavigation自体は以下のpathで記述されています。
app/src/main/res/navigation/nav_graph.xml

そしてfragemntごとの記述を見ると以下のようになっています

```java
  <fragment
      android:id="@+id/FirstFragment"
      android:name="com.XXX.XXX.FirstFragment"
      android:label="@string/first_fragment_label"
      tools:layout="@layout/fragment_first">
```

この箇所でlabelを設定しています。
ここでtextColorなどを指定しても変更されませんのでご注意を。
テキスト自体の変更はできます。


## ThemeファイルでNavigation barなどのcolorを設定している


色の指定は以下のpathの箇所で行っています。
app/src/main/res/values/themes.xml

初期状態の指定color

```java
  <!-- Base application theme. -->
  <style name="Theme.RestLibrary" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/purple_500</item>
    <item name="colorPrimaryVariant">@color/purple_700</item>
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/teal_200</item>
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->
  </style>
```



## 各パラメータの指定

![https___qiita-image-store.s3.ap-northeast-1.amazonaws.com_0_54_3ded3168-c184-3e1b-81b0-f7bb5686c7e3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/0366271a-a949-668a-116d-48af39fb841b.png)

参考：[android-テーマ「material」での色設定１](https://www.phenomena.co.jp/blog/2015/07/17/android-%E3%83%86%E3%83%BC%E3%83%9E%E3%80%8Cmaterial%E3%80%8D%E3%81%A7%E3%81%AE%E8%89%B2%E8%A8%AD%E5%AE%9A%EF%BC%91/)

上記を参考してください。
各パラメータに対してcolorを設定することで好きな色に変えることができます。


ここまでを踏まえて以下のように変えてみました。

```java
  <!-- Base application theme. -->
  <style name="Theme.RestLibrary" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <!-- Primary brand color. -->
    <item name="colorPrimary">@color/face_light_blue</item>  // 背景にface_light_blueを指定
    <item name="colorPrimaryVariant">@color/face_light_blue</item>  // スマホ上端にface_light_blueを指定
    <item name="colorOnPrimary">@color/white</item>
    <!-- Secondary brand color. -->
    <item name="colorSecondary">@color/face_light_orange</item>  // face_light_orangeを指定
    <item name="colorSecondaryVariant">@color/teal_700</item>
    <item name="colorOnSecondary">@color/black</item>
    <!-- Status bar color. -->
    <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
    <!-- Customize your theme here. -->

    <item name="android:textColorPrimary">@color/white</item>  // android:textColorPrimaryにwhiteを指定

  </style>
```

変更箇所は今回は下記のみです
・colorPrimary
・colorPrimaryVariant
・colorSecondary
・textColorPrimary


color.xmlファイルに下記を追加しています。

```xml
  <color name="face_light_orange">#fac365</color>
  <color name="face_light_blue">#90d2ea</color>
```

## 





# 結果以下のようになります。（おわり）

![Screenshot_2021-10-17-17-42-03-81_ba25f4753e85d4aec26bd28a3969eaa8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/574173/ae89077c-c662-281d-3a41-2a2484dbf6bd.png)

# 参考
[AndroidのThemeで迷ったら見る資料](https://qiita.com/d_forest/items/31c04141f035c5033074)
[スタイルとテーマ](https://developer.android.com/guide/topics/ui/look-and-feel/themes?hl=ja)

# Material Componentの公式ドキュメント
[Color Theming - Material Components for Android](https://material.io/develop/android/theming/color)
[Dark Theme - Material Components for Android](https://material.io/develop/android/theming/dark)
[Shape Theming - Material Components for Android](https://material.io/develop/android/theming/shape/)
[Typography Theming - Material Components for Android](https://material.io/develop/android/theming/typography/)