web-dev-qa-db-ja.com

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"
    />

styles.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テーマはオーバーフローメニューポップアップに適用されるため、ツールバーテーマは明確に適用されていますが、TextAppearanceが機能せず、テキストは黒のままです。私は非常に多種多様な代替形式を試しましたが、喜びはありませんでした。何かを試してもうまくいかないときは、どこから始めればよいのかわからなくなってしまいます。このようなテーマの問題をデバッグするためのヒントは大歓迎です！非常に単純なUIスタイルの変更に数時間を費やすことは非常に苛立たしいことですが、レイアウト、スタイル、テーマ、およびAppCompatの複数の側面により、私は完全に混乱し、推測することになります。

androidandroid-appcompatandroid-styles
12
Ollie C

以下はあなたのために働くはずです：

styles.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>

layout.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" />

結果：

toolbar with custom style

注：私は意図的にできるだけ醜いスタイルを作りました。 ：<

では、これをどのように理解しますか。 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に適用することは、多かれ少なかれ試行錯誤の結果です。 ;）

16
reVerse