How to put overlay View over action bar Sherlock

Question

I want to set some view over action bar that will display Tutorial text (Like click here and send email...). Is this possible? I ask because i know that action bar uses the top space on layout, and a fragment or activity uses remaining space.
My second question is how to display all action items on action bar. I use ActionBarSherlock library and i see that i have room for one more action item, but it's not displaying on action bar. I set in xml ifRoom option on item...

Thanks!!!

Answer 1

There are multiple ways to achieve a tutorial-like overlay. Probably the easiest one is to use specially prepared Dialog window with transparent background and without dim behind.

Using custom Dialog for tutorial overlay

First of all we have to prepare content for the Dialog. In this example there will be one TextView inside RelativeLayout which is the most useful layout here.

Content of info_overlay.xml file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:background="@android:color/darker_gray"
        android:padding="3dp"
        android:text="TextView"
        android:textColor="@android:color/white" />

</RelativeLayout>

Now, we can use this layout to create our Dialog:

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Dialog overlayInfo = new Dialog(MainActivity.this);
        // Making sure there's no title.
        overlayInfo.requestWindowFeature(Window.FEATURE_NO_TITLE);
        // Making dialog content transparent.
        overlayInfo.getWindow().setBackgroundDrawable(
                new ColorDrawable(Color.TRANSPARENT));
        // Removing window dim normally visible when dialog are shown.
        overlayInfo.getWindow().clearFlags(
                WindowManager.LayoutParams.FLAG_DIM_BEHIND);
        // Setting position of content, relative to window.
        WindowManager.LayoutParams params = overlayInfo.getWindow().getAttributes();
        params.gravity = Gravity.TOP | Gravity.LEFT;
        params.x = 100;
        params.y = 20;
        // If user taps anywhere on the screen, dialog will be cancelled.
        overlayInfo.setCancelable(true);
        // Setting the content using prepared XML layout file.
        overlayInfo.setContentView(R.layout.info_overlay);
        overlayInfo.show();
    }

Result

Below is the screenshot of the above solution working. Note the TextView over ActionBar.

A few notes about solution

• If you'll have a dedicated button to dismiss tutorial you can probably use setCancelable(false) to avoid accidental closing of tutorial.
• This solution works with any theme with any action bar solution (either OS-provided, Android Support Library or ActionBar Sherlock)

Other solutions/helpers

Take a look at Showcase View library as it focuses on creating tutorial-like screens in easy way. I'm not sure however that it can easily overlay actionbars.