Theme.xmlからToolbarの表示色（背景、文字）の変更をしてみる【AndroidStudio】

Toolbarの色を変えたいよー

下の画像はテンプレートからBasicActivityを作成した時のToolbarです。

（まぁ青い。藍い。）

BasicActivityではToolbarの色をThemeで指定しています。

そのため色を変更するためにはTheme.xmlを編集することで色の編集が可能です。

■Theme.xml　：itemを追加する。

<style name="Theme.ActivitySample.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorPrimary">@color/teal_200</item>          <!-- 追加：水色 -->
    <item name="colorPrimaryVariant">@color/teal_700</item>   <!-- 追加：濃い水色 -->
    <item name="colorOnPrimary">@color/black</item>           <!-- 追加：黒 -->
</style>

色を変えるだけなのであれば上記の理解で問題ないかと。

以下はちょっとした解説を記載します。

色を変える方法は、activity内の<android:theme>に指定を参照しTheme.xmlより色を取得していることはわかるかと思います。

■activity_main.xml

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/Theme.ActivitySample.AppBarOverlay">

    <!-- 略 -->

</com.google.android.material.appbar.AppBarLayout>

■Theme.xml

<style name="Theme.ActivitySample.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorPrimary">@color/teal_200</item>          <!-- 追加：水色 -->
    <item name="colorPrimaryVariant">@color/teal_700</item>   <!-- 追加：濃い水色 -->
    <item name="colorOnPrimary">@color/black</item>           <!-- 追加：黒 -->
</style>

しかし、BasicActivityのテンプレートではTheme.xml内にitemの指定はない。

では、どこからToolbarの色が指定されているのかと疑問になる。

答えは、Theme.xml内にある以下の記載である。

　※初期状態であればTheme.xml内の最上段に指定されていると思う。

<style name="Theme.ActivitySample" 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>

そして、指定されているThemeは

AndroidMnifest.xml内にアプリケーション全体のテーマとして指定されている。

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:roundIcon="@mipmap/ic_launcher_round"
    android:supportsRtl="true"
    android:theme="@style/Theme.ActivitySample">
    <activity
        ………………
    </activity>
</application>

そのため、アプリケーションの全体で色を変更したい場合は

最初に説明したToolbarに指定されたThemeではなく、

アプリケーションに指定された色を変更することでToolbarも合わせて変更ができます。

（Themeの適応範囲によって変更箇所を使い分ければよいと思います。）

今回は、Toolbarの色をThemeから変更する方法を調べましたが

Themeは画面要素などいろいろなところにかかわってきそうなので

また、あらためて調べてみようと思います。

以上、本日の記録。