In-App Messages

The Accengage SDK provides you with notifications display without any additional code to write in order to support them.

There are five different kinds of In-App notifications:

  • Text: an In-App notification that appears as a view with a height of 50 containing a title and a text body.
  • WebView: an In-App notification that appears as a view with a height of 50. It contains a webView that displays the content of a URL.
  • Text Interstitial: appears in full screen and contains a title and a text body.
  • WebView Interstitial: it appears in full screen and contains a webView that displays the content of a URL which is clickable.
  • WebView Interstitial with NavBar: appears in full screen and contains a webView that displays the website target of a URL. It also displays a navigation bar and can be browsed.
  • Popup: appears on the screen and interrupts the user. It can also contains two buttons to lead to different events.

Below you can find examples of these types of In-App messages, and their layout (used for customization, see the next part for more details)

Banner

Interstitial

Popup

Basic display

In-App actions are actions the SDK executes after clicking on the In-App message. They must be chosen via Accengage dashboard on the page editing an In-App message. 

Besides 6 default actions:

  • Browser
  • Click-to-mail
  • Click-to-call
  • Click-to-Play Store
  • Click-to-SMS
  • URL-scheme (deep linking)

there are also Webview and Text actions opening the content (web page of the selected URL or message text) on the specified templates - Landing Pages. The default Landing page layouts for Text and Webview are listed below:

They contain:

  • A fake ActionBar with 2 ImageViews (logo and back), a TextView (title) and a button (close)
  • A TextView for the Landing Page body
  • A WebView for the Landing Page URL
  • A button Bar with a ProgressBar, a ToggleButton (reload) and 3 buttons (browse, back, forward)

Display and Click parameters

In Advanced Options for In-App message on the dashboard you may add display and click parameters. Visit the section  Retrieving Message Parameters  to get to know how to obtain these parameters in the application.

Custom Landing Page

If you need to modify the default templates you can add your own Landing page layouts to In-App templates on the Settings Page. After adding a new Landing Page template, the new action will be available on the page editing an In-App message.

Webview Landing Page

Text Landing Page

Close In-App from In-App's content

You can close the In-App with a specific URL inside the In-App. In your HTML content, add the  bma4sclose  key in the closing URL, for example:

http://www.google.com?bma4sclose=true

Advanced display customization

Notification display customization

In order to match the Google guidelines for Android, we advise you to customize the behavior and appearance of the pop-up notifications.

Please see Customizing Pop-up.

If you want to position this banner at a custom position, you simply have to include the layout com_ad4screen_sdk_banner where you want the banner to be displayed in your layout

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
   android:orientation="vertical" >

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />
     <!-- Display all banners template -->
    <include layout="@layout/com_ad4screen_sdk_banner" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Button" />

</LinearLayout>

Custom Banner Position

Text or Webview banner

By default, banners are created on the bottom or your activity layouts. If you want to customize a position of the banner, you need to include  com_ad4screen_sdk_banner into your layout. The com_ad4screen_sdk_banner is a FrameLayout inside which your banner will be inflated. Below there is an example of activity template containing com_ad4screen_sdk_banner :

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.accengage.samples.inappmultiaction.MainActivity">

    <Button
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:id="@+id/button1"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">

        <!-- Display all banners template -->
        <include layout="@layout/com_ad4screen_sdk_banner" />

    </LinearLayout>

    <Button
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/button1"
        android:layout_alignEnd="@+id/button1"
        android:layout_marginBottom="70dp"
        android:id="@+id/button2"/>

</RelativeLayout>

Multiple banners

You can also display several banners of different types (webview and text) on the same layout in different places. For this, instead of including layout com_ad4screen_sdk_banner you will need to add empty layouts with banner template IDs you would like to use. For instance, in order to show two text banners and two webview banners, your activity layout may look something like this:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.accengage.samples.inappmultiaction.MainActivity">

    <Button
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:id="@+id/button1"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">

        <FrameLayout
            android:id="@layout/com_ad4screen_sdk_template_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <FrameLayout
            android:id="@layout/com_ad4screen_sdk_template_banner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <FrameLayout
            android:id="@layout/com_ad4screen_sdk_template_text"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

        <FrameLayout
            android:id="@layout/com_ad4screen_sdk_template_banner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <Button
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/button1"
        android:layout_alignEnd="@+id/button1"
        android:layout_marginBottom="70dp"
        android:id="@+id/button2"/>

