読者です 読者をやめる 読者になる 読者になる

無趣味な人

生まれてこの方、無趣味。ハマったものこれといって特になし。

Toolbarの文字の色を変更する

Android アプリ開発 プログラム

f:id:itereta:20141215174816j:plain

公開中のAndroidアプリをマテリアルデザイン風に変更するために、Toolbarを使うことにした。

テーマは「Theme.AppCompat.Light.NoActionBar」で。 すると、マテリアルデザイン風にしたいのに、Toolbarの中の文字が黒くてダサい。

f:id:itereta:20170406222036p:plain

この文字の色を変更するだけで苦労してしまった。

最初は、単純に

<style name="MyCustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#0091EA</item>
    <item name="colorAccent">#607D8B</item>
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

というテーマを作り、AndroidManifest.xmlに登録した。 しかし、こうすると他のandroid:textColorPrimaryを使っている箇所の文字の色も変わってしまった。Toolbarだけのためだけにアプリ全体のtextColorPrimaryを変更するのは色々不都合なのでやめにした。

色々試した方法は二つ。

方法1. 別のスタイルを登録する
方法2. ただのビューとしてスタイルを定義する

「setSupportActionBar」を使ってアクションバーとしてセットする場合は方法1でしかできない。 元々あるアプリはこの方が変更点が少なくて楽であった。 しかし、柔軟なスタイル変更はできない。 方法2の方は変更点が多いが柔軟に色々変更できるので私はこちらを選択した。

方法1

自分のカスタムテーマの下にToolbar専用のテーマを作り、レイアウトファイルでToolbarに設定した。

<style name="MyCustomTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#0091EA</item>
    <item name="colorAccent">#607D8B</item>
</style>


<style name="MyCustomTheme.Toolbar" parent="MyCustomTheme">
    <item name="android:textColorPrimary">@android:color/white</item>
    <item name="android:textColorSecondary">@android:color/white</item>
</style>

上のように作っておいて、AndroidManifest.xmlにはMyCustomThemeを登録。 ToolbarのlayoutにMyCustomTheme.Toolbarを登録する。

<android.support.v7.widget.Toolbar
                android:id="@+id/my_toolbar"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/MyCustomTheme.Toolbar"
                app:popupTheme="@style/Theme.AppCompat.Light">

このようにすれば、Toolbarの文字だけが白くなる。

方法2

「setSupportActionBar」を使わずActionbarとしなければ、styleを設定できる。 要するに、ToolbarをただのViewとして扱うということ。

<style name="MyCustomTheme.Light" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">#0091EA</item>
    <item name="colorAccent">#607D8B</item>

    <!-- Toolbarのnavigation & overflow icon の色 -->
    <item name="colorControlNormal">@color/white</item>

    <!-- Toolarのスタイル -->
    <item name="toolbarStyle">@style/MyCustomTheme.Toolbar</item>
</style>

<style name="MyCustomTheme.Toolbar" parent="Widget.AppCompat.Toolbar">
    <item name="titleTextAppearance">
        @style/TextAppearance.AppCompat.Widget.ActionBar.Title.Inverse
    </item>
    <item name="subtitleTextAppearance">
        @style/TextAppearance.AppCompat.Widget.ActionBar.Subtitle.Inverse
    </item>
</style>

私は結局、方法2を使うことにした。方法1ではソースコードの変更は少ないのだが、自由度が少なく自分のやりたいことができないことがあるためだ。

以上