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