</RelativeLayout>

Custom In-App Templates

If you want to use your own template, you have to add it in the Accengage dashboard and create a new xml layout with the same name as the value you specified. To display in-app content (message, close button and webiew) your custom templates should contain such views:

View ID Type Description

com_ad4screen_sdk_webview

A4SWebView

Banner web view

com_ad4screen_sdk_body

TextView Banner text view

com_ad4screen_sdk_closebutton

Button Close button

Custom Webview Banner

my_banner.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="160dp">

    <com.ad4screen.sdk.A4SWebView
        android:id="@+id/com_ad4screen_sdk_webview"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layerType="software" />

    <Button
        android:id="@+id/com_ad4screen_sdk_closebutton"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="top|left"
        android:layout_marginRight="2dp"
        android:layout_marginTop="2dp"
        android:background="@android:drawable/ic_delete" />

</FrameLayout>

Adding a custom webview banner template

Selecting the custom template

Custom Text Banner

Custom text banner layout:

mytextbanner.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="80dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@android:color/holo_blue_dark">

        <TextView
            android:id="@+id/com_ad4screen_sdk_body"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:visibility="gone"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:textColor="@android:color/holo_orange_light"
            android:text="Test"/>
    </LinearLayout>

    <Button
        android:id="@+id/com_ad4screen_sdk_closebutton"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="top|right"
        android:layout_marginRight="2dp"
        android:layout_marginTop="2dp"
        android:background="@android:drawable/btn_star" />

</FrameLayout>

Adding a custom text banner template

Selecting the custom template

Customizing a position of custom banners

If you want to customize a position of your custom banner you may use:

  • either com_ad4screen_sdk_banner
  • or directly FrameLayout with desired template ID

as described in the previous section. Below there is an example of the activity layout containing the custom text banner my_text_banner by using FrameLayout:

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.accengage.samples.inappmultiaction.MainActivity">
    <Button
        android:text="Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:id="@+id/button1"/>

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true">

        <FrameLayout
            android:id="@layout/my_text_banner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </LinearLayout>

    <Button
        android:text="Button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignRight="@+id/button1"
        android:layout_alignEnd="@+id/button1"
        android:layout_marginBottom="70dp"
        android:id="@+id/button2"/>

</RelativeLayout>

Custom Interstitials

Like banners, interstitials can also be customized. To do this you need to:

  1. Create your own layout based either on default text interstitial or on default webview interstitial
  2. Add it's name to the Settings page of Accengage dashboard
  3. Select corresponding template on the page editing your In-App message (message format)
1. Create a custom interstitial template

To display in-app content (message, close button and webiew) your custom templates should contain such views:

View ID
Type
Description

com_ad4screen_sdk_webview

A4SWebView

Banner web view

com_ad4screen_sdk_body

TextView Banner text view

com_ad4screen_sdk_closebutton

Button Close button

my_intersitial.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:background="@android:color/black" >

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:background="@android:color/holo_blue_dark">

            <TextView
                android:text="Click on the garbage to close the interstitial"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:layout_gravity="center_vertical"
                android:gravity="center"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:id="@+id/textView"/>

            <Button
                android:id="@+id/com_ad4screen_sdk_closebutton"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_gravity="right|center_vertical"
                android:background="@android:drawable/ic_menu_delete"/>

        </LinearLayout>

        <com.ad4screen.sdk.A4SWebView
            android:id="@+id/com_ad4screen_sdk_webview"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/black"
            android:layerType="software"/>

    </LinearLayout>

</FrameLayout>

2. Add a custom template name on the Settings page

According to the type (Webview or text) of your interstitial, create your In-app template on the Settings page with the layout name.

Custom Webview interstitial template

Custom text interstitial template

3. Select corresponding template on the page editing your In-App message

Custom Popups

You can fully customize pop-up messages of In-App and Push notifications. For this, it's necessary to redefine a default theme of A4SPopup activity in AndroidManifest.xml:

<activity
    android:name="com.ad4screen.sdk.A4SPopup"
    android:taskAffinity=""
    android:theme="@style/CustomDialogTheme"
    tools:replace="theme" />

Please note that the “tools:replace” line is required in order to indicate to the ManifestMerger that it must use your theme instead of the library default one’s. The corresponding XML namespace xmlns:tools="http://schemas.android.com/tools" must also be added in AndroidManifest.xml:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="...">

