Gmail tablet style scroll bars with transparent actionbar

Question

I've been trying stuff and searching for the last couple of hours and got no where so I thought I'd ask here.

Basically the Honeycomb version of Gmail has a listview on the right for it's message list and when you scroll the listview the items go under the actionbar which appears to have some form of gradient on it with #00FFFFFF at the bottom going up to #FFFFFFFF at the top giving the impression of the items fading out.

But they important thing to notice here is that the SCROLLBAR on the listview never goes underneath the ActionBar! and the default top position for the listview is underneath the scrollbar.

I've tried to implement a similar style layout for my app with a scrollview that scrolls underneath the actionbar which has an alpha set on it, it looks all nice and well but the scrollbars go underneath as well! :( and it makes it look a bit weird, it's not a nice option.

I've achieved what I have so far by using

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

and

getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.actionbar_bg));

which is a an XML drawable that simply has a color of #BB000000 (no gradient just yet)

this is the current effect, the scrollbar can be seen underneath the actionbar :(

this is the desired effect with the scrollbar never going into the actionbar but the content does scroll up underneath it

Edit: I think this probably uses something custom in Google and have all but given up figuring it out

Answer 1

call this before super.onCreate(savedInstanceState); in onCreate of your activity

requestWindowFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

More: http://developer.android.com/reference/android/view/Window.html#FEATURE_ACTION_BAR_OVERLAY

Answer 2

I can't see an easy way of doing this but I have come up with two possible solutions. There could well be a much better option that I couldn't see obviously.

The first and easiest, is to create a 9patch background file for you ActionBar that has an expanding gradient area and a fixed opaque area at the right hand side, the same side as your scroll bar. This way the scrollbar would still go under the ActionBar, but it would be hidden. However it would have the affect of the scrollbar disappearing / getting smaller.

Another option would be to edit the scrollbar thumb in the xml like this:

<ListView android:scrollbarThumbVertical="@drawable/YOUR_CUSTOM_THUMB" ></ListView>

Then create a scrollbar thumb with a transparent offset at the top.

Thinking about it I think the second option is probably the best to go for and will give you the best result. I realise it's a pretty crappy hack. Looking into a code way of doing it, I think you would have to extend a number of classes and override a load of methods.