Edited at

Toolbarのテキストカラー/スタイルと、Ripple Effectの色を変更する

Toolbarの各パーツの色変更は、基本的にはテーマを作って、それを適用する必要があります。

テキストカラーとスタイル、Ripple Effectもテーマを作って、それをToolbarに適用する形になります。

結論から言うと、以下のように設定すれば変更できます。


styles.xml

    <!-- Toolbar -->

<style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">
<item name="android:textColorPrimary">@color/textColorPrimary</item>
<item name="android:textColorSecondary">@color/textColorPrimary</item>
<item name="android:colorControlHighlight">@color/rippleColorHighlight</item>
</style>

<style name="TextAppearance.Toolbar" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textAllCaps">true</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">20sp</item>
</style>

<style name="Toolbar" parent="@style/Widget.AppCompat.Toolbar">
<item name="android:theme">@style/ToolbarTheme</item>
<item name="titleTextAppearance">@style/TextAppearance.Toolbar</item>
</style>



layout.xml

<androidx.appcompat.widget.Toolbar

android:id="@+id/toolbar"
style="@style/Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">


テキストカラー、Ripple Effectカラーの変更

まず、文字色とRipple Effectの色をvalues/styles.xmlに定義します。

    <style name="ToolbarTheme" parent="Theme.AppCompat.Light.NoActionBar">

<!-- メインタイトル文字色 -->
<item name="android:textColorPrimary">@color/textColorPrimary</item>
<!-- サブタイトル文字色 -->
<item name="android:textColorSecondary">@color/textColorPrimary</item>
<!-- Ripple Effect -->
<item name="android:colorControlHighlight">@color/rippleColorHighlight</item>
</style>


テキストスタイルの変更

メインタイトルの文字スタイルを太字にしたり、文字サイズを変えたりしたい場合は、TextAppearanceをvalues/styles.xmlに定義します。

    <style name="TextAppearance.Toolbar" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">

<item name="android:textAllCaps">true</item>
<item name="android:textStyle">bold</item>
<item name="android:textSize">20sp</item>
</style>

TextAppearanceには下記のようなアイテムを定義できます。

<attr name="textColor" />

<attr name="textSize" />
<attr name="textStyle" />
<attr name="typeface" />
<attr name="fontFamily" />
<attr name="textColorHighlight" />
<attr name="textColorHint" />
<attr name="textColorLink" />
<attr name="textAllCaps" format="boolean" />
<attr name="shadowColor" format="color" />
<attr name="shadowDx" format="float" />
<attr name="shadowDy" format="float" />
<attr name="shadowRadius" format="float" />
<attr name="elegantTextHeight" format="boolean" />
<attr name="letterSpacing" format="float" />
<attr name="fontFeatureSettings" format="string" />

via core/res/res/values/attrs.xml - platform/frameworks/base - Git at Google


Toolbarに適用

最後に、Toolbarにまとめて設定できるようにStyleをvalues/styles.xmlに定義して、それをレイアウトにあるToolbarにセットします。

    <style name="Toolbar" parent="@style/Widget.AppCompat.Toolbar">

<item name="android:theme">@style/ToolbarTheme</item>
<item name="titleTextAppearance">@style/TextAppearance.Toolbar</item>
</style>

<androidx.appcompat.widget.Toolbar

android:id="@+id/toolbar"
style="@style/Toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize">


TextAppearanceとは

テーマより下層のテキストスタイルを定義するやつです。

Style、Theme、TextAppearanceの関係は以下の記事がわかりやすいです。


参考資料

Toolbarのその他の色の変更は、以下の記事が参考になりました。