moshimore Knowledge

アプリ開発・紹介とメモ書き、日々の日記。

ToolbarのDrawer(ハンバーガー)とオプションメニュー(三点リーダー)などの文字色を変更する方法について

f:id:moshimore:20181009095645p:plain
Toolbar(android.support.v7.widget.Toolbar)とは、Android 5.0(Lollipop)と同時に追加されたActionBarの代替となるコンポーネントです。
このToolbarにDrawerレイアウト(android.support.v4.widget.DrawerLayout)でNavigationView(android.support.design.widget.NavigationView)やオプションメニューを追加した際のハンバーガーアイコンと三点リーダーのオプションメニューの文字色を変更する方法をメモしておきます。

AppThemeのparentを変更

まずは、ActionBarが表示されては困るし、そもそもエラーになってしまうので、parentのテーマをTheme.AppCompat.Light.NoActionBarに変更します。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>
</resources>

AppTheme.Toolbarのスタイルを追加

AppTheme.Toolbarのスタイルをresourcesタグ内に追加します。

textColorSecondaryは、setDisplayHomeAsUpEnabledを有効にした場合に表示される矢印の色の設定です。
toolbarStyleは、Toolbarの背景色や文字の設定です。
actionOverflowButtonStyleは、オプションメニュー(三点リーダー)の設定です。
drawerArrowStyleは、Drawer(ハンバーガー)の設定です。

<style name="AppTheme.Toolbar" parent="AppTheme">

    <item name="android:textColorSecondary">@color/white</item>

    <item name="toolbarStyle">@style/ToolbarStyle</item>
    <item name="actionOverflowButtonStyle">@style/ActionOverflowButtonStyle</item>
    <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

</style>

作成したToolbarのスタイルは、以下のようにToolbarへ設定します。

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:minHeight="?attr/actionBarSize"
    android:theme="@style/AppTheme.Toolbar" />

Toolbarのスタイルを追加

Toolbarのスタイルをresourcesタグ内に追加します。

<style name="ToolbarStyle" parent="Theme.AppCompat.Light">
    <item name="android:background">@color/colorPrimary</item>
    <item name="titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item>
    <item name="subtitleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse</item>
</style>

actionOverflowButtonStyleのスタイルを追加

actionOverflowButtonStyleのスタイルをresourcesタグ内に追加します。

<style name="ActionOverflowButtonStyle" parent="@style/Widget.AppCompat.ActionButton.Overflow" >
    <item name="android:tint">@color/white</item>
</style>

drawerArrowStyleのスタイルを追加

drawerArrowStyleのスタイルをresourcesタグ内に追加します。

<style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
    <item name="color">@color/white</item>
</style>

完成形

これまでの内容を纏めると以下のようになります。

<resources>
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>

    </style>

    <style name="AppTheme.Toolbar" parent="AppTheme">

        <item name="android:textColorSecondary">@color/white</item>

        <item name="toolbarStyle">@style/ToolbarStyle</item>
        <item name="actionOverflowButtonStyle">@style/ActionOverflowButtonStyle</item>
        <item name="drawerArrowStyle">@style/DrawerArrowStyle</item>

    </style>

    <style name="ToolbarStyle" parent="Theme.AppCompat.Light">
        <item name="android:background">@color/colorPrimary</item>
        <item name="titleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse</item>
        <item name="subtitleTextAppearance">@style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse</item>
    </style>

    <style name="ActionOverflowButtonStyle" parent="@style/Widget.AppCompat.ActionButton.Overflow" >
        <item name="android:tint">@color/white</item>
    </style>

    <style name="DrawerArrowStyle" parent="@style/Widget.AppCompat.DrawerArrowToggle">
        <item name="color">@color/white</item>
    </style>

</resources>

以上、ToolbarのDrawer(ハンバーガー)とオプションメニューなどの文字色を変更する方法についてでした。