Coach mark View [Android]

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.

"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>