Showing an overlay in Android

Question

My idea was to have a simple layout for a normal notification and a dialog control for the pop up with animation. Since the pop up needs to be at the point on which the user clicks, I wanted to write a custom DialogueView extending the Dialog class, within which I determine the anchor point. This is what I have done so far:

Design of the layout without the pop up:

pre_session_view_layout.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:verizon="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id="@+id/preSessionLayout">
<TextView
    android:id="@id/verizon_sd_caption"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_toLeftOf="@id/verizon_sd_empty_view"
    android:layout_toRightOf="@id/verizon_sd_icon"
    android:gravity="center|center_horizontal"
    android:paddingLeft="5dp"
    android:paddingRight="10dp"
    android:textColor="@android:color/white"
    android:textSize="18sp"></TextView>

<demo.notification.verizon.com.notificationdemo.ResizableImageView
    android:id="@id/verizon_sd_icon"
    android:layout_width="36dp"
    android:layout_height="34dp"
    android:paddingLeft="6dp"
    android:paddingRight="6dp"
    android:paddingTop="6dp"
    android:paddingBottom="6dp"
    android:layout_alignParentLeft="true"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:scaleType="centerInside" />
<!--android:src="@drawable/_fw_prenotify"  -->
<ImageView
    android:id="@id/verizon_sd_empty_view"
    android:layout_width="1dp"
    android:layout_height="match_parent"
    android:layout_alignParentRight="true"
    android:layout_centerVertical="true"
    android:visibility="invisible"
    />

</RelativeLayout>

The design of the overlay:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="240dp"
android:layout_height="110dp"
android:orientation="vertical"
android:id="@+id/overlayLayout">
<ImageView
    android:id="@+id/imageView1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:src="@drawable/notification_bg_green"/>
</RelativeLayout>

PressionView.java: ( Java file for showing the normal and pop up notification)

I am only giving the code snippet for showing the pop up as an overlay.This function gets called when the user clicks on the bee icon.

private void showOverLay(){

    final ConfirmBox dialog = new ConfirmBox(this.bannerThumb);
    LayoutInflater inflater = LayoutInflater.from(ctx);
    dialog.onCreateView(inflater,this.relLayout,null);

}

Finally the custom Dialogue is as follows:

public class ConfirmBox extends DialogFragment {
private View source;

public ConfirmBox() {
}

public ConfirmBox(View source) {
    this.source = source;
}

public static ConfirmBox newInstance(View source) {
    return new ConfirmBox(source);
}

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    setStyle(STYLE_NO_FRAME, R.style.AppTheme);
}


@Override
public void onStart() {
    super.onStart();

    // Less dimmed background; see http://stackoverflow.com/q/13822842/56285
    Window window = getDialog().getWindow();
    WindowManager.LayoutParams params = window.getAttributes();
    params.dimAmount = 0.2f; // dim only a little bit
    window.setAttributes(params);

    // Transparent background; see http://stackoverflow.com/q/15007272/56285
    // (Needed to make dialog's alpha shadow look good)
    window.setBackgroundDrawableResource(android.R.color.transparent);
}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
    // Put your dialog layout in R.layout.view_confirm_box
    View view = inflater.inflate(R.layout.overlay_view, container, false);

    // Initialise what you need; set e.g. button texts and listeners, etc.

    // ...

    setDialogPosition();

    return view;
}

/**
 * Try to position this dialog next to "source" view
 */
private void setDialogPosition() {
    if (source == null) {
        return; // Leave the dialog in default position
    }

    // Find out location of source component on screen
    // see http://stackoverflow.com/a/6798093/56285
    int[] location = new int[2];
    source.getLocationOnScreen(location);
    int sourceX = location[0];
    int sourceY = location[1];

    Window window = getDialog().getWindow();

    // set "origin" to top left corner
    window.setGravity(Gravity.TOP| Gravity.LEFT);

    WindowManager.LayoutParams params = window.getAttributes();

    // Just an example; edit to suit your needs.
    params.x = sourceX - dpToPx(110); // about half of confirm button size left of source view
    params.y = sourceY - dpToPx(80); // above source view

    window.setAttributes(params);
}

public int dpToPx(float valueInDp) {
    DisplayMetrics metrics = getActivity().getResources().getDisplayMetrics();
    return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, valueInDp, metrics);
}
}

I can show the normal notification. But for the pop up , the approach which I have taken,I get a null pointer exception in the showOverLay() method.

More specifically on the line:

Window window = getDialog().getWindow();

within the getDialoguePosition() of the custom Dialogueclass.

Can someone kindly help me on this? If reqd I can share the full code for the PresessionView.java file as well.

I think I am making some mistake in calling the custom Dialogue class.

Thanks.

Answer 1

You show the dialog fragment incorrect. Please use dialog.show(...). Also please ensure that you're bannerThumb, ctx, and relLayout are not null.

private void showOverLay(){
    final ConfirmBox dialog = new ConfirmBox(this.bannerThumb); 
    LayoutInflater inflater = LayoutInflater.from(ctx); //Ensure ctx is not NULL
    dialog.show(getSupportFragmentManager(), "yourtitle");
}