Styling the Action Bar
If you want to implement a visual design that represents your app's brand, the action bar allows you to customize each detail of its appearance, including the action bar color, text colors, button styles, and more. To do so, you need to use Android's style and theme framework to restyle the action bar using special style properties.
Caution: For all background drawables you provide, be sure to use Nine-Patch drawables to allow stretching. The nine-patch image should be smaller than 40dp tall and 30dp wide.
注意:背景图片最好用.9图片
以下是自定义样式时重要的样式属性,注意xxxStyle 的值是另一个样式元素或文件.
| General appearance 通用样式属性 | ||
| actionBarStyle | Specifies a style resource that defines various style properties for the action bar.
The default for this style for this is Supported styles include: |
|
| background | Defines a drawable resource for the action bar background. | |
| backgroundStacked | Defines a drawable resource for the stacked action bar (the tabs). | |
| backgroundSplit | Defines a drawable resource for the split action bar. | |
| actionButtonStyle |
Defines a style resource for action buttons. The default for this style for this is should use as the parent style. |
|
| actionOverflowButtonStyle | Defines a style resource for overflow action items.
The default for this style for this is which is what you should use as the parent style. |
|
| displayOptions |
Defines one or more action bar display options, such as whether to use the app logo, show the activity title, or enable the Up action.See |
|
| divider | Defines a drawable resource for the divider between action items. | |
| titleTextStyle |
Defines a style resource for the action bar title. The default for this style for this is which is what you should use as the parent style. |
|
| windowActionBarOverlay |
Declares whether the action bar should overlay the activity layout rather than offset the activity's layout position (for example, the Gallery app uses overlay mode). This is Normally, the action bar requires its own space on the screen and your activity layout fills in what's left over. When the action bar is in overlay mode, your activity layout uses all the available space and the system draws the action bar on top. Overlay mode can be useful if you want your content to keep a fixed size and position when he action bar is hidden and shown.You might also like to use it purely as a visual effect, because you can use a semi-transparent background for the action bar so the user can still see some of your activity layout behind the action bar. Note: The with your own styles and the When overlay mode is enabled, your activity layout has no awareness of the action bar lying on top of it. So, you must be careful not to place any important information or UI components in the area overlaid by the action bar.If appropriate, you can refer to the platform's value for by referencing it in your XML layout. For example: <SomeView
...
android:layout_marginTop="?android:attr/actionBarSize" />
You can also retrieve the action bar height at runtime with called, which might not include the stacked action bar (due to navigation tabs) if called during early activity lifecycle methods. To see how you can determine the total height at runtime, including the stacked action bar, see the Honeycomb Gallery sample app. |
|
| Action items 操作项样式属性 | ||
| actionButtonStyle | Defines a style resource for the action item buttons.
The default for this style for this is |
|
| actionBarItemBackground |
Defines a drawable resource for each action item's background. This should be a state-list drawable to indicate different selected states. |
|
| itemBackground |
Defines a drawable resource for each action overflow item's background. This should be a state-list drawable to indicate different selected states. |
|
| actionBarDivider | Defines a drawable resource for the divider between action items. | |
| actionMenuTextColor | Defines a color for text that appears in an action item. | |
| actionMenuTextAppearance | Defines a style resource for text that appears in an action item. | |
| actionBarWidgetTheme | Defines a theme resource for widgets that are inflated into the action bar as action views. | |
|
Navigation tabs 顶部Tab样式属性
|
||
| Defines a style resource for tabs in the action bar.
The default for this style for this is |
||
| actionBarTabBarStyle | Defines a style resource for the thin bar that appears below the navigation tabs.
The default for this style for this is |
|
| actionBarTabTextStyle | Defines a style resource for text in the navigation tabs.
The default for this style for this is |
|
| Drop-down lists 下拉列表样式属性 | ||
| actionDropDownStyle | Defines a style for the drop-down navigation (such as the background and text styles).
The default for this style for this is parent style. |
|
Example theme
Here's an example that defines a custom theme for an activity, CustomActivityTheme, that includes several styles to customize the action bar.
Notice that there are two versions for each action bar style property. The first one includes the android: prefix on the property name to support API levels 11 and higher that include these properties in the framework. The second version does not include the android: prefix and is for older versions of the platform, on which the system uses the style property from the support library. The effect for each is the same.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
parent="@style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/TabTextStyle</item>
<item name="android:actionMenuTextColor">@color/actionbar_text</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>
<item name="actionBarTabTextStyle">@style/TabTextStyle</item>
<item name="actionMenuTextColor">@color/actionbar_text</item>
</style>
<!-- general styles for the action bar -->
<style name="MyActionBar"
parent="@style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">@style/TitleTextStyle</item>
<item name="android:background">@drawable/actionbar_background</item>
<item name="android:backgroundStacked">@drawable/actionbar_background</item>
<item name="android:backgroundSplit">@drawable/actionbar_background</item>
<!-- Support library compatibility -->
<item name="titleTextStyle">@style/TitleTextStyle</item>
<item name="background">@drawable/actionbar_background</item>
<item name="backgroundStacked">@drawable/actionbar_background</item>
<item name="backgroundSplit">@drawable/actionbar_background</item>
</style>
<!-- action bar title text -->
<style name="TitleTextStyle"
parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
<item name="android:textColor">@color/actionbar_text</item>
</style>
<!-- action bar tab text -->
<style name="TabTextStyle"
parent="@style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@color/actionbar_text</item>
</style>
</resources>
In your manifest file, you can apply the theme to your entire app:
<application android:theme="@style/CustomActionBarTheme" ... />
Or to individual activities:
<activity android:theme="@style/CustomActionBarTheme" ... />
Caution: Be certain that each theme and style declares a parent theme in the <style> tag, from which it inherits all styles not explicitly declared by your theme. When modifying the action bar, using a parent theme is important so that you can simply override the action bar styles you want to change without re-implementing the styles you want to leave alone (such as text size or padding in action items).
For more information about using style and theme resources in your application, read Styles and Themes.
练习示例
<resources>
<!--
Base application theme for API 14+. This theme completely replaces
AppBaseTheme from BOTH res/values/styles.xml and
res/values-v11/styles.xml on API 14+ devices.
-->
<style name="AppBaseTheme" parent="@android:style/Theme.Holo.Light.DarkActionBar">
<!-- API 14 theme customizations can go here. -->
</style>
<!-- 自定义actionBar的样式主题 -->
<style name="StandardABTheme" parent="AppBaseTheme">
<!-- 用自定义的ActionBar的standard mode样式 -->
<item name="android:actionBarStyle">@style/custom_ActionBarStyle</item>
<!-- 自定义每个可见action item的背景(包括homeButton,action item和溢出button,但不包括溢出菜单里的) -->
<item name="android:actionBarItemBackground">@drawable/selector_actionbar_item_background</item>
<!-- 每个溢出菜单item的样式 -->
<item name="android:itemBackground">@drawable/selector_actionbar_overflow_item</item>
<!-- 定义的ActionBar的溢出按钮(OverflowButton)样式 -->
<!-- <item name="android:actionOverflowButtonStyle">@style/custom_ActionButton.Overflow</item> -->
<!-- <item name="android:actionMenuTextColor" >@color/green</item> -->
<item name="android:actionMenuTextAppearance">@style/custom_ActionMenuTextStyle</item>
<!-- 自定义ActionBar的溢出菜单框架的样式 -->
<!-- <item name="android:popupMenuStyle">@style/custom_PopupMenu</item> -->
<!-- 自定义ActionBar的溢出菜单列表的样式 -->
<!-- <item name="android:dropDownListViewStyle">@style/custom_DropDownListView</item> -->
<!-- api21 -->
<!-- <item name="android:actionOverflowMenuStyle">?attr/popupMenuStyle</item> -->
</style>
<style name="custom_ActionMenuTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Menu">
<item name="android:textSize">20sp</item>
<item name="android:textStyle">bold</item>
<item name="android:textColor">@color/white</item>
<item name="android:textAllCaps">false</item>
</style>
<!-- 自定义ActionBar的bar的样式 -->
<style name="custom_ActionBarStyle" parent="@android:style/Widget.ActionBar">
<!-- Change action bar background color -->
<item name="android:background">@drawable/selector_actionbar_item_background</item>
<!-- Change split action bar background color -->
<item name="android:backgroundSplit">@color/skyblue</item>
<item name="android:titleTextStyle">@style/custom_TitleTextStyle</item>
</style>
<!-- 自定义ActionBar的actionButton样式,选中时,正常时,焦点时 -->
<style name="custom_ActionButtonStyle" parent="@android:style/Widget.ActionButton">
<!-- Change action button background color -->
<item name="android:background">@drawable/selector_actionbar_button</item>
</style>
<!-- 自定义ActionBar的OverflowButton样式 -->
<style name="custom_ActionButton.Overflow" parent="@android:style/Widget.ActionButton.Overflow">
<!-- Change action bar Overflow button image -->
<item name="android:src">@drawable/ic_actionbar_overflow_button</item> <!-- OverflowButton的图片 -->
<item name="android:background">@drawable/selector_actionbar_item_background</item>
</style>
<!-- 自定义ActionBar的溢出菜单框架的样式 -->
<style name="custom_PopupMenu" parent="@android:style/Widget.Holo.Light.ListPopupWindow">
<item name="android:popupBackground">@drawable/popup_menu_frame_background</item> <!-- 溢出菜单的背景图 -->
</style>
<!-- 自定义ActionBar的溢出菜单列表的样式 -->
<style name="custom_DropDownListView" parent="@android:style/Widget.Holo.Light.ListView.DropDown">
<item name="android:listSelector">@drawable/popup_menu_list_item_background</item>
</style>
<!-- 自定义ActionBar的titleText样式 -->
<style name="custom_TitleTextStyle" parent="@android:style/TextAppearance.Holo.Widget.ActionBar.Title">
<!-- Change action bar title color -->
<item name="android:textColor">@color/white</item>
</style>
</resources>