How do I have an ActionBar icon/logo that overlaps the content as well?

Question

I'm currently making one of my very first applications. I'm using ActionBarSherlock. I would like to make my logo overlap the actionbar (scrollview).

Currently I have main_activity.xml. In MainActivity.java I use setContentView to view main_activity.xml. After that I use getSupportActionBar() for ActionBarSherlock. I've tried things out using RelativeLayout  (http://www.mkyong.com/android/android-relativelayout-example/). That didn't really work because there are multiple layouts.

So I've tried some things right and left, but it always ends up infront or behind the actionbar, or stops just before reaching the content. It's because of two different layouts, that's what I know. But how can I going to solve this? Is it possible? Thanks in advance!

What I want: http://f.cl.ly/items/3N0w243N1t2Q3i1H1f1k/Untitled-1.png

Answer 1

You can either:

A. Split your image in two
Have the top part as the ActionBar logo, then show the bottom part over your content.

B. Use a single image
You'll need a layout file that contains just your logo (you'll probably want something like an ImageView inside a LinearLayout so you can easily set the correct margins). Then after calling setContentView for your activity, add your logo view with:

ViewGroup decorViewGroup = (ViewGroup) getWindow().getDecorView();
decorViewGroup.addView(logoView);

Using a layout file

Example layout file (logo_view.xml):

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/logo_image"
        android:scaleType="center"
        android:layout_marginLeft="10dip"
        />

</LinearLayout>

Inflate the layout file:

LayoutInflater inflater = LayoutInflater.from(this);
View logoView = inflater.inflate(R.layout.logo_view, null, false);