448 lines
18 KiB
Plaintext
448 lines
18 KiB
Plaintext
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://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> |