A new theme you would like to create must inherit the pop-up Accengage theme  com_adscreen_sdk_theme_popup :

theme.xml

<style name="CustomDialogTheme" parent="@style/com_ad4screen_sdk_theme_popup">
</style>

The com_adscreen_sdk_theme_popup  theme is based on default android dialog theme. A list of default themes inherited by the com_adscreen_sdk_theme_popup is shown in the table below.

Android version Android parent theme
v4-v10 Theme.Dialog
v11-v13 Theme.Holo.Dialog
v14 - ... Theme.DeviceDefault.Dialog

You can customize a dialog by redefining the properties of default android dialog theme:

<style name="CustomDialog" parent="@style/com_ad4screen_sdk_theme_popup">
    <item name="android:windowTitleStyle">@android:style/TextAppearance.Large</item>
    <item name="android:windowBackground">@drawable/popup_background</item>
    <item name="android:textColor">#000000</item>
    <item name="android:textColorPrimary">#FF0000</item>
    <item name="android:textAppearanceMedium">@android:style/TextAppearance.Medium</item>
</style>

To achieve a possibility to fully customize a pop-up dialog there are additional properties:

Property
Default value
Description

com_ad4screen_sdk_

popup_inapp_title_layout

@null Custom layout for InApp Pop-up title (not specified by default)
com_ad4screen_sdk_popup_notif_title_layout @null Custom layout for Notification Pop-up title (not specified by default)
com_ad4screen_sdk_popup_inapp_layout @layout/com_ad4screen_sdk_popup_inapp Custom layout for InApp Pop-up content (message)
com_ad4screen_sdk_popup_notif_layout @layout/com_ad4screen_sdk_popup_notif Custom layout for Notification Pop-up content (message)

com_ad4screen_sdk_popup_

inapp_buttons_layout

@layout/com_ad4screen_sdk_

popup_inapp_buttons

Custom layout for InApp Pop-up buttons

com_ad4screen_sdk_popup_

notif_buttons_layout

@layout/com_ad4screen_sdk_

popup_notif_buttons

Custom layout for Notification Pop-up buttons

com_ad4screen_sdk_popup_

inapp_primary_button

@style/com_ad4screen_sdk_popup_

inapp_primary_button_style

Custom style for the primary button of InApp Pop-up

com_ad4screen_sdk_popup_

inapp_secondary_button

@style/com_ad4screen_sdk_popup_

inapp_secondary_button_style

Custom style for the secondary button of InApp Pop-up

com_ad4screen_sdk_popup_

inapp_other_button

@style/com_ad4screen_sdk_popup_

inapp_other_button_style

Custom style for other buttons of InApp Pop-up

com_ad4screen_sdk_popup_

notif_primary_button

@style/com_ad4screen_sdk_popup_

inapp_primary_button_style

Custom style for the primary button of Notification Pop-up (Cancel)

com_ad4screen_sdk_popup_notif

_secondary_button

@style/com_ad4screen_sdk_popup_

inapp_secondary_button_style

Custom style for the secondary button of Notification Pop-up (OK)

com_ad4screen_sdk_popup_

notif_other_button

@style/com_ad4screen_sdk_popup_

inapp_other_button_style

Custom style for other buttons of Notification Pop-up (Not used)

Examples

Customizing Popup title (by layout)

  In case if you want to modify the whole title (and not just the title font, text style, etc by redefining  android:windowTitleStyle ) you will need to create a custom layout for the title and specify it in your theme.

my_popup_notif_title.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@id/com_ad4screen_popup_title_container"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:gravity="center_vertical"
    android:paddingStart="24dp"
    android:paddingEnd="24dp"
    android:paddingTop="12dp"
    android:paddingBottom="12dp"
    android:background="#00fff2">

    <ImageView
        android:layout_width="32dip"
        android:layout_height="32dip"
        android:scaleType="fitCenter"
        android:layout_marginEnd="8dip"
        android:src="@drawable/panda"
        android:background="@android:color/transparent"/>

    <TextView android:id="@id/com_ad4screen_popup_title"
        style="?android:attr/windowTitleStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:textColor="#ff2f00"
        android:background="@android:color/transparent"
        />

</LinearLayout>

themes.xml

<style name="CustomDialogTheme" parent="@style/com_ad4screen_sdk_theme_popup">
    <!--<item name="com_ad4screen_sdk_popup_inapp_title_layout">@layout/my_popup_inapp_title</item>-->
    <item name="com_ad4screen_sdk_popup_notif_title_layout">@layout/my_popup_notif_title</item>
