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

Although the original answer works on some devices, on others the image sits under the status bar. I resolved this by getting the location of the top ActionBar and comparing it to the location of the top of the logo image and then just adding some top padding, as follows:

    // Inflate logo layout
    LayoutInflater inflater = LayoutInflater.from(this);
    final View logoView = inflater.inflate(R.layout.menu_logo, null);

    // Add logo to view
    ViewGroup viewGroup = (ViewGroup) getWindow().getDecorView();
    viewGroup.addView(logoView);

    // Adjust the logo position
    int resId = getResources().getIdentifier("action_bar_container", "id", "android");
    final View actionBarView = viewGroup.findViewById(resId);
    if (actionBarView != null) {
        actionBarView.getViewTreeObserver().addOnGlobalLayoutListener(
                new ViewTreeObserver.OnGlobalLayoutListener() {
                    public void onGlobalLayout() {
                        // Remove the listener
                        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
                            actionBarView.getViewTreeObserver().removeOnGlobalLayoutListener(this);
                        } else {
                            actionBarView.getViewTreeObserver().removeGlobalOnLayoutListener(this);
                        }

                        // Measure views
                        int[] location = new int[2];
                        actionBarView.getLocationOnScreen(location);

                        int[] logoLocation = new int[2];
                        logoView.getLocationOnScreen(logoLocation);

                        // Add top padding if necessary
                        if (location[1] > logoLocation[1]) {
                            logoView.setPadding(0, location[1] - logoLocation[1], 0, 0);
                        }
                    }
                }
        );
    }

This worked on a wide range of devices (phones, big/small tablets - inc Kindle Fire HDX) running Android versions 4.0 up to 4.4.4 as well as Android L preview.

Answer 2

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);