| page.title=Styling the Action Bar |
| page.tags=actionbar |
| helpoutsWidget=true |
| |
| trainingnavtop=true |
| |
| @jd:body |
| |
| |
| <div id="tb-wrapper"> |
| <div id="tb"> |
| |
| <h2>This lesson teaches you to</h2> |
| <ol> |
| <li><a href="#AndroidThemes">Use an Android Theme</a></li> |
| <li><a href="#CustomBackground">Customize the Background</a></li> |
| <li><a href="#CustomText">Customize the Text Color</a></li> |
| <li><a href="#CustomTabs">Customize the Tab Indicator</a></li> |
| </ol> |
| |
| <h2>You should also read</h2> |
| <ul> |
| <li><a href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a></li> |
| <li><a class="external-link" target="_blank" |
| href="http://www.actionbarstylegenerator.com">Android Action Bar Style |
| Generator</a></li> |
| </ul> |
| |
| </div> |
| </div> |
| |
| |
| |
| <p>The action bar provides your users a familiar and predictable way to perform |
| actions and navigate your app, but that doesn't mean it needs to look exactly the |
| same as it does in other apps. If you want to style the action bar to better fit your product |
| brand, you can easily do so using Android's <a href="{@docRoot}guide/topics/ui/themes.html">style |
| and theme</a> resources.</p> |
| |
| <p>Android includes a few built-in activity themes that include "dark" or "light" action bar |
| styles. You can also extend these themes to further customize the look for your action bar.</p> |
| |
| <p class="note" style="clear:left"><strong>Note:</strong> If you are using the Support Library APIs |
| for the action bar, then you must use (or override) the {@link |
| android.support.v7.appcompat.R.style#Theme_AppCompat Theme.AppCompat} family of styles (rather |
| than the {@link android.R.style#Theme_Holo Theme.Holo} family, available in API level 11 and |
| higher). In doing so, each style property that you declare must be declared twice: once using |
| the platform's style properties (the |
| {@link android.R.attr android:} properties) and once using the |
| style properties included in the Support Library (the {@link android.support.v7.appcompat.R.attr |
| appcompat.R.attr} properties—the context for these properties is actually |
| <em>your app</em>). See the examples below for details.</p> |
| |
| |
| |
| <h2 id="AndroidThemes">Use an Android Theme</h2> |
| |
| <div class="figure" style="width:340px"> |
| <img src="{@docRoot}images/training/basics/actionbar-theme-dark@2x.png" width="340" alt="" /> |
| </div> |
| |
| <div class="figure" style="width:340px"> |
| <img src="{@docRoot}images/training/basics/actionbar-theme-light-solid@2x.png" width="340" alt="" /> |
| </div> |
| |
| <p>Android includes two baseline activity themes that dictate the color for the action bar: |
| </p> |
| <ul> |
| <li>{@link android.R.style#Theme_Holo Theme.Holo} for a "dark" theme. |
| </li> |
| <li>{@link android.R.style#Theme_Holo_Light Theme.Holo.Light} for a "light" theme. |
| </li> |
| </ul> |
| |
| <p>You can apply these themes to your entire app or to individual activities by |
| declaring them in your manifest file with the {@code android:theme} attribute |
| for the <a href="{@docRoot}guide/topics/manifest/application-element.html">{@code |
| <application>}</a> element or individual |
| <a href="{@docRoot}guide/topics/manifest/application-element.html">{@code <activity>}</a> |
| elements.</p> |
| |
| <p>For example:</p> |
| <pre> |
| <application android:theme="@android:style/Theme.Holo.Light" ... /> |
| </pre> |
| |
| <div class="figure" style="width:340px"> |
| <img src="{@docRoot}images/training/basics/actionbar-theme-light-darkactionbar@2x.png" width="340" alt="" /> |
| </div> |
| |
| <p>You can also use a dark action bar while the rest of the activity uses the light |
| color scheme by declaring the {@link android.R.style#Theme_Holo_Light_DarkActionBar |
| Theme.Holo.Light.DarkActionBar} theme.</p> |
| |
| <p>When using the Support Library, you must instead use the |
| {@link android.support.v7.appcompat.R.style#Theme_AppCompat Theme.AppCompat} themes:</p> |
| <ul> |
| <li>{@link android.support.v7.appcompat.R.style#Theme_AppCompat Theme.AppCompat} for the |
| "dark" theme.</li> |
| <li>{@link android.support.v7.appcompat.R.style#Theme_AppCompat_Light Theme.AppCompat.Light} |
| for the "light" theme.</li> |
| <li>{@link android.support.v7.appcompat.R.style#Theme_AppCompat_Light_DarkActionBar |
| Theme.AppCompat.Light.DarkActionBar} for the light theme with a dark action bar. |
| </ul> |
| |
| <p>Be sure that you use action bar icons that properly contrast with the color of your action |
| bar. To help you, the <a href="{@docRoot}design/downloads/index.html#action-bar-icon-pack">Action |
| Bar Icon Pack</a> includes standard action icons for use with both the Holo light and Holo dark |
| action bar.</p> |
| |
| |
| |
| |
| |
| <h2 id="CustomBackground">Customize the Background</h2> |
| |
| <div class="figure" style="width:340px"> |
| <img src="{@docRoot}images/training/basics/actionbar-theme-custom@2x.png" width="340" alt="" /> |
| </div> |
| |
| <p>To change the action bar background, create a custom theme for your activity that overrides the |
| {@link android.R.attr#actionBarStyle} property. This property points to another style |
| in which you can override the {@link android.R.attr#background} property to specify |
| a drawable resource for the action bar background.</p> |
| |
| <p>If your app uses <a href="{@docRoot}guide/topics/ui/actionbar.html#Tabs">navigation tabs</a> |
| or the <a href="{@docRoot}guide/topics/ui/actionbar.html#SplitBar">split |
| action bar</a>, then you can also specify the background for these bars using |
| the {@link android.R.attr#backgroundStacked} and |
| {@link android.R.attr#backgroundSplit} properties, respectively.</p> |
| |
| <p class="caution"><strong>Caution:</strong> It's important that you declare an appropriate |
| parent theme from which your custom theme and style inherit their styles. Without a parent |
| style, your action bar will be without many style properties unless you explicitly declare |
| them yourself.</p> |
| |
| |
| <h3 id="CustomBackground11">For Android 3.0 and higher only</h3> |
| |
| <p>When supporting Android 3.0 and higher only, you can define the action bar's |
| background like this:</p> |
| |
| <p class="code-caption">res/values/themes.xml</p> |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <resources> |
| <!-- the theme applied to the application or activity --> |
| <style name="CustomActionBarTheme" |
| parent="@android:style/Theme.Holo.Light.DarkActionBar"> |
| <item name="android:actionBarStyle">@style/MyActionBar</item> |
| </style> |
| |
| <!-- ActionBar styles --> |
| <style name="MyActionBar" |
| parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse"> |
| <item name="android:background">@drawable/actionbar_background</item> |
| </style> |
| </resources> |
| </pre> |
| |
| <p>Then apply your theme to your entire app or individual activities:</p> |
| <pre> |
| <application android:theme="@style/CustomActionBarTheme" ... /> |
| </pre> |
| |
| |
| |
| <h3 id="CustomBackground7">For Android 2.1 and higher</h3> |
| |
| <p>When using the Support Library, the same theme as above must instead look like this:</p> |
| |
| <p class="code-caption">res/values/themes.xml</p> |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <resources> |
| <!-- the theme applied to the application or activity --> |
| <style name="CustomActionBarTheme" |
| parent="@style/Theme.<strong>AppCompat</strong>.Light.DarkActionBar"> |
| <item name="android:actionBarStyle">@style/MyActionBar</item> |
| |
| <!-- Support library compatibility --> |
| <item name="actionBarStyle">@style/MyActionBar</item> |
| </style> |
| |
| <!-- ActionBar styles --> |
| <style name="MyActionBar" |
| parent="@style/Widget.<strong>AppCompat</strong>.Light.ActionBar.Solid.Inverse"> |
| <item name="android:background">@drawable/actionbar_background</item> |
| |
| <!-- Support library compatibility --> |
| <item name="background">@drawable/actionbar_background</item> |
| </style> |
| </resources> |
| </pre> |
| |
| <p>Then apply your theme to your entire app or individual activities:</p> |
| <pre> |
| <application android:theme="@style/CustomActionBarTheme" ... /> |
| </pre> |
| |
| |
| |
| |
| |
| |
| |
| <h2 id="CustomText">Customize the Text Color</h2> |
| |
| <p>To modify the color of text in the action bar, you need to override separate properties |
| for each text element:</p> |
| <ul> |
| <li>Action bar title: Create a custom style that specifies the {@code textColor} property and |
| specify that style for the {@link android.R.attr#titleTextStyle} property in your custom |
| {@link android.R.attr#actionBarStyle}. |
| <p class="note"><strong>Note:</strong> |
| The custom style applied to {@link android.R.attr#titleTextStyle} should use |
| {@link android.R.style#TextAppearance_Holo_Widget_ActionBar_Title |
| TextAppearance.Holo.Widget.ActionBar.Title} as the parent style.</p> |
| </li> |
| <li>Action bar tabs: Override {@link android.R.attr#actionBarTabTextStyle} in your |
| activity theme.</li> |
| <li>Action buttons: Override {@link android.R.attr#actionMenuTextColor} in your |
| activity theme.</li> |
| </ul> |
| |
| |
| <h3 id="CustomText11">For Android 3.0 and higher only</h3> |
| |
| <p>When supporting Android 3.0 and higher only, your style XML file might look like this:</p> |
| |
| <p class="code-caption">res/values/themes.xml</p> |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <resources> |
| <!-- the theme applied to the application or activity --> |
| <style name="CustomActionBarTheme" |
| parent="@style/Theme.Holo"> |
| <item name="android:actionBarStyle">@style/MyActionBar</item> |
| <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item> |
| <item name="android:actionMenuTextColor">@color/actionbar_text</item> |
| </style> |
| |
| <!-- ActionBar styles --> |
| <style name="MyActionBar" |
| parent="@style/Widget.Holo.ActionBar"> |
| <item name="android:titleTextStyle">@style/MyActionBarTitleText</item> |
| </style> |
| |
| <!-- ActionBar title text --> |
| <style name="MyActionBarTitleText" |
| parent="@style/TextAppearance.Holo.Widget.ActionBar.Title"> |
| <item name="android:textColor">@color/actionbar_text</item> |
| </style> |
| |
| <!-- ActionBar tabs text styles --> |
| <style name="MyActionBarTabText" |
| parent="@style/Widget.Holo.ActionBar.TabText"> |
| <item name="android:textColor">@color/actionbar_text</item> |
| </style> |
| </resources> |
| </pre> |
| |
| |
| |
| |
| <h3 id="CustomText7">For Android 2.1 and higher</h3> |
| |
| <p>When using the Support Library, your style XML file might look like this:</p> |
| |
| <p class="code-caption">res/values/themes.xml</p> |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <resources> |
| <!-- the theme applied to the application or activity --> |
| <style name="CustomActionBarTheme" |
| parent="@style/Theme.<strong>AppCompat</strong>"> |
| <item name="android:actionBarStyle">@style/MyActionBar</item> |
| <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item> |
| <item name="android:actionMenuTextColor">@color/actionbar_text</item> |
| |
| <!-- Support library compatibility --> |
| <item name="actionBarStyle">@style/MyActionBar</item> |
| <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item> |
| <item name="actionMenuTextColor">@color/actionbar_text</item> |
| </style> |
| |
| <!-- ActionBar styles --> |
| <style name="MyActionBar" |
| parent="@style/Widget.<strong>AppCompat</strong>.ActionBar"> |
| <item name="android:titleTextStyle">@style/MyActionBarTitleText</item> |
| |
| <!-- Support library compatibility --> |
| <item name="titleTextStyle">@style/MyActionBarTitleText</item> |
| </style> |
| |
| <!-- ActionBar title text --> |
| <style name="MyActionBarTitleText" |
| parent="@style/TextAppearance.<strong>AppCompat</strong>.Widget.ActionBar.Title"> |
| <item name="android:textColor">@color/actionbar_text</item> |
| <!-- The textColor property is backward compatible with the Support Library --> |
| </style> |
| |
| <!-- ActionBar tabs text --> |
| <style name="MyActionBarTabText" |
| parent="@style/Widget.<strong>AppCompat</strong>.ActionBar.TabText"> |
| <item name="android:textColor">@color/actionbar_text</item> |
| <!-- The textColor property is backward compatible with the Support Library --> |
| </style> |
| </resources> |
| </pre> |
| |
| |
| |
| |
| |
| |
| <h2 id="CustomTabs">Customize the Tab Indicator</h2> |
| |
| <div class="figure" style="width:340px"> |
| <img src="{@docRoot}images/training/basics/actionbar-theme-custom-tabs@2x.png" width="340" alt="" /> |
| </div> |
| |
| <p>To change the indicator used for the <a |
| href="{@docRoot}guide/topics/ui/actionbar.html#Tabs">navigation tabs</a>, |
| create an activity theme that overrides the |
| {@link android.R.attr#actionBarTabStyle} property. This property points to another style |
| resource in which you override the {@link android.R.attr#background} property that should specify |
| a state-list drawable.</p> |
| |
| <p class="note"><strong>Note:</strong> A state-list drawable is important so that the tab currently |
| selected indicates its state with a background different than the other tabs. For more information |
| about how to create a drawable resource that handles multiple button states, read the |
| <a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">State List</a> |
| documentation.</p> |
| |
| <p>For example, here's a state-list drawable that declares a specific background image |
| for several different states of an action bar tab:</p> |
| |
| <p class="code-caption">res/drawable/actionbar_tab_indicator.xml</p> |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <selector xmlns:android="http://schemas.android.com/apk/res/android"> |
| |
| <!-- STATES WHEN BUTTON IS NOT PRESSED --> |
| |
| <!-- Non focused states --> |
| <item android:state_focused="false" android:state_selected="false" |
| android:state_pressed="false" |
| android:drawable="@drawable/tab_unselected" /> |
| <item android:state_focused="false" android:state_selected="true" |
| android:state_pressed="false" |
| android:drawable="@drawable/tab_selected" /> |
| |
| <!-- Focused states (such as when focused with a d-pad or mouse hover) --> |
| <item android:state_focused="true" android:state_selected="false" |
| android:state_pressed="false" |
| android:drawable="@drawable/tab_unselected_focused" /> |
| <item android:state_focused="true" android:state_selected="true" |
| android:state_pressed="false" |
| android:drawable="@drawable/tab_selected_focused" /> |
| |
| |
| <!-- STATES WHEN BUTTON IS PRESSED --> |
| |
| <!-- Non focused states --> |
| <item android:state_focused="false" android:state_selected="false" |
| android:state_pressed="true" |
| android:drawable="@drawable/tab_unselected_pressed" /> |
| <item android:state_focused="false" android:state_selected="true" |
| android:state_pressed="true" |
| android:drawable="@drawable/tab_selected_pressed" /> |
| |
| <!-- Focused states (such as when focused with a d-pad or mouse hover) --> |
| <item android:state_focused="true" android:state_selected="false" |
| android:state_pressed="true" |
| android:drawable="@drawable/tab_unselected_pressed" /> |
| <item android:state_focused="true" android:state_selected="true" |
| android:state_pressed="true" |
| android:drawable="@drawable/tab_selected_pressed" /> |
| </selector> |
| </pre> |
| |
| |
| |
| <h3 id="CustomTabs11">For Android 3.0 and higher only</h3> |
| |
| <p>When supporting Android 3.0 and higher only, your style XML file might look like this:</p> |
| |
| <p class="code-caption">res/values/themes.xml</p> |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <resources> |
| <!-- the theme applied to the application or activity --> |
| <style name="CustomActionBarTheme" |
| parent="@style/Theme.Holo"> |
| <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item> |
| </style> |
| |
| <!-- ActionBar tabs styles --> |
| <style name="MyActionBarTabs" |
| parent="@style/Widget.Holo.ActionBar.TabView"> |
| <!-- tab indicator --> |
| <item name="android:background">@drawable/actionbar_tab_indicator</item> |
| </style> |
| </resources> |
| </pre> |
| |
| |
| |
| <h3 id="CustomTabs7">For Android 2.1 and higher</h3> |
| |
| <p>When using the Support Library, your style XML file might look like this:</p> |
| |
| <p class="code-caption">res/values/themes.xml</p> |
| <pre> |
| <?xml version="1.0" encoding="utf-8"?> |
| <resources> |
| <!-- the theme applied to the application or activity --> |
| <style name="CustomActionBarTheme" |
| parent="@style/Theme.<strong>AppCompat</strong>"> |
| <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item> |
| |
| <!-- Support library compatibility --> |
| <item name="actionBarTabStyle">@style/MyActionBarTabs</item> |
| </style> |
| |
| <!-- ActionBar tabs styles --> |
| <style name="MyActionBarTabs" |
| parent="@style/Widget.<strong>AppCompat</strong>.ActionBar.TabView"> |
| <!-- tab indicator --> |
| <item name="android:background">@drawable/actionbar_tab_indicator</item> |
| |
| <!-- Support library compatibility --> |
| <item name="background">@drawable/actionbar_tab_indicator</item> |
| </style> |
| </resources> |
| </pre> |
| |
| <div class="note"><p><strong>More resources</strong></p> |
| <ul> |
| <li>See more style properties for the action bar are listed in the <a |
| href="{@docRoot}guide/topics/ui/actionbar.html#Style">Action Bar</a> guide.</li> |
| <li>Learn more about how themes work in the <a |
| href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a> guide.</li> |
| <li>For even more complete styling for the action bar, |
| try the <a class="external-link" target="_blank" |
| href="http://www.actionbarstylegenerator.com">Android Action Bar Style |
| Generator</a>.</li> |
| </ul> |
| </div> |