如何将主题应用到Android工具栏?

20

我花费了大量时间试图弄清楚如何对工具栏应用一些简单的样式,但完全被卡住了。具体来说,我想改变标题和副标题以及溢出菜单图标(三个点)的颜色。我可以在布局中成功设置文本颜色,但无法在主题中设置,我不知道为什么。

    <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主题被应用于溢出菜单弹出窗口,因此工具栏主题明显被应用,但TextAppearance不起作用,文本仍然是黑色的。我尝试了很多不同的替代形式,但都没有成功。当我尝试某些东西时,它不起作用,我不知道从哪里开始寻找原因。欢迎提供有关调试此类主题问题的提示!失去几个小时的时间来进行非常简单的UI样式更改真是令人沮丧,但布局、样式、主题和AppCompat的多个方面让我感到彻底的困惑和猜测。

1个回答

29

以下内容适用于您:

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

结果:

自定义样式的工具栏

备注:我特意将样式调得尽可能丑陋。 :<

那么你该如何解决这个问题呢?对于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>

总结一下,我们现在知道了所有可以调整的属性。但是将样式应用于工具栏而不是主题更多或少是试错过程的结果。;)


9
剩下的问题是:为什么通过theme属性设置样式似乎没有任何效果... - DenisGL

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接