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 h

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