App Bar, Status Bar, FAB, Navigation Drawer の色を変更する

`Navigation Drawer Activity`を使って新規にプロジェクトを作成した際に、`App Bar`や`Navigation Drawer`のヘッダの色を変更する方法のメモです。

## 環境

"Windows 10 Pro (64bit)" 上の "Android Studio 2.2"で確認しています。

- Android Studio

> Android Studio 2.2.1
> Build #AI-145,3330264, built on October 6, 2016
> 
> JRE: 1.8.0_76-release-b03 amd64
> JVM: OpenJDK 64-Bit Server VM by JetBrains s.r.o

- Create New Project の設定値

> Target Android Devices
> 　Phone and Tablet
> 　　Minimum SDK | API 15: Android 4.0.3 (IceCreamSandwich)
>
> Add an Activity to Mobile
> 　Navigation Drawer Activity


## App Bar の色を変更する

![Screenshot_1476605350.png](https://qiita-image-store.s3.amazonaws.com/0/93531/cdd13f53-ff38-f370-68a3-d22759dbf934.png)

```xml:res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- App Bar の背景色 -->
    <color name="colorPrimary">#F5F5F5</color>

    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>

    <!-- [追加] App Bar の文字色 -->
    <color name="colorPrimaryText">#DD000000</color>
</resources>
```

```xml:res/values/styles.xml
<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- App Bar の背景色 -->
        <item name="colorPrimary">@color/colorPrimary</item>
        
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
    </style>

    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
        <!-- [追加] App Bar の文字色 -->
        <item name="android:textColorPrimary">@color/colorPrimaryText</item>
    </style>

    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />

</resources>
```

## Status Bar の色を変更する

![Screenshot_1476607074.png](https://qiita-image-store.s3.amazonaws.com/0/93531/0e69b74d-4114-7bca-2465-64d17d143b71.png)

```xml:res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#F5F5F5</color>

    <!-- [追加] Status Bar の背景色-->
    <color name="colorPrimaryDark">#E0E0E0</color>

    <color name="colorAccent">#FF4081</color>

    <color name="colorPrimaryText">#DD000000</color>
</resources>
```

```xml:res/values-v21/styles.xml
<resources>

    <style name="AppTheme.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowDrawsSystemBarBackgrounds">true</item>
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>
</resources>
```

## Navigation Drawer のヘッダの背景色を変更する

![Screenshot_1476607209.png](https://qiita-image-store.s3.amazonaws.com/0/93531/5ba5c40b-ba02-bf33-060b-9d72c34796bf.png)

```xml:res/drawable/side_nav_bar.xml
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="135"
        android:centerColor="#89000000"
        android:endColor="#DD000000"
        android:startColor="#60000000"
        android:type="linear" />
</shape>
```

## Floating Action Button (FAB) の背景色を変更する

![Screenshot_1476607487.png](https://qiita-image-store.s3.amazonaws.com/0/93531/371df1c9-1625-6037-ba0f-ded484716beb.png)

```xml:res/values/colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#F5F5F5</color>
    <color name="colorPrimaryDark">#E0E0E0</color>

    <!-- Floating Action Button (FAB) の背景色 -->
    <color name="colorAccent">#000000</color>

    <color name="colorPrimaryText">#DD000000</color>
</resources>

```