Toolbarのボタンの色を変える

目次

前提条件

  • AndroidX 導入済み
  • ActionBar なし
  • CoordinatorLayout -> AppBarLayout -> MaterialToolbar の一般的な構成

テーマにツールバーのスタイルを設定

このAppToolbarに設定していきます。

// ids.xml

<resources>
    <item name="toolbar" type="id" />
</resources>
// themes.xml

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="toolbarStyle">@style/AppToolbar</item>
</style>

<style name="AppToolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="android:id">@id/toolbar</item>
</style>

戻るボタン

既存のアイコンも使えますし、色も変えられます。

<style name="AppToolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="navigationIcon">?android:homeAsUpIndicator</item>
    <item name="navigationIconTint">?android:textColorPrimary</item>
</style>

タイトルとサブタイトル

タイトルの外観を個別に設定します。フォントも変えられます。

<style name="AppToolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="titleTextAppearance">@style/AppToolbarTextAppearance</item>
    <item name="titleTextColor">?android:textColorPrimary</item>
    <item name="subtitleTextAppearance">@style/AppToolbarTextAppearance.Subtitle</item>
    <item name="subtitleTextColor">?android:textColorPrimary</item>
</style>

<style name="AppToolbarTextAppearance">
    <item name="android:textSize">18sp</item>
</style>

<style name="AppToolbarTextAppearance.Subtitle">
    <item name="android:textSize">11sp</item>
</style>

右側のメニューアイコン

メニューアイコンはテーマで設定できないのでmenuを作ります。iconTintで色を指定します。showAsActionを指定しないとアイコンが表示されずに収納状態になります。

// menu/toolbar_main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:icon="@drawable/button_share"
        android:title="@string/button_share"
        app:iconTint="?android:textColorPrimary"
        app:showAsAction="ifRoom" />

</menu>

右側の3点アイコン

メニューが収納された状態で表示される•••アイコンも変えられます。ツールバーのスタイルではなく、独立したactionOverflowButtonStyleを使います。

色だけの変更はできないので、既存のアイコンを再設定してtintで色を変えます。アイコンを変えると丸型の波紋効果も失われるので設定しておきます。

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
    <item name="android:actionOverflowButtonStyle">@style/AppToolbarOverflowButton</item>
</style>

<style name="AppToolbarOverflowButton">
    <item name="android:src">@drawable/abc_ic_menu_overflow_material</item>
    <item name="android:tint">?android:textColorPrimary</item>
    <item name="android:background">?android:attr/selectableItemBackgroundBorderless</item>
    <item name="android:paddingEnd">10dp</item>
</style>

右側の3点アイコンから表示されるメニューリスト

ポップアップのテーマを設定します。Lightは白地黒字でDarkはその反対です。

<style name="AppToolbar" parent="Widget.MaterialComponents.Toolbar">
    <item name="popupTheme">@style/ThemeOverlay.MaterialComponents.Light</item>
</style>

リストの高さなど他にも拘りたい方は公式をどうぞ。