☰

Android ツールバーにテーマを適用するにはどうすればいいですか? 質問する

tag-icon • tag-icon android android-appcompat android-styles
Android ツールバーにテーマを適用するにはどうすればいいですか? 質問する

ツールバーに簡単なスタイルを適用する方法を見つけようと、膨大な時間を費やしてきましたが、まったく行き詰まっています。具体的には、タイトルとサブタイトル、オーバーフロー メニュー アイコン (3 つのドット) の色を変更したいのですが、レイアウトではテキストの色を正常に設定できるのですが、テーマでは設定できません。理由がわかりません。

    <android.support.v7.widget.Toolbar
    theme="@style/Toolbar"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@color/orange"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    />

スタイル.xml:

    <style name="Toolbar" parent="Widget.AppCompat.Toolbar">
    <item name="titleTextStyle">@style/ToolbarTitle</item>
    <item name="titleTextAppearance">@style/ToolbarTitleTextAppearance</item>
    <item name="popupTheme">@style/AppTheme.PopupOverlay</item>
</style>

<style name="ToolbarTitle" parent="Base.TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="titleTextAppearance">@style/ToolbarTitleTextAppearance</item>
    <item name="android:textColor">#FF0000</item>
</style>

<style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light">
</style>

PopupOverlay テーマはオーバーフロー メニュー ポップアップに適用されているため、Toolbar テーマが適用されていることは明らかですが、TextAppearance は機能せず、テキストは黒のままです。さまざまな代替形式を試しましたが、うまくいきませんでした。何かを試しても機能しない場合は、原因を理解するためにどこから調べ始めたらよいのかさえわからなくなります。このようなテーマの問題をデバッグするためのヒントは大歓迎です。非常に単純な UI スタイルの変更に数時間費やすのは非常にイライラしますが、レイアウト、スタイル、テーマ、AppCompat のさまざまな側面により、完全に混乱し、推測するしかありません。

ベストアンサー1

以下の方法が役に立つはずです:

スタイル.xml 

<style name="Base_ToolbarStyle">
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
    <item name="android:background">?colorPrimary</item>
    <item name="android:theme">@style/Base_ToolbarTheme</item>
    <item name="titleTextAppearance">@style/CustomTitleTextAppearance</item>
    <item name="subtitleTextAppearance">@style/CustomSubTitleTextAppearance</item>
</style>

<style name="Base_ToolbarTheme">
    <!-- Color used for the title of the Toolbar - as long as not overridden -->
    <item name="android:textColorPrimary">@color/pink_500_primary</item>
    <!-- Used to color back button and three dots -->
    <item name="android:textColorSecondary">@color/yellow_500_primary</item>
</style>

<style name="CustomTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Title">
    <item name="android:fontFamily">@string/ff_roboto_condensed</item>
    <item name="android:textSize">16sp</item>
    <item name="android:textColor">@color/amber_500_primary</item>
    <item name="android:textStyle">bold</item>
</style>

<style name="CustomSubTitleTextAppearance" parent="TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
    <item name="android:fontFamily">@string/ff_roboto_condensed</item>
    <item name="android:textSize">14sp</item>
    <item name="android:textColor">@color/pink_500_primary</item>
    <item name="android:textStyle">italic</item>
</style>

レイアウト.xml

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    style="@style/Base_ToolbarStyle"
    android:layout_width="match_parent"
    android:layout_height="?actionBarSize"
    android:elevation="4dp" />

結果：

カスタムスタイルのツールバー

注記：意図的にできるだけ醜いスタイルにしました。:<

では、これをどうやって理解するのでしょうか。 の場合、textAppearances親クラス、たとえば を見ればよいのですTextAppearance.Widget.AppCompat.Toolbar.Title。そこで、最終的に次のようなものが見つかります。

<style name="TextAppearance.Material.Widget.ActionBar.Title"
       parent="TextAppearance.Material.Title">
    <item name="textSize">@dimen/text_size_title_material_toolbar</item>
    <item name="textColor">?attr/textColorPrimary</item>
</style>

親をもう一度クリックすると、次の内容が表示されます。

<style name="TextAppearance.Material">
    <item name="textColor">?attr/textColorPrimary</item>
    <item name="textColorHint">?attr/textColorHint</item>
    <item name="textColorHighlight">?attr/textColorHighlight</item>
    <item name="textColorLink">?attr/textColorLink</item>
    <item name="textSize">@dimen/text_size_body_1_material</item>
    <item name="fontFamily">@string/font_family_body_1_material</item>
</style>

まとめると、これで調整できるすべての属性がわかりました。Toolbarただし、テーマの代わりにスタイルを適用することは、多かれ少なかれ試行錯誤のプロセスの結果です。;)

おすすめ記事