</style>

Customizing Popup content (by layout)

To modify InApp/Push Pop-up content you need to redefine corresponding layouts in your theme:  com_ad4screen_sdk_popup_inapp_layout  /  com_ad4screen_sdk_popup_notif_layout

themes.xml

<style name="CustomDialogTheme" parent="@style/com_ad4screen_sdk_theme_popup">
    <!--<item name="com_ad4screen_sdk_popup_inapp_layout">@layout/popup_inapp_content</item>-->
    <item name="com_ad4screen_sdk_popup_notif_layout">@layout/popup_notif_content</item>
</style>

and add a custom layout:

popup_notif_content.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ScrollView
        android:id="@+id/com_ad4screen_sdk_popup_scrollview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/com_ad4screen_sdk_popup_rootview"
            android:orientation="vertical"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/background">

            <TextView
                android:id="@+id/com_ad4screen_sdk_popup_textview"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:textColor="#1100ff"
                android:textSize="24sp"
                android:background="@android:color/transparent"/>

        </LinearLayout>

    </ScrollView>

</LinearLayout>

Customizing Popup buttons (by styles)

Redefine default button styles by your own ones:  

themes.xml

<style name="CustomDialogTheme" parent="@style/com_ad4screen_sdk_theme_popup">
    ...
    <item name="com_ad4screen_sdk_popup_notif_primary_button">@style/my_popup_notif_primary_button_style</item>
    <item name="com_ad4screen_sdk_popup_notif_secondary_button">@style/my_popup_notif_secondary_button_style</item>
</style>

styles.xml

<style name="my_popup_notif_primary_button_style" parent="com_ad4screen_sdk_popup_notif_primary_button_style">
    <item name="android:background">#9500ff</item>
</style>

<style name="my_popup_notif_secondary_button_style" parent="com_ad4screen_sdk_popup_notif_secondary_button_style">
    <item name="android:background">#ff0099</item>
    <item name="android:textColor">#ffffff</item>
</style>

Customizing Popup buttons (by layout)

This approach is more powerful than previous one. It allows to replace default button layout (with buttons) by custom one. Here is an example:  

themes.xml

<style name="CustomDialogTheme" parent="@style/com_ad4screen_sdk_theme_popup">
    ...
    <!--<item name="com_ad4screen_sdk_popup_inapp_buttons_layout">@layout/popup_inapp_buttons</item>-->
    <item name="com_ad4screen_sdk_popup_notif_buttons_layout">@layout/popup_notif_buttons</item>
</style>

popup_notif_buttons.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@id/com_ad4screen_sdk_popup_buttonbar"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:background="@drawable/popup_background">

    <Button
        android:id="@id/com_ad4screen_sdk_popup_primary_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Non"
        android:textColor="#ffffff"
        android:layout_weight="1.0"
        android:background="#0077ff"
        android:layout_margin="2dp"/>

    <Button
        android:id="@id/com_ad4screen_sdk_popup_secondary_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Oui"
        android:textColor="#ffffff"
        android:layout_weight="1.0"
        android:background="#0077ff"
        android:layout_margin="2dp"/>

    <Button
        android:id="@+id/com_ad4screen_sdk_popup_other_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Other"
        android:layout_weight="1.0"
        android:background="#0077ff"
        android:layout_margin="2dp"/>

</LinearLayout>

Note that custom layouts should contain default views with its original ids to display pop-up properly. The list of default title, content and button layouts is presented below.

Android version Default layouts
v4

com_ad4screen_sdk_popup_inapp.xml

com_ad4screen_sdk_popup_inapp_buttons.xml

com_ad4screen_sdk_popup_notif.xml

com_ad4screen_sdk_popup_notif_buttons.xml

com_ad4screen_sdk_popup_title.xml

v11

com_ad4screen_sdk_popup_inapp.xml

com_ad4screen_sdk_popup_inapp_buttons.xml

com_ad4screen_sdk_popup_notif.xml

com_ad4screen_sdk_popup_notif_buttons.xml

v16 com_ad4screen_sdk_popup_title.xml
v21 com_ad4screen_sdk_popup_title.xml
v22 com_ad4screen_sdk_popup_title.xml

Customizing In-App At Runtime

