Overlay dialog - align view

Question

I want to implement a help overlay for my app. It should look like this: How do I create a help overlay like you see in a few Android apps and ICS?

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

This works very well. The RelativeLayout of coach_mark.xml is displayed over my existing layout which was set via setContentView(). Now I want to align the views of coach_mark.xml near the according views of the existing layout, in order to react dynammically to the resolution and screen size. This is what I have tried:

RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(
                RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
        lp.addRule(RelativeLayout.BELOW,R.id.view_of_main_layout);
        view_of_the_overlay.setLayoutParams(lp);

But the view is displayed just in the middle of the screen. The only thing I could archieve is to align the view to bottom of screen, but that is not what I want to do.

Thanks for your help.

Ran Wakshlak · Answer 1 · 2014-02-23T17:06:46.533

1

You can use PopupWindow :

PopupWindow popup=new PopupWindow(this);
popup.setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));
popup.setWindowLayoutMode(FrameLayout.LayoutParams.WRAP_CONTENT,FrameLayout.LayoutParams.WRAP_CONTENT);
popup.setContentView(R.layout.coach_mark);
View view=findById(R.id.view_of_main_layout);
int[] viewLocation=new int[2];
view.getLocationInWindow(viewLocation)
popup.showAtLocation(view, Gravity.TOP|Gravity.LEFT, viewLocation[0],viewLocation[1]);

you can also adjust to popup location with the last two variables which are the X and Y offest. Their values can also be negative.

edited Feb 23 '14 at 17:06

answered Feb 23 '14 at 14:58

Ran Wakshlak

1,734
1
13
9

Okay I have tried this, but now the view of the overlay is just shown in the left bottom corner. – Gingerbread123321 Feb 23 '14 at 15:37
showAtLocation has 4 parameters, use the first one as the anchor view, the second for gravity and that use the offset x and y for final location. – Ran Wakshlak Feb 23 '14 at 15:47
But I used the view_of_main_layout as anchor. So if I do not enter a special offset the popup should be displayed in the left-bottom corner of the anchor and not of the screen am I right? – Gingerbread123321 Feb 23 '14 at 16:01
I was mistaken, the view param is not an anchor, the layout is relative to the window. I have updated my answer. – Ran Wakshlak Feb 23 '14 at 17:08

Overlay dialog - align view

1 Answers1

Linked