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

rosu alin · Answer 1 · 2019-08-29T10:19:26.510

0

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

edited Aug 29 '19 at 10:19

answered Aug 29 '19 at 09:35

rosu alin

5,674
11
69
150

Did you test this? Looking at the source, it seems it's set up to work in only an `Activity`, as it explicitly adds itself to an `Activity`'s `DecorView`. – Mike M. Aug 29 '19 at 09:37
I've used the Custom Alert Dialog. If you look at the code I made a type of my Alert but still, it has the same problem. @MikeM. – Aug 29 '19 at 09:47
@Mohammad Yeah, that library, as is, will only work with an `Activity`. If you want to modify the source, you might be able to get it to work with a `Dialog`, depending on exactly what effect you're wanting. You might also be able to find another library that already works with `Dialog`s. – Mike M. Aug 29 '19 at 09:49
I've used almost all of the ShowCases but they all have the same problem.@MikeM. – Aug 29 '19 at 09:55
@MikeM. you are right, it does appear on the Activity, cause it's linked to the decor. Sorry, with converting to kotlin and working on my own stuff, took a while to test – rosu alin Aug 29 '19 at 09:57
@Mohammad I edited my response, I am trying it now on my part, and will let you know if I manage something. – rosu alin Aug 29 '19 at 10:02
@Mohammad sorry mate, I tried, it does appear on the Dialog and not the main view, but it appears behind, not on top. Which is weird. If You want to try more, maybe you manage, I will put my code of the modified GuideView in a edit – rosu alin Aug 29 '19 at 10:17
**GuideMessageView** Class is not Exist.Does the library need it?@MikeM. – Aug 29 '19 at 10:57
Well, I got it to work in the `Dialog`, but as soon as I did, I realized that it's probably not what @Mohammad wants, since the effect appears strictly within the `Dialog`'s bounds. I'd imagine they want a fullscreen overlay, on top of the `Dialog`. If that's the case, it'd probably be easier to create an `Activity` that mimics a `Dialog` – e.g., with the `View` centered in a transparent background – and just using the library, as is, in that `Activity`. – Mike M. Aug 29 '19 at 11:01
@MikeM. I also copied inside my project the "GuideMessageView" class to make it work. (to be visible to the MyGuideView. And yes, I agree with you, If he wants it to appear outside the bounds of the view, I would rather use a view in the activity, that acts as a dialog, and put a shadow in it's background – rosu alin Aug 29 '19 at 11:06
The modified code at **https://pastebin.com/LkES1Vih** has a class **GuideMessageView** which doesn't exist, does it need a library?@rosualin – Aug 29 '19 at 11:08
create a class with that name in your project, where you created the MyGuideView and add this: https://github.com/mreram/ShowCaseView/blob/master/showcaseviewlib/src/main/java/smartdevelop/ir/eram/showcaseviewlib/GuideMessageView.java The class from the library is private, so it cannot be accessed from a your package, adding it like this, works – rosu alin Aug 29 '19 at 11:12

How to display ShowCase on Alert Dialog (Android)

1 Answers1