To customize an In-App message (Banner or Interstitial) at runtime, you need to register a callback by setInAppInflatedCallback method. When the SDK adds an In-App message to a parent view the registered callback will be called. At this moment, in the callback, you can obtain the parent view containing an in-app template (either predefined or  custom ) and modify it to your needs. 

The following example demonstrates how to add two additional buttons at runtime.

A4S.get(this).setInAppInflatedCallback(new A4S.Callback<InApp>() {
    @Override
    public void onResult(InApp inapp) {
        mInApp = inapp;
        FrameLayout layout = inapp.getLayout();

        WebView webview = (WebView) layout.findViewById(R.id.com_ad4screen_sdk_webview);
        if (webview != null) {
            ...
        }

        RelativeLayout rl = new RelativeLayout(CustomInAppActivity.this);
        RelativeLayout.LayoutParams layoutParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        layoutParams.addRule(RelativeLayout.ALIGN_PARENT_TOP);
        layout.addView(rl);

        Button button1 = new Button(CustomInAppActivity.this);
        button1.setId(1);
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.MATCH_PARENT);
        params.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        button1.setLayoutParams(params);
        rl.addView(button1);

        Button button2 = new Button(CustomInAppActivity.this);
        button2.setId(2);
        params = new RelativeLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.MATCH_PARENT);
        params.addRule(RelativeLayout.RIGHT_OF, button1.getId());
        button2.setLayoutParams(params);
        rl.addView(button2);
    }
    ...
}

In this callback you can also obtain display parameters.

In-App Actions

In-App actions are actions the SDK executes after clicking on the In-App message. They must be chosen via Accengage dashboard on the page editing an In-App message.

Besides 6 default actions:

  • Browser
  • Click-to-mail
  • Click-to-call
  • Click-to-Play Store
  • Click-to-SMS
  • URL-scheme (deep linking)

there are also Webview and Text actions opening the content (web page of the selected URL or message text) on the specified templates - Landing Pages. The default Landing page layouts for Text and Webview are listed below:

They contain:

  • A fake ActionBar with 2 ImageViews (logo and back), a TextView (title) and a button (close)
  • A TextView for the Landing Page body
  • A WebView for the Landing Page URL
  • A button Bar with a ProgressBar, a ToggleButton (reload) and 3 buttons (browse, back, forward)

Here are the views' Ids:

  • com_ad4screen_sdk_logo
  • com_ad4screen_sdk_closebutton
  • com_ad4screen_sdk_backbutton
  • com_ad4screen_sdk_forwardbutton
  • com_ad4screen_sdk_title
  • com_ad4screen_sdk_body
  • com_ad4screen_sdk_webview
  • com_ad4screen_sdk_progress
  • com_ad4screen_sdk_reloadbutton
  • com_ad4screen_sdk_browsebutton

Display and Click parameters

In Advanced Options for In-App message on the dashboard you may add display and click parameters. Visit the section  Retrieving Message Parameters  to get to know how to obtain these parameters in the application.

Custom Landing Page

If you need to modify the default templates you can add your own Landing page layouts to In-App templates on the Settings Page. After adding a new Landing Page template, the new action will be available on the page editing an In-App message.

Webview Landing Page

Text Landing Page

Close In-App from In-App's content

You can close the In-App with a specific URL inside the In-App. In your HTML content, add the  bma4sclose  key in the closing URL, for example:

http://www.google.com?bma4sclose=true

Sample

A sample is available on Github : https://github.com/Accengage/accengage-android-sdk-samples/blob/master/AccSample/app/src/main/res/layout/mytemplatelanding.xml

In-App Lifecycle

Your application can be notified when In-App messages change its states. The following diagram shows the states of In-App message (only Banners and Interstitials).

To receive callbacks about state changes there are 5 corresponding methods:

Method Description

setInAppReadyCallback

In-App message is ready for display
setInAppInflatedCallback In-App view hierarchy is inflated and added to the parent layout (for more details, see Customising In-App TODO)
setInAppDisplayedCallback In-App is currently displayed

setInAppClickedCallback

In-App has been clicked
setInAppClosedCallback In-App is closed and not displayed anymore

Ready state

If you need to receive events about the ready state of In-App message you should register a callback by the method setInAppReadyCallback. It might be useful, for example, to obtain additional information about the In-App which will be displayed, like message ID, template, custom parameters, etc.

