1 page.title=Overlaying 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="#EnableOverlay">Enable Overlay Mode</a> 14 <ol> 15 <li><a href="#Overlay11">For Android 3.0 and higher only</a></li> 16 <li><a href="#Overlay7">For Android 2.1 and higher</a></li> 17 </ol> 18 </li> 19 <li><a href="#TopMargin">Specify Layout Top-margin</a></li> 20 </ol> 21 22 <h2>You should also read</h2> 23 <ul> 24 <li><a href="{@docRoot}guide/topics/ui/themes.html">Styles and Themes</a></li> 25 </ul> 26 </div> 27 </div> 28 29 30 <p>By default, the action bar appears at the top of your activity window, 31 slightly reducing the amount of space available for the rest of your activity's layout. 32 If, during the course of user interaction, you want to hide and show the action bar, you can do so 33 by calling {@link android.app.ActionBar#hide()} and 34 {@link android.app.ActionBar#show()} on the {@link android.app.ActionBar}. However, 35 this causes your activity to recompute and redraw the layout based on its new size.</p> 36 37 38 <div class="figure" style="width:280px"> 39 <img src="{@docRoot}images/training/basics/actionbar-overlay@2x.png" width="280" alt="" /> 40 <p class="img-caption"><strong>Figure 1.</strong> Gallery's action bar in overlay mode.</p> 41 </div> 42 43 <p>To avoid resizing your layout when the action bar hides and shows, you can enable <em>overlay 44 mode</em> for the action bar. When in overlay mode, your activity layout uses all the space 45 available as if the action bar is not there and the system draws the action bar in front of 46 your layout. This obscures some of the layout at the top, but now when the action bar hides or 47 appears, the system does not need to resize your layout and the transition is seamless.</p> 48 49 <p class="note"><strong>Tip:</strong> 50 If you want your layout to be partially visible behind the action bar, create a custom 51 style for the action bar with a partially transparent background, such as the one shown 52 in figure 1. For information about how to define the action bar background, read 53 <a href="{@docRoot}training/basics/actionbar/styling.html">Styling the Action Bar</a>.</p> 54 55 56 <h2 id="EnableOverlay">Enable Overlay Mode</h2> 57 58 <p>To enable overlay mode for the action bar, you need to create a custom theme that 59 extends an existing action bar theme and set the {@code android:windowActionBarOverlay} property to 60 {@code true}.</p> 61 62 63 <h3 id="Overlay11">For Android 3.0 and higher only</h3> 64 65 <p>If your 66 <a href="{@docRoot}guide/topics/manifest/uses-sdk-element.html#min">{@code minSdkVersion}</a> 67 is set to {@code 11} or higher, your custom theme should use 68 {@link android.R.style#Theme_Holo Theme.Holo} theme (or one of its descendants) as your parent 69 theme. For example:</p> 70 71 <pre> 72 <resources> 73 <!-- the theme applied to the application or activity --> 74 <style name="CustomActionBarTheme" 75 parent="@android:style/Theme.Holo"> 76 <item name="android:windowActionBarOverlay">true</item> 77 </style> 78 </resources> 79 </pre> 80 81 82 <h3 id="Overlay7">For Android 2.1 and higher</h3> 83 84 <p>If your app is using the Support Library for compatibility on devices 85 running versions lower than Android 3.0, your custom theme should use 86 {@link android.support.v7.appcompat.R.style#Theme_AppCompat Theme.AppCompat} theme 87 (or one of its descendants) as your parent theme. For example:</p> 88 89 <pre> 90 <resources> 91 <!-- the theme applied to the application or activity --> 92 <style name="CustomActionBarTheme" 93 parent="@android:style/Theme.<strong>AppCompat</strong>"> 94 <item name="android:windowActionBarOverlay">true</item> 95 96 <!-- Support library compatibility --> 97 <item name="windowActionBarOverlay">true</item> 98 </style> 99 </resources> 100 </pre> 101 102 <p>Also notice that this theme includes two definitions for the {@code windowActionBarOverlay} 103 style: one with the {@code android:} prefix and one without. The one with the {@code android:} 104 prefix is for versions of Android that include the style in the platform and the one 105 without the prefix is for older versions that read the style from the Support Library.</p> 106 107 108 109 110 111 <h2 id="TopMargin">Specify Layout Top-margin</h2> 112 113 <p>When the action bar is in overlay mode, it might obscure some of your layout that should 114 remain visible. To ensure that such items remain below the action bar at all times, 115 add either margin or padding to the top of the view(s) 116 using the height specified by {@link android.R.attr#actionBarSize}. For example:</p> 117 118 <pre> 119 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 120 android:layout_width="match_parent" 121 android:layout_height="match_parent" 122 android:paddingTop="?android:attr/actionBarSize"> 123 ... 124 </RelativeLayout> 125 </pre> 126 127 <p>If you're using the Support Library for the action bar, you need to remove the 128 {@code android:} prefix. For example:</p> 129 130 <pre> 131 <!-- Support library compatibility --> 132 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 133 android:layout_width="match_parent" 134 android:layout_height="match_parent" 135 android:paddingTop="?attr/actionBarSize"> 136 ... 137 </RelativeLayout> 138 </pre> 139 140 <p>In this case, the {@code ?attr/actionBarSize} value without the 141 prefix works on all versions, including Android 3.0 and higher.</p>
