1 page.title=Styling the Action Bar 2 page.tags=actionbar 3 helpoutsWidget=true 4 5 trainingnavtop=true 6 7 @jd:body 8 9 10 <div id="tb-wrapper"> 11 <div id="tb"> 12 13 <h2>This lesson teaches you to</h2> 14 <ol> 15 <li><a href="#AndroidThemes">Use an Android Theme</a></li> 16 <li><a href="#CustomBackground">Customize the Background</a></li> 17 <li><a href="#CustomText">Customize the Text Color</a></li> 18 <li><a href="#CustomTabs">Customize the Tab Indicator</a></li> 19 </ol> 20 21 <h2>You should also read</h2> 22 <ul> 23 <li><a href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a></li> 24 <li><a class="external-link" target="_blank" 25 href="http://www.actionbarstylegenerator.com">Android Action Bar Style 26 Generator</a></li> 27 </ul> 28 29 </div> 30 </div> 31 32 33 34 <p>The action bar provides your users a familiar and predictable way to perform 35 actions and navigate your app, but that doesn't mean it needs to look exactly the 36 same as it does in other apps. If you want to style the action bar to better fit your product 37 brand, you can easily do so using Android's <a href="{@docRoot}guide/topics/ui/themes.html">style 38 and theme</a> resources.</p> 39 40 <p>Android includes a few built-in activity themes that include "dark" or "light" action bar 41 styles. You can also extend these themes to further customize the look for your action bar.</p> 42 43 <p class="note" style="clear:left"><strong>Note:</strong> If you are using the Support Library APIs 44 for the action bar, then you must use (or override) the {@link 45 android.support.v7.appcompat.R.style#Theme_AppCompat Theme.AppCompat} family of styles (rather 46 than the {@link android.R.style#Theme_Holo Theme.Holo} family, available in API level 11 and 47 higher). In doing so, each style property that you declare must be declared twice: once using 48 the platform's style properties (the 49 {@link android.R.attr android:} properties) and once using the 50 style properties included in the Support Library (the {@link android.support.v7.appcompat.R.attr 51 appcompat.R.attr} properties—the context for these properties is actually 52 <em>your app</em>). See the examples below for details.</p> 53 54 55 56 <h2 id="AndroidThemes">Use an Android Theme</h2> 57 58 <div class="figure" style="width:340px"> 59 <img src="{@docRoot}images/training/basics/actionbar-theme-dark@2x.png" width="340" alt="" /> 60 </div> 61 62 <div class="figure" style="width:340px"> 63 <img src="{@docRoot}images/training/basics/actionbar-theme-light-solid@2x.png" width="340" alt="" /> 64 </div> 65 66 <p>Android includes two baseline activity themes that dictate the color for the action bar: 67 </p> 68 <ul> 69 <li>{@link android.R.style#Theme_Holo Theme.Holo} for a "dark" theme. 70 </li> 71 <li>{@link android.R.style#Theme_Holo_Light Theme.Holo.Light} for a "light" theme. 72 </li> 73 </ul> 74 75 <p>You can apply these themes to your entire app or to individual activities by 76 declaring them in your manifest file with the {@code android:theme} attribute 77 for the <a href="{@docRoot}guide/topics/manifest/application-element.html">{@code 78 <application>}</a> element or individual 79 <a href="{@docRoot}guide/topics/manifest/application-element.html">{@code <activity>}</a> 80 elements.</p> 81 82 <p>For example:</p> 83 <pre> 84 <application android:theme="@android:style/Theme.Holo.Light" ... /> 85 </pre> 86 87 <div class="figure" style="width:340px"> 88 <img src="{@docRoot}images/training/basics/actionbar-theme-light-darkactionbar@2x.png" width="340" alt="" /> 89 </div> 90 91 <p>You can also use a dark action bar while the rest of the activity uses the light 92 color scheme by declaring the {@link android.R.style#Theme_Holo_Light_DarkActionBar 93 Theme.Holo.Light.DarkActionBar} theme.</p> 94 95 <p>When using the Support Library, you must instead use the 96 {@link android.support.v7.appcompat.R.style#Theme_AppCompat Theme.AppCompat} themes:</p> 97 <ul> 98 <li>{@link android.support.v7.appcompat.R.style#Theme_AppCompat Theme.AppCompat} for the 99 "dark" theme.</li> 100 <li>{@link android.support.v7.appcompat.R.style#Theme_AppCompat_Light Theme.AppCompat.Light} 101 for the "light" theme.</li> 102 <li>{@link android.support.v7.appcompat.R.style#Theme_AppCompat_Light_DarkActionBar 103 Theme.AppCompat.Light.DarkActionBar} for the light theme with a dark action bar. 104 </ul> 105 106 <p>Be sure that you use action bar icons that properly contrast with the color of your action 107 bar. To help you, the <a href="{@docRoot}design/downloads/index.html#action-bar-icon-pack">Action 108 Bar Icon Pack</a> includes standard action icons for use with both the Holo light and Holo dark 109 action bar.</p> 110 111 112 113 114 115 <h2 id="CustomBackground">Customize the Background</h2> 116 117 <div class="figure" style="width:340px"> 118 <img src="{@docRoot}images/training/basics/actionbar-theme-custom@2x.png" width="340" alt="" /> 119 </div> 120 121 <p>To change the action bar background, create a custom theme for your activity that overrides the 122 {@link android.R.attr#actionBarStyle} property. This property points to another style 123 in which you can override the {@link android.R.attr#background} property to specify 124 a drawable resource for the action bar background.</p> 125 126 <p>If your app uses <a href="{@docRoot}guide/topics/ui/actionbar.html#Tabs">navigation tabs</a> 127 or the <a href="{@docRoot}guide/topics/ui/actionbar.html#SplitBar">split 128 action bar</a>, then you can also specify the background for these bars using 129 the {@link android.R.attr#backgroundStacked} and 130 {@link android.R.attr#backgroundSplit} properties, respectively.</p> 131 132 <p class="caution"><strong>Caution:</strong> It's important that you declare an appropriate 133 parent theme from which your custom theme and style inherit their styles. Without a parent 134 style, your action bar will be without many style properties unless you explicitly declare 135 them yourself.</p> 136 137 138 <h3 id="CustomBackground11">For Android 3.0 and higher only</h3> 139 140 <p>When supporting Android 3.0 and higher only, you can define the action bar's 141 background like this:</p> 142 143 <p class="code-caption">res/values/themes.xml</p> 144 <pre> 145 <?xml version="1.0" encoding="utf-8"?> 146 <resources> 147 <!-- the theme applied to the application or activity --> 148 <style name="CustomActionBarTheme" 149 parent="@android:style/Theme.Holo.Light.DarkActionBar"> 150 <item name="android:actionBarStyle">@style/MyActionBar</item> 151 </style> 152 153 <!-- ActionBar styles --> 154 <style name="MyActionBar" 155 parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse"> 156 <item name="android:background">@drawable/actionbar_background</item> 157 </style> 158 </resources> 159 </pre> 160 161 <p>Then apply your theme to your entire app or individual activities:</p> 162 <pre> 163 <application android:theme="@style/CustomActionBarTheme" ... /> 164 </pre> 165 166 167 168 <h3 id="CustomBackground7">For Android 2.1 and higher</h3> 169 170 <p>When using the Support Library, the same theme as above must instead look like this:</p> 171 172 <p class="code-caption">res/values/themes.xml</p> 173 <pre> 174 <?xml version="1.0" encoding="utf-8"?> 175 <resources> 176 <!-- the theme applied to the application or activity --> 177 <style name="CustomActionBarTheme" 178 parent="@style/Theme.<strong>AppCompat</strong>.Light.DarkActionBar"> 179 <item name="android:actionBarStyle">@style/MyActionBar</item> 180 181 <!-- Support library compatibility --> 182 <item name="actionBarStyle">@style/MyActionBar</item> 183 </style> 184 185 <!-- ActionBar styles --> 186 <style name="MyActionBar" 187 parent="@style/Widget.<strong>AppCompat</strong>.Light.ActionBar.Solid.Inverse"> 188 <item name="android:background">@drawable/actionbar_background</item> 189 190 <!-- Support library compatibility --> 191 <item name="background">@drawable/actionbar_background</item> 192 </style> 193 </resources> 194 </pre> 195 196 <p>Then apply your theme to your entire app or individual activities:</p> 197 <pre> 198 <application android:theme="@style/CustomActionBarTheme" ... /> 199 </pre> 200 201 202 203 204 205 206 207 <h2 id="CustomText">Customize the Text Color</h2> 208 209 <p>To modify the color of text in the action bar, you need to override separate properties 210 for each text element:</p> 211 <ul> 212 <li>Action bar title: Create a custom style that specifies the {@code textColor} property and 213 specify that style for the {@link android.R.attr#titleTextStyle} property in your custom 214 {@link android.R.attr#actionBarStyle}. 215 <p class="note"><strong>Note:</strong> 216 The custom style applied to {@link android.R.attr#titleTextStyle} should use 217 {@link android.R.style#TextAppearance_Holo_Widget_ActionBar_Title 218 TextAppearance.Holo.Widget.ActionBar.Title} as the parent style.</p> 219 </li> 220 <li>Action bar tabs: Override {@link android.R.attr#actionBarTabTextStyle} in your 221 activity theme.</li> 222 <li>Action buttons: Override {@link android.R.attr#actionMenuTextColor} in your 223 activity theme.</li> 224 </ul> 225 226 227 <h3 id="CustomText11">For Android 3.0 and higher only</h3> 228 229 <p>When supporting Android 3.0 and higher only, your style XML file might look like this:</p> 230 231 <p class="code-caption">res/values/themes.xml</p> 232 <pre> 233 <?xml version="1.0" encoding="utf-8"?> 234 <resources> 235 <!-- the theme applied to the application or activity --> 236 <style name="CustomActionBarTheme" 237 parent="@style/Theme.Holo"> 238 <item name="android:actionBarStyle">@style/MyActionBar</item> 239 <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item> 240 <item name="android:actionMenuTextColor">@color/actionbar_text</item> 241 </style> 242 243 <!-- ActionBar styles --> 244 <style name="MyActionBar" 245 parent="@style/Widget.Holo.ActionBar"> 246 <item name="android:titleTextStyle">@style/MyActionBarTitleText</item> 247 </style> 248 249 <!-- ActionBar title text --> 250 <style name="MyActionBarTitleText" 251 parent="@style/TextAppearance.Holo.Widget.ActionBar.Title"> 252 <item name="android:textColor">@color/actionbar_text</item> 253 </style> 254 255 <!-- ActionBar tabs text styles --> 256 <style name="MyActionBarTabText" 257 parent="@style/Widget.Holo.ActionBar.TabText"> 258 <item name="android:textColor">@color/actionbar_text</item> 259 </style> 260 </resources> 261 </pre> 262 263 264 265 266 <h3 id="CustomText7">For Android 2.1 and higher</h3> 267 268 <p>When using the Support Library, your style XML file might look like this:</p> 269 270 <p class="code-caption">res/values/themes.xml</p> 271 <pre> 272 <?xml version="1.0" encoding="utf-8"?> 273 <resources> 274 <!-- the theme applied to the application or activity --> 275 <style name="CustomActionBarTheme" 276 parent="@style/Theme.<strong>AppCompat</strong>"> 277 <item name="android:actionBarStyle">@style/MyActionBar</item> 278 <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item> 279 <item name="android:actionMenuTextColor">@color/actionbar_text</item> 280 281 <!-- Support library compatibility --> 282 <item name="actionBarStyle">@style/MyActionBar</item> 283 <item name="actionBarTabTextStyle">@style/MyActionBarTabText</item> 284 <item name="actionMenuTextColor">@color/actionbar_text</item> 285 </style> 286 287 <!-- ActionBar styles --> 288 <style name="MyActionBar" 289 parent="@style/Widget.<strong>AppCompat</strong>.ActionBar"> 290 <item name="android:titleTextStyle">@style/MyActionBarTitleText</item> 291 292 <!-- Support library compatibility --> 293 <item name="titleTextStyle">@style/MyActionBarTitleText</item> 294 </style> 295 296 <!-- ActionBar title text --> 297 <style name="MyActionBarTitleText" 298 parent="@style/TextAppearance.<strong>AppCompat</strong>.Widget.ActionBar.Title"> 299 <item name="android:textColor">@color/actionbar_text</item> 300 <!-- The textColor property is backward compatible with the Support Library --> 301 </style> 302 303 <!-- ActionBar tabs text --> 304 <style name="MyActionBarTabText" 305 parent="@style/Widget.<strong>AppCompat</strong>.ActionBar.TabText"> 306 <item name="android:textColor">@color/actionbar_text</item> 307 <!-- The textColor property is backward compatible with the Support Library --> 308 </style> 309 </resources> 310 </pre> 311 312 313 314 315 316 317 <h2 id="CustomTabs">Customize the Tab Indicator</h2> 318 319 <div class="figure" style="width:340px"> 320 <img src="{@docRoot}images/training/basics/actionbar-theme-custom-tabs@2x.png" width="340" alt="" /> 321 </div> 322 323 <p>To change the indicator used for the <a 324 href="{@docRoot}guide/topics/ui/actionbar.html#Tabs">navigation tabs</a>, 325 create an activity theme that overrides the 326 {@link android.R.attr#actionBarTabStyle} property. This property points to another style 327 resource in which you override the {@link android.R.attr#background} property that should specify 328 a state-list drawable.</p> 329 330 <p class="note"><strong>Note:</strong> A state-list drawable is important so that the tab currently 331 selected indicates its state with a background different than the other tabs. For more information 332 about how to create a drawable resource that handles multiple button states, read the 333 <a href="{@docRoot}guide/topics/resources/drawable-resource.html#StateList">State List</a> 334 documentation.</p> 335 336 <p>For example, here's a state-list drawable that declares a specific background image 337 for several different states of an action bar tab:</p> 338 339 <p class="code-caption">res/drawable/actionbar_tab_indicator.xml</p> 340 <pre> 341 <?xml version="1.0" encoding="utf-8"?> 342 <selector xmlns:android="http://schemas.android.com/apk/res/android"> 343 344 <!-- STATES WHEN BUTTON IS NOT PRESSED --> 345 346 <!-- Non focused states --> 347 <item android:state_focused="false" android:state_selected="false" 348 android:state_pressed="false" 349 android:drawable="@drawable/tab_unselected" /> 350 <item android:state_focused="false" android:state_selected="true" 351 android:state_pressed="false" 352 android:drawable="@drawable/tab_selected" /> 353 354 <!-- Focused states (such as when focused with a d-pad or mouse hover) --> 355 <item android:state_focused="true" android:state_selected="false" 356 android:state_pressed="false" 357 android:drawable="@drawable/tab_unselected_focused" /> 358 <item android:state_focused="true" android:state_selected="true" 359 android:state_pressed="false" 360 android:drawable="@drawable/tab_selected_focused" /> 361 362 363 <!-- STATES WHEN BUTTON IS PRESSED --> 364 365 <!-- Non focused states --> 366 <item android:state_focused="false" android:state_selected="false" 367 android:state_pressed="true" 368 android:drawable="@drawable/tab_unselected_pressed" /> 369 <item android:state_focused="false" android:state_selected="true" 370 android:state_pressed="true" 371 android:drawable="@drawable/tab_selected_pressed" /> 372 373 <!-- Focused states (such as when focused with a d-pad or mouse hover) --> 374 <item android:state_focused="true" android:state_selected="false" 375 android:state_pressed="true" 376 android:drawable="@drawable/tab_unselected_pressed" /> 377 <item android:state_focused="true" android:state_selected="true" 378 android:state_pressed="true" 379 android:drawable="@drawable/tab_selected_pressed" /> 380 </selector> 381 </pre> 382 383 384 385 <h3 id="CustomTabs11">For Android 3.0 and higher only</h3> 386 387 <p>When supporting Android 3.0 and higher only, your style XML file might look like this:</p> 388 389 <p class="code-caption">res/values/themes.xml</p> 390 <pre> 391 <?xml version="1.0" encoding="utf-8"?> 392 <resources> 393 <!-- the theme applied to the application or activity --> 394 <style name="CustomActionBarTheme" 395 parent="@style/Theme.Holo"> 396 <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item> 397 </style> 398 399 <!-- ActionBar tabs styles --> 400 <style name="MyActionBarTabs" 401 parent="@style/Widget.Holo.ActionBar.TabView"> 402 <!-- tab indicator --> 403 <item name="android:background">@drawable/actionbar_tab_indicator</item> 404 </style> 405 </resources> 406 </pre> 407 408 409 410 <h3 id="CustomTabs7">For Android 2.1 and higher</h3> 411 412 <p>When using the Support Library, your style XML file might look like this:</p> 413 414 <p class="code-caption">res/values/themes.xml</p> 415 <pre> 416 <?xml version="1.0" encoding="utf-8"?> 417 <resources> 418 <!-- the theme applied to the application or activity --> 419 <style name="CustomActionBarTheme" 420 parent="@style/Theme.<strong>AppCompat</strong>"> 421 <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item> 422 423 <!-- Support library compatibility --> 424 <item name="actionBarTabStyle">@style/MyActionBarTabs</item> 425 </style> 426 427 <!-- ActionBar tabs styles --> 428 <style name="MyActionBarTabs" 429 parent="@style/Widget.<strong>AppCompat</strong>.ActionBar.TabView"> 430 <!-- tab indicator --> 431 <item name="android:background">@drawable/actionbar_tab_indicator</item> 432 433 <!-- Support library compatibility --> 434 <item name="background">@drawable/actionbar_tab_indicator</item> 435 </style> 436 </resources> 437 </pre> 438 439 <div class="note"><p><strong>More resources</strong></p> 440 <ul> 441 <li>See more style properties for the action bar are listed in the <a 442 href="{@docRoot}guide/topics/ui/actionbar.html#Style">Action Bar</a> guide.</li> 443 <li>Learn more about how themes work in the <a 444 href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a> guide.</li> 445 <li>For even more complete styling for the action bar, 446 try the <a class="external-link" target="_blank" 447 href="http://www.actionbarstylegenerator.com">Android Action Bar Style 448 Generator</a>.</li> 449 </ul> 450 </div>
