diff options
Diffstat (limited to 'docs/html/training/basics/actionbar/styling.jd')
| -rw-r--r-- | docs/html/training/basics/actionbar/styling.jd | 448 |
1 files changed, 448 insertions, 0 deletions
diff --git a/docs/html/training/basics/actionbar/styling.jd b/docs/html/training/basics/actionbar/styling.jd new file mode 100644 index 0000000..a1cc10c --- /dev/null +++ b/docs/html/training/basics/actionbar/styling.jd @@ -0,0 +1,448 @@ +page.title=Styling the Action Bar + +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://jgilfelt.github.io/android-actionbarstylegenerator/">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="@style/Theme.Holo.Light.DarkActionBar"> + <item name="android:actionBarStyle">@style/MyActionBar</item> + <style> + + <!-- ActionBar styles --> + <style name="MyActionBar" + parent="@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="www://http.actionbarstylegenerator.com">Android Action Bar Style + Generator</a>.</li> +</ul> +</div>
\ No newline at end of file |