Dismiss in-app message when clicking outside

[NguyenCongTam1807]

What feature would you like to see?

Dismiss in-app message when clicking outside of it

How would you use it?

As stated in the title & answer above

[google-oss-bot]

I couldn't figure out how to label this issue, so I've labeled it for a human to triage. Hang tight.

[argzdev]

Thanks for filing this request, @NguyenCongTam1807.

From what I've noticed, it looks like currently, only messages with layouts using Card can dismiss in-app message when clicking outside. And this seems intended since Card layouts don't have a close button in comparison to Modal and Image layouts.

That said, I'm guessing you want this feature to be available for message layout type Modal and Image?

Alternatively, if you'd like, you can customize your Firebase In-App Messaging messages. This will allow you to modify the messages behavior.

[NguyenCongTam1807]

@argzdev Thank you for your reply.
Yes, I want the modal and image messages can also be dismissed when I click outside them.

So it's possible to do that if I customize the Firebase In-App Messaging messages using the FirebaseInAppMessagingDisplay class? I'll take a look as soon as I can.

[argzdev]

Awesome, thanks for confirming. Yes it's possible, but it will require quite a bit of work.

[saketkumar]

@argzdev Is it possible that I can work on this feature request? 🙂

[NguyenCongTam1807]

Thanks @saketkumar for reviving this topic, it's been 11 days and I temporarily stopped looking for workarounds on this feature. I tried reading the documentation about the FirebaseInAppMessagingDisplay and relevant classes on how to enable the dismissal of in-app messages when clicking outside but I think the foremost feature in this case that has to be available first is the ability to close it programmatically, which is not at this time (see the issue here: #3458). So I gave up the desire to apply such functionality.
But that's just my case, if anyone knows how to do it, using argzdev's instructions or not, please give us a hint.

[argzdev]

Hi @saketkumar, thank you for your interest in working on this. We always welcome developers creating pull requests in our repository and I do think this is a good feature to have as well.

However, just to set some expectations, this feature is tracked internally at b/256659864. I'm not sure if there have been prior discussions related to any specifics. That said, if you do wish to push through working on this feature, I'll gladly notify our engineers about this. Although, I won't be able to guarantee if they will be pushing through this feature request, or if they have other plans.

[Ethan1983]

@argzdev @NguyenCongTam1807 Isn't this already implemented in FirebaseInAppMessagingDisplay for non-banner layouts?

if (!bindingWrapper.getConfig().backgroundEnabled()) {
      bindingWrapper.getRootView().setOnTouchListener(new View.OnTouchListener() {
        @Override
        public boolean onTouch(View v, MotionEvent event) {
          if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {
            if (callbacks != null) {
              callbacks.messageDismissed(InAppMessagingDismissType.UNKNOWN_DISMISS_TYPE);
            }
            dismissFiam(activity);
            return true;
          }
          return false;
        }
      });
    }

backgroundEnabled is set only for banner layout along with auto dismiss in InflaterConfigModule. Other layouts end up with a touch listener for outside clicks/taps.

  @Provides
  @IntoMap
  @StringKey(LayoutConfigKey.BANNER_PORTRAIT)
  public InAppMessageLayoutConfig providesBannerPortraitLayoutConfig(DisplayMetrics displayMetrics) {
    return InAppMessageLayoutConfig.builder()
        .setMaxImageHeightWeight(0.3f)
        .setMaxImageWidthWeight(0.3f)
        .setMaxDialogHeightPx((int) (0.5f * displayMetrics.heightPixels))
        .setMaxDialogWidthPx((int) (0.9f * displayMetrics.widthPixels))
        .setViewWindowGravity(Gravity.TOP)
        .setWindowFlag(ENABLED_BG_FLAG)
        .setWindowWidth(ViewGroup.LayoutParams.MATCH_PARENT)
        .setWindowHeight(ViewGroup.LayoutParams.WRAP_CONTENT)
        .setBackgroundEnabled(true)
        .setAnimate(true)
        .setAutoDismiss(true)
        .build();
  }

  // visible for testing
  @Provides
  @IntoMap
  @StringKey(LayoutConfigKey.BANNER_LANDSCAPE)
  public InAppMessageLayoutConfig providesBannerLandscapeLayoutConfig(DisplayMetrics displayMetrics) {
    return InAppMessageLayoutConfig.builder()
        .setMaxImageHeightWeight(0.3f)
        .setMaxImageWidthWeight(0.3f)
        .setMaxDialogHeightPx((int) (0.5f * displayMetrics.heightPixels))
        .setMaxDialogWidthPx((int) (0.9f * displayMetrics.widthPixels))
        .setViewWindowGravity(Gravity.TOP)
        .setWindowFlag(ENABLED_BG_FLAG)
        .setWindowWidth(ViewGroup.LayoutParams.MATCH_PARENT)
        .setWindowHeight(ViewGroup.LayoutParams.WRAP_CONTENT)
        .setBackgroundEnabled(true)
        .setAnimate(true)
        .setAutoDismiss(true)
        .build();
  }