ActionBar&Toolbar自定义样式总结(使用Theme.AppCompat)

以下所有的配置都在style.xml中,使用Theme.AppCompat

  • 自定义ActionBar背景、标题字体样式(背景的自定义如果配合使用Toolbar完全可以设置colorPrimary属性,没必要用以下的方法)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<style name="CustomActionBarTheme" parent="@style/Theme.AppCompat">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="actionBarStyle">@style/MyActionBar</item>

<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
<item name="android:background">#33B5E5</item>
<item name="background">@drawable/actionbar_bk</item>
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
<item name="titleTextStyle">@style/MyActionBarTitleText</item>
</style>

<style name="MyActionBarTitleText" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">#00FF00</item>
</style>
</style>
  • 自定义action button、overflow menu样式(overflow menu也就是我们通常在ActionBar右侧点击三个点出现的PopupMenu)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<style name="CustomOverflowMenuTheme" parent="@style/Theme.AppCompat">
<!-- 无icon纯文字的actionButton样式 -->
<item name="android:actionMenuTextAppearance">@style/DarkGrayH3TextStyle</item>
<item name="actionMenuTextAppearance">@style/DarkGrayH3TextStyle</item>
<!-- 有icon的actionButton样式 -->
<item name="android:actionButtonStyle">@style/ActionButtonStyle</item>
<item name="actionButtonStyle">@style/ActionButtonStyle</item>
<!-- overflowMenu的按钮样式 -->
<item name="android:actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
<item name="actionOverflowButtonStyle">@style/OverflowButtonStyle</item>
<!-- overflowMenu的整体样式 -->
<item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item>

<style name="DarkGrayH3TextStyle">
<item name="android:textColor">@color/alDarkGrayColor</item>
<item name="android:textSize">@dimen/alH3Font</item>
</style>

<style name="ActionButtonStyle" parent="@style/Widget.AppCompat.ActionButton">
<item name="android:background">@android:color/transparent</item>
</style>

<style name="OverflowButtonStyle" parent="@style/Widget.AppCompat.ActionButton.Overflow">
<item name="android:background">@android:color/transparent</item>
</style>

<style name="OverflowMenuStyle" parent="@style/Widget.AppCompat.PopupMenu.Overflow">
<item name="overlapAnchor">false</item>
<!--<item name="android:popupBackground">?attr/colorPrimary</item>-->
<!--<item name="android:dropDownWidth">wrap_content</item>-->
<!--<item name="android:paddingRight">4dp</item>-->
<!--<item name="android:paddingLeft">4dp</item>-->
<!--<item name="android:dropDownVerticalOffset">?attr/actionBarSize</item>-->
<!--<item name="android:dropDownHorizontalOffset">-4dp</item>-->
</style>

</style>
  • 自定义Toolbar的NavigationButton(也就是Toolbar左侧的一个按钮)
1
2
3
4
5
6
7
8
9
10
<style name="AppTheme" parent="@style/Theme.AppCompat">
<item name="toolbarNavigationButtonStyle">@style/NavigationButtonStyle</item>

<style name="NavigationButtonStyle" parent="Widget.AppCompat.Toolbar.Button.Navigation">
<item name="android:background">@android:color/transparent</item>
<item name="android:minWidth">0dp</item>
<item name="android:paddingLeft">13dp</item>
<item name="android:paddingRight">3dp</item>
</style>
</style>