A4S.get(mContext).setInAppReadyCallback(false, new Callback<InApp>() {
            @Override
            public void onResult(final InApp result) {
                //In-App id
                String id = result.getId();
                //In-App template resource id
                int template = result.getTemplate();
                //In-App custom parameters
                HashMap<String,String> customParameters = result.getCustomParameters();

                //Show views, hide views, do transitions..
            }
            @Override
            public void onError(int error, String errorMessage) {
                //Nothing
            }
        });

Also setInAppReadyCallback can be used in conjunction with displayInApp to control a moment when a ready In-App message should be displayed. For this, you need to use true for the first parameter manuallyAllowDisplay of setInAppReadyCallback and then call displayInApp at the moment you want to display the In-App message.

A4S.get(mContext).setInAppReadyCallback(true, new Callback<InApp>() {
            @Override
            public void onResult(InApp inApp) {
                mInApp = inApp;
                Log.d(TAG, "Ready msg: " + inApp.getId());
            }
            @Override
            public void onError(int error, String errorMessage) {
                //Nothing
            }
        });

Button button = (Button) findViewById(R.id.button1);
button.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Toast.makeText(MainActivity.this, "OK for display", Toast.LENGTH_SHORT).show();
        A4S.get(MainActivity.this).displayInApp(mInApp.getId());
    }
});

Inflated state

Registering a callback for inflated state could be useful:

Prevent In-App display

If you don't want to display any inapp message temporarily, you can use:

 A4S.get(mContext).setInAppDisplayLocked(true);

This function allows you to enable or disable any In-App notification display. By default, its value is false which means that InApp display is enabled.

Once Inapp is locked, no In-App visual element will be displayed until unlocked. Please use this function with care!

Templates filter

For all callbacks, you can pass templates of In-App messages in the setInApp*Callback() methods for which you need to listen state changes. For instance, if you want to be notified that an In-App message is closed for In-Apps using  comad4screensdktemplatebannerfullscreen   (Intersitial Banner) or  <a href="http://docs.accengage.com/javadoc/3.6.0/res-rawhtml/layout/comad4screensdktemplatebannerfullscreennobuttons.html" class="external-link">comad4screensdktemplatebannerfullscreen_nobuttons  ( Intersitial Banner without the close button ) templates you need to pass these templates as arguments of the corresponding setInApp*Callback() method:

A4S.get(mContext).setInAppClosedCallback(new Callback<InApp>() {
            @Override
            public void onResult(InApp result) {
                Toast.makeText(getApplicationContext(), "Closed inapp "
                        + result.getId() , Toast.LENGTH_SHORT).show();
            }
            @Override
            public void onError(int error, String errorMessage) {
                //Nothing
            }
        }, R.layout.com_ad4screen_sdk_template_banner_fullscreen, R.layout.com_ad4screen_sdk_template_banner_fullscreen_nobuttons);

In-App Force Update

The SDK updates In-App messages from the server at the beginning of new session.

In case you need to force the In-App message update you can do it by updating a custom field of the Device Information by random value. Note that the custom field must be created before via Accengage dashboard.

void refreshInApps() {
    Random random = new Random();
    Bundle bundle = new Bundle();
    bundle.putString("Userpref", "Ok" + random.nextInt());
    A4S.get(getContext()).updateDeviceInfo(bundle);
}

In-App Tracking Zones

To track clicks from several zones (buttons, layouts, views, etc) of the In-App message (only Banners and Interstitials),  InApp  class provides three methods:  setClickZone handleClick  and  dismiss . The first method sets the name of the zone and two others handle clicks by closing the in-app and sends a tracking information to the server. There is only one difference between handleClick and dismiss. The  handleClick  sends a track information about a click event and  dismiss  sends it about a close event. For both methods setting a name of the zone is optional. If you don't need to track different zones, you can call  handleClick / dismiss  without  setClickZone . In this case the tracking information won't contain the name of the zone and the server wont be able to distinguish clicks/closes from different zones.

Setting tracking zones

Tracking zones must be set on the Inflated state of In-App message, when In-App view hierarchy is already created but not yet shown on the screen. For this, you need to register a callback by the method setInAppInflatedCallback . In the callback, add your click/touch listeners on each view you want to track. Then in your click listeners, set the name of your tracking zone by setClickZone method and call handleClick/dismiss in order for the SDK to process the click and send a tracking information to the server.

For more details, see the example below adding 4 tracking zones for different views and opening a web page in a Browser by clicking on the "Zone1". An URL of the page is passed in the custom parameters.

A4S.get(this).setInAppInflatedCallback(new A4S.Callback<InApp>() {
    @Override
    public void onResult(InApp inapp) {
        Log.d(TAG, "InAppInflatedCallback");
        mInApp = inapp;
        HashMap<String, String> params = mInApp.getCustomParameters();

        android.util.Log.d(TAG, "Custom display parameters: " + params);
        if (params.containsKey("action_url")) {
            mActionUrl = params.get("action_url");
        }


        FrameLayout layout = inapp.getLayout();
        WebView webview = (WebView) layout.findViewById(R.id.com_ad4screen_sdk_webview);
        if (webview != null) {
            webview.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    com.ad4screen.sdk.Log.debug("motion=" + event.getAction());
                    if (event.getAction() == MotionEvent.ACTION_DOWN) {
                        Toast.makeText(MainActivity.this, "Zone#WebView, track CLICK", Toast.LENGTH_SHORT).show();
                        mInApp.setClickZone("Zone#WebView");
                        mInApp.handleClick();
                    }
                    return false;
                }
            });
        }

        Button buttonInform = (Button) layout.findViewById(R.id.btn_inform);
        if (buttonInform != null) {
            buttonInform.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    // If the action url is not null, open it in a browser
                    if (mActionUrl != null) {
                        Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(mActionUrl));
                        startActivity(browserIntent);
                    }
                    // Set tracking zone for tracking and close inapp
                    Toast.makeText(MainActivity.this, "Zone1, track CLICK", Toast.LENGTH_SHORT).show();
                    mInApp.setClickZone("Zone1");
                    mInApp.handleClick();
                }
            });
        }

        Button buttonLater = (Button) layout.findViewById(R.id.btn_later);
        if (buttonLater != null) {
            buttonLater.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "Zone2, track CLICK", Toast.LENGTH_SHORT).show();
                    mInApp.setClickZone("Zone2");
                    mInApp.handleClick();
                }
            });
        }

        ImageView iv = (ImageView) layout.findViewById(R.id.iv_close);
        if (iv != null) {
            iv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "Zone#Close, track CLOSE", Toast.LENGTH_SHORT).show();
                    mInApp.setClickZone("Zone#Close");
                    mInApp.dismiss();
                }
            });
        }

        LinearLayout layoutBanner = (LinearLayout) layout.findViewById(R.id.ll_banner);
        if (layoutBanner != null) {
            layoutBanner.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    Toast.makeText(MainActivity.this, "The zone is not used", Toast.LENGTH_SHORT).show();
                }
            });
        }
    }

    @Override
    public void onError(int i, String s) {

    }
});

  

The example is available on github:  InAppMultiAction .

Handling actions

Update Device Info using In-App

There are two ways to update Device Information using In-App messages:

  • by In-App action
  • by In-App content

Update Device Information by In-App action

By executing an In-App action (WebView or URL Scheme) you can also update the device profile (Device Information) at the same time. For this, you need to add your key/value parameters packed in URL encoded JSON format as bma4sudi GET parameter to your URL.

For example, if you want to update values of two fields 'First Name' and 'Gender' of the server database on Kevin and Male correspondingly

 

 

you need to:

  1. create a JSON with 2 key/value pairs, where the key is the field name in DB

    {"firstname":"Kevin","gender":"Male"}
  2. apply URL encoding for the JSON

    %7B%22firstname%22%3A%22Kevin%22%2C%22gender%22%3A%22Male%22%7D
  3. add the output as bma4sudi GET parameter to your http or custom URL scheme link

    • HTTP link

      https://www.google.com?bma4sudi=%7B%22firstname%22%3A%22Kevin%22%2C%22gender%22%3A%22Male%22%7D

    • Deeplink

      myapp://?bma4sudi=%7B%22firstname%22%3A%22Kevin%22%2C%22gender%22%3A%22Male%22%7D

 

Then after clicking on your In-App message while opening a web page or doing a deeplink redirection, your server DB fields will be updated for new values.

Update Device Information by In-App content

By displaying an In-App content on a webview of banners or interstitials you can update the Device Information. As in the previous section, you need to add your key/value parameters packed in URL encoded JSON format as bma4sudi GET parameter to your URL.

 

Prevent In-App message display

If you don't want to display any In-App message temporarily, you can use:

A4S.get(mContext).setInAppDisplayLocked(true);

This function allows you to enable or disable any In-App notification display. By default, its value is false which means that InApp display is enabled.