LoginSignup
2
4

More than 3 years have passed since last update.

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

Last updated at Posted at 2019-08-07

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のその他の色の変更は、以下の記事が参考になりました。

2
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
4