How to display ShowCase on Alert Dialog (Android)

Question

I've used the library com.github.mreram: showcaseview: 1.1 .

When I want to show the showcase on the alert, it shows the showcase behind the alert.

I've used almost all of the ShowCases but they all have the same problem.

private GuideView ShowCaseView;
private GuideView.Builder ShowCaseBuilder;
private Alert Alert;

@oClick(R.id.bTest)
public void onClick() {
    Alert = new Alert(this);
    Alert.ShowAlert();

    ImageView imgCancel = ButterKnife.findById(Alert, R.id.imgAlertTitle);

    ShowCaseBuilder = new GuideView.Builder(this)
                            .setTitle("Test")
                            .setContentText("Test")
                            .setTargetView(imgCancel)
                            .setContentTypeFace(AppController.Iran)
                            .setTitleTypeFace(AppController.IranBold)
                            .setDismissType(DismissType.anywhere)
                            .setGuideListener(new GuideListener() {
                                @Override
                                public void onDismiss(View view) {
                                    return;
                                }
                            });

      ShowCaseView = ShowCaseBuilder.build();
      if (!ShowCaseView.isShowing())
           ShowCaseView.show();
}

The result looks like this enter image description here

Answer 1

You need to first create your own custom Dialor Alert. And then include the showcase code inside it. Example of how to make a CustomDialogAlert:

https://abhiandroid.com/ui/custom-alert-dialog-example-android-studio.html

How to create a Custom Dialog box in android?

Or try making a class like:

 public class ViewDialog {

    public void showDialog(Activity activity, String msg){
        final Dialog dialog = new Dialog(activity);
        dialog.requestWindowFeature(Window.FEATURE_NO_TITLE);
        dialog.setCancelable(false);
        dialog.setContentView(R.layout.custom_dialogbox_otp);
        dialog.getWindow().setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

        TextView text = (TextView) dialog.findViewById(R.id.txt_file_path);
        text.setText(msg);

        Button dialogBtn_cancel = (Button) dialog.findViewById(R.id.btn_cancel);
        dialogBtn_cancel.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.dismiss();
            }
        });

        Button dialogBtn_okay = (Button) dialog.findViewById(R.id.btn_okay);
        dialogBtn_okay.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                dialog.cancel();
            }
        });
        ShowCaseBuilder = new GuideView.Builder(this)
                        .setTitle("Test")
                        .setContentText("Test")
                        .setTargetView(imgCancel)
                        .setContentTypeFace(AppController.Iran)
                        .setTitleTypeFace(AppController.IranBold)
                        .setDismissType(DismissType.anywhere)
                        .setGuideListener(new GuideListener() {
                            @Override
                            public void onDismiss(View view) {
                                return;
                            }
                        });

        MyShowCaseView = ShowCaseBuilder.build();
        if (!ShowCaseView.isShowing())
            ShowCaseView.show();
             dialog.show();
        }
  }

Also, because of the issue pointed out by @MikeM, You need to create a class, that extends GuideView and override the show so that in the show() it adds the view in the proper place

public void show() {
    this.setLayoutParams(new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT));
    this.setClickable(false);

    ((ViewGroup) ((Activity) getContext()).getWindow().getDecorView()).addView(this);
    AlphaAnimation startAnimation = new AlphaAnimation(0.0f, 1.0f);
    startAnimation.setDuration(APPEARING_ANIMATION_DURATION);
    startAnimation.setFillAfter(true);
    this.startAnimation(startAnimation);
    mIsShowing = true;
}

My full MyGuideView I tried:

https://pastebin.com/LkES1Vih

And I do:

    ShowCaseView = new showCaseBuilder.build()
    ShowCaseView.setLayout(parentView)
    if (!ShowCaseView.isShowing())
        ShowCaseView.show()