我花了大量的时间试图弄清楚如何将一些简单的样式应用到工具栏,但我完全被难倒了。具体来说,我想更改标题和副标题的颜色以及溢出菜单图标(三个点)。我可以在布局中成功设置文本颜色,但不能在主题中设置,我不知道为什么。
<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让我完全糊涂和猜测。
答案 0 :(得分:17)
以下应该适合你:
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>
总而言之,我们知道我们现在可以调整的所有属性。将样式应用于Toolbar
而不是主题,或多或少是一些试错过程的结果。 ;)