Make Action Bar Overlay work with ListView or GridView

ActionBar pattern is widely used since Honeycomb released. As the action bar actually take space of your limited screen, you may need make the action bar semi-transparent to save some space. ActionBar API provide an method to overlay your action bar on your screen content. as the training material mentioned:

Just add a style windowActionBarOverlay and set it true. The snippet is copied from android developer. 

1
2
3
4
5
6
7
8
9
10
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@android:style/Theme.AppCompat">
        <item name="android:windowActionBarOverlay">true</item>

        <!-- Support library compatibility -->
        <item name="windowActionBarOverlay">true</item>
    </style>
</resources>

But the training material from android developer site isn’t use an ListView or GridView with ActionBar overlay. When you just follow its instruction to set paddingTop on your ListView or GridView. You may not get expected effect. the scrolling content is just cut from the air. like the left side show on the figure.

clipToPadding and scrollBarStyle Protip

To achieve the right effect like the right side. Android Developers Official G+ page give a tip on G+ https://plus.google.com/+AndroidDevelopers/posts/LpAA7q4jw9M

Add an attribute android:clipToPadding to your ListView or GridView and set it false. then you can set your paddingTop on your ListView or GridView as your ActionBar height.

1
2
3
4
<ListView
    …
    android:clipToPadding="false"
    android:scrollbarStyle="outsideOverlay" />