Toolbarの戻るボタンの色を変える (How do I change the back button color in Android toolbar?)

前提として

  • ActionBar なし
  • Support Library なし
  • AndroidX 導入済み
  • MaterialComponents 一部使用
  • CoordinatorLayout -> AppBarLayout -> Toolbar | TabLayout の近年見慣れた構成
  • 戻るボタンを好きな色に変えたい

手っ取り早くメインテーマで設定

Activityに設定するメインテーマにcolorControlNormalを設定すると戻るボタンの色を変えられます。

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:statusBarColor">#BBBBBB</item>
        <item name="android:windowBackground">#BBBBBB</item>
        <item name="colorControlNormal">#FFFFFF</item>
</style>

この方法は一見便利なのですが、メインテーマだけでToolbarをフルカスタムする事は困難なようです。”android:toolbarStyle”が効かない。タイトルの色やフォントまで変更したい場合に困ります。ですので、予めテーマ側で設定した方が良いのかよく検討した方が良いでしょう。

個別のスタイルを用意する

Toolbar、TabLayout、BottomAppBar、BottomNavigationView、など個別にスタイルを適用させたい!それぞれ役割分担もきっちりしたい!そんな時はスタイルを作りましょう。ですが、ToolbarのスタイルにcolorControlNormalを設定してもテーマで上書きされてしまい、戻るボタンの色が変わらないんですよね。そこで、この問題の為のサブテーマ?を用意すると上手くいきます。

// ids.xml
<resources>
        <item name="toolbar" type="id" />
</resources>
// styles.xml
<style name="Toolbar" parent="Widget.AppCompat.Toolbar">
        <item name="android:id">@id/toolbar</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="navigationIcon">?android:attr/homeAsUpIndicator</item>
        <item name="theme">@style/ToolbarInnerTheme</item>
</style>

<style name="ToolbarInnerTheme">
        <item name="colorControlNormal">#FFFFFF</item>
</style>

このスタイルをレイアウトに設定します。

<androidx.appcompat.widget.Toolbar
        style="@style/Toolbar"
        app:title="Welcome Second Page" />

トップページでは戻るボタンを無効にしておきます。

<androidx.appcompat.widget.Toolbar
        style="@style/Toolbar"
        app:navigationIcon="@null"
        app:title="Welcome First Page" />

マテリアルなツールバーを使いたい場合はこちらに変更してください。メニューアイテムのインフレートが不要になっていて大変便利です。

<style name="Toolbar" parent="Theme.MaterialComponents.NoActionBar">
<com.google.android.material.appbar.MaterialToolbar