How do I create a help overlay like you see in a few Android apps and ICS?

Question

I am wanting to create help overlays like the ones you see when ICS loads for the first time or in apps like ES File Explorer or Apex Launcher (there are more, but I can't think of them right now). Is this just a relative layout with one view sitting on top of the other? I haven't been able to find any sample code for doing such a thing. Anyone know how this is done or have any ideas?

Answer 1

Let's assume you ordinarily would call setContentView(R.layout.main), but on first run, you want to have this overlay.

Step #1: Create a FrameLayout in Java code and pass that to setContentView().

Step #2: Use LayoutInflater to inflate R.layout.main into the FrameLayout.

Step #3: Use LayoutInflater to inflate the overlay into the FrameLayout.

Step #4: When the user taps the button (or whatever) to dismiss the overlay, call removeView() to remove the overlay from the FrameLayout.

Since the overlay is a later child of the FrameLayout, it will float over top of the contents of R.layout.main.

Answer 2

"Coach mark" is "Help overlay" in UX talk :-)

coach_mark.xml is your coach mark layout

coach_mark_master_view is the id of the top most view (root) in coach_mark.xml

public void onCoachMark(){      final Dialog dialog = new Dialog(this);     dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);     dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));     dialog.setContentView(R.layout.coach_mark);     dialog.setCanceledOnTouchOutside(true);     //for dismissing anywhere you touch     View masterView = dialog.findViewById(R.id.coach_mark_master_view);     masterView.setOnClickListener(new View.OnClickListener() {         @Override         public void onClick(View view) {             dialog.dismiss();         }     });     dialog.show(); } 

Adding sample of coach_mark.xml (to this excellent solution given by Oded Breiner), so its easy for ppl to copy & paste to see working example quickly.

Sample of coach_mark.xml here, change the -> drawable/coach_marks to your image:

coach_mark.xml

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     android:id="@+id/coach_mark_master_view">     <RelativeLayout         android:layout_width="match_parent"         android:layout_height="match_parent" >          <ImageView              android:id="@+id/coach_marks_image"              android:layout_width="match_parent"              android:layout_height="match_parent"              android:layout_centerInParent="true"              android:layout_gravity="center_horizontal"              android:src="@drawable/coach_marks" />     </RelativeLayout> </LinearLayout> 

And optionally use this theme to remove padding:

<style name="WalkthroughTheme" parent="Theme.AppCompat">     <item name="android:windowIsTranslucent">true</item>     <item name="android:windowBackground">@android:color/transparent</item>     <item name="android:windowContentOverlay">@null</item>     <item name="android:windowNoTitle">true</item>     <item name="android:backgroundDimEnabled">false</item> </style>