the way i did this was by writing a plugin that shows a custom dialog without border, background shadow, etc.
my execute() method looks like this:
@Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
if (resources == null)
resources = cordova.getActivity().getApplication().getResources();
if (package_name == null)
package_name = cordova.getActivity().getApplication().getPackageName();
if (inflator == null) {
inflator = cordova.getActivity().getLayoutInflater();
}
if (action.equals("show")) {
this.show(args, callbackContext);
return true;
}
return false; // Returning false results in a "MethodNotFound" error.
}
and the show() method contains something like this:
[...]
Runnable runnable = new Runnable() {
public void run() {
pinpad = new Dialog(cordova.getActivity());
pinpad.requestWindowFeature(Window.FEATURE_NO_TITLE);
Window window = pinpad.getWindow();
window.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
window.clearFlags(WindowManager.LayoutParams.FLAG_DIM_BEHIND);
WindowManager.LayoutParams wlp = window.getAttributes();
wlp.gravity = Gravity.BOTTOM;
window.setAttributes(wlp);
pinpad.setCancelable(false);
pinpad.setContentView(view);
pinpad.getWindow().setLayout(ViewGroup.LayoutParams.MATCH_PARENT, (int) height);
pinpad.show();
}
};
this.cordova.getActivity().runOnUiThread(runnable);
[...]
if your window (the red part) has to be placed in some particular position (not in the center or at the bottom of the screen) then you have to pass coordinates from javascript to native plugin.