如何将主题应用于Android工具栏? [英] How to apply a theme to an Android Toolbar?

问题描述

我花了过多的时间试图弄清楚如何对工具栏应用一些简单的样式，但是却非常困惑.具体来说，我想更改标题"和副标题"以及溢出菜单图标(三个点)的颜色.我可以在布局中成功设置文本颜色，但不能在主题中设置文本颜色，我也不知道为什么.

I've spent an inordinate amount of time trying to figure out how to apply some simple styling to a Toolbar, but am utterly stumped. Specifically I want to change the colour of the Title and Subtitle and the overflow menu icon (three dots). I can set the text colours successfully in the layout, but not in the Theme, I have no idea why.

    <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:

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让我完全困惑和猜测.

The PopupOverlay theme is applied to the overflow menu popup, so the Toolbar Theme is clearly being applied, but the TextAppearance does not work, the text remains black. I've tried a very large variety of alternative forms but with no joy. When I try something and it doesn't work I'm at a loss to know where to even start looking to understand why. Tips on debugging theming issues like this are welcome! It's deeply frustrating to lose several hours to what should be very simple UI styling changes, but the multiple facets of layouts, styles, themes & AppCompat leave me utterly confused and guessing.

推荐答案

以下内容应该对您有用:

Following should work for you:

styles.xml

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

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

结果:

注意:我故意将样式设为丑陋. :<

Note: I've made the style on purpose as ugly as possible. :<

那么您如何解决这个问题.那么textAppearances的情况下，您只需查看父类，例如TextAppearance.Widget.AppCompat.Toolbar.Title.在那里您最终会找到类似的东西:

So how do you figure this out. Well in case of the textAppearances you just look at the parent classes, e.g. TextAppearance.Widget.AppCompat.Toolbar.Title. There you'll find something like this eventually:

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

再次单击父项将显示以下内容:

Clicking on the parent once again reveals the following:

<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而不是主题，或多或少是某些反复试验过程的结果. ;)

So in summary we know all the attributes we can tweak now. Applying a style to the Toolbar instead of a theme is more or less the result of some trial and error process though. ;)

这篇关于如何将主题应用于Android工具栏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！