Customize Landing Pages for Android

When creating a push notification, in-app message, or Message Center message, you select a Message Action, which defines the user's next destination after interacting with the message.

The Landing Page action opens a rich page that appears until it is closed. Rich pages include HTML, video, etc. See Message Actions: Rich Pages for more information and an example Landing Page image.

A Landing Page defaults to a full screen activity using the system theme. When displaying on a device running Android Honeycomb or higher, the action bar appears with navigation enabled.

Landing Pages are supported out of the box for all customers using iOS or Android SDK 4.0.0 or later.

Customization

Style

The easiest way to customize the appearance of the Landing Page is to provide a custom style.

Example

Create a Landing Page style:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Sample landing page theme that displays the landing page as a modal dialog -->
    <style name="LandingPage">
        <item name="android:windowBackground">@android:drawable/screen_background_dark_transparent</item>
        <item name="android:colorBackgroundCacheHint">@null</item>
        <item name="android:windowIsTranslucent">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:padding">8dp</item>
    </style>

</resources>

Replace the entry in the Urban Airship AndroidManifest.xml by adding tools:node="replace" :

<activity
    tools:node="replace"
    android:name="com.urbanairship.actions.LandingPageActivity"
    android:theme="@style/LandingPage"
    android:exported="false">

    <!-- Required for landing page action -->
    <intent-filter>
        <action android:name="com.urbanairship.actions.SHOW_LANDING_PAGE_INTENT_ACTION"/>
        <data android:scheme="http" />
        <data android:scheme="https" />
        <data android:scheme="message" />
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>

</activity>

Layout

A custom layout can be specified by providing a meta data element com.urbanairship.action.LANDING_PAGE_VIEW with the custom view resource. When supplying a custom view, a UAWebView must be defined with id android.R.id.primary, and an optional progress view with id android.R.id.progress.

An optional close button can be added by providing a button through the layout and setting the button's android:onClick to "onCloseButtonClick".

Example

Create a Landing Page layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                tools:context="com.urbanairship.actions.LandingPageActivity"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

    <FrameLayout
        android:layout_margin="16dp"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">

        <!-- Layout must contain a UAWebView with id @android:id/primary -->
        <com.urbanairship.widget.UAWebView
            android:id="@android:id/primary"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"/>

        <!-- Optional progress view with id @android:id/progress -->
        <ProgressBar
            android:id="@android:id/progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"/>

    </FrameLayout>

    <!-- Optional close button.  "onCloseButtonClick" will finish the
    landing page activity -->
    <ImageButton
        android:id="@+id/close_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:src="@drawable/ic_close"
        android:background="@null"
        tools:ignore="OnClick"
        android:onClick="onCloseButtonClick"/>

</RelativeLayout>

Replace the entry in the Urban Airship AndroidManifest.xml by adding tools:node="replace" :

<activity
    tools:node="replace"
    android:name="com.urbanairship.actions.LandingPageActivity"
    android:exported="false">

    <!-- Added to set the custom layout -->
    <meta-data
        android:name="com.urbanairship.action.LANDING_PAGE_VIEW"
        android:resource="@layout/landing_page"/>

    <!-- Required for landing page action -->
    <intent-filter>
        <action android:name="com.urbanairship.actions.SHOW_LANDING_PAGE_INTENT_ACTION"/>
        <data android:scheme="http" />
        <data android:scheme="https" />
        <data android:scheme="message" />
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>

</activity>

Web View Background Color

Usually a web view's background color defaults to white, but it is sometimes desirable to change it to a different color. The default action activity allows custom colors through a metadata key value pair defined in the manifest.

Note

When setting a color other than the default, take extra precaution to ensure the Landing Page's HTML does not assume the default white background.

Example

Replace the entry in the Urban Airship AndroidManifest.xml by adding tools:node="replace" :

<activity
    tools:node="replace"
    android:name="com.urbanairship.actions.LandingPageActivity"
    android:exported="false">

    <!-- Added to set a custom web view background color -->
    <meta-data
        android:name="com.urbanairship.action.LANDING_PAGE_BACKGROUND_COLOR"
        android:value="@android:color/transparent"/>

    <!-- Required for Landing Page action -->
    <intent-filter>
        <action android:name="com.urbanairship.actions.SHOW_LANDING_PAGE_INTENT_ACTION"/>
        <data android:scheme="http" />
        <data android:scheme="https" />
        <data android:scheme="message" />

        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>

</activity>

Activity

More extensive Landing Page customization can be defined by creating a custom Activity. In the AndroidManifest.xml, define the Landing Page activity with an intent filter with:

action — com.urbanairship.actions.SHOW_LANDING_PAGE_INTENT_ACTION
category — android.intent.category.DEFAULT
data scheme — http, https, and message

The custom activity is responsible for displaying the URL defined in the intent's data field.

Example

Create a new activity:

public class CustomLandingPageActivity extends ActionBarActivity {

    private UAWebView webView;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // Set a landing page layout
        setContentView(R.layout.landing_page);

        final ProgressBar progressBar = (ProgressBar) findViewById(android.R.id.progress);
        webView = (UAWebView) findViewById(android.R.id.primary);

        /**
         * Set the web view client to add Urban Airship URL
         * overriding and ability to perform action JavaScript
         * calls.
         */
        webView.setWebViewClient(new UAWebViewClient() {
            @Override
            public void onPageFinished(WebView view, String url) {
                // Make sure to call through to the super's implementation
                // or the JavaScript native bridge will not be fully loaded
                super.onPageFinished(view, url);

                // Hide the progress bar when the page is loaded
                progressBar.setVisibility(View.GONE);
            }
        });

        // Load the url
        String uri = getIntent().getData();

        if (uri == null) {
            finish();
            return;
        }

        if (uri.getScheme().equalsIgnoreCase(RichPushInbox.MESSAGE_DATA_SCHEME)) {
            String messageId = uri.getSchemeSpecificPart();
            RichPushMessage message = UAirship.shared()
                                              .getRichPushManager()
                                              .getRichPushInbox()
                                              .getMessage(messageId);

            if (message == null) {
                finish();
                return;
            }

            webView.loadRichPushMessage(message);
            message.markRead();
        } else {
            webView.loadUrl(uri.toString());
        }
    }

    @Override
    protected void onStart() {
        super.onStart();

        // Activity instrumentation for analytic tracking
        Analytics.activityStarted(this);
    }

    @Override
    protected void onStop() {
        super.onStop();

        // Activity instrumentation for analytic tracking
        Analytics.activityStopped(this);
    }

    @Override
    public void onPause() {
        super.onPause();

        if (Build.VERSION.SDK_INT >= 11) {
            webView.onPause();
        }
    }

    @Override
    public void onResume() {
        super.onResume();

        if (Build.VERSION.SDK_INT >= 11) {
            webView.onResume();
        }
    }
}

Replace the Urban Airship LandingPageActivity with your custom activity that contains the Landing Page action intent filter to the AndroidManifest.xml:

<!-- Remove the Urban Airship LandingPageActivity entry -->
<activity
        tools:node="remove"
        android:name="com.urbanairship.actions.LandingPageActivity" />

<!-- Custom landing page activity -->
<activity
    android:name=".CustomLandingPageActivity"
    android:exported="false">

    <!-- Required for landing page action -->
    <intent-filter>
        <action android:name="com.urbanairship.actions.SHOW_LANDING_PAGE_INTENT_ACTION"/>
        <data android:scheme="http" />
        <data android:scheme="https" />
        <data android:scheme="message" />
        <category android:name="android.intent.category.DEFAULT"/>
    </intent-filter>

</activity>

Customize Landing Pages for Android

Customization

Style

Example

Layout

Example

Web View Background Color

Example

Activity

Example

Never miss out on product updates

Choose your notification topics

Product Subscription Options

Platform Subscription Options