Customize Native Message Layout (Kotlin)

A Native Message allows you to receive a configuration object from Sourcepoint's Consent Management Platform. In this article, we will cover the required and optional steps to customize a Native Message layout (Kotlin):

• Import Native Message Library
• Provided Layout vs Custom Layout
• Style Customization (Optional)

Import Native Message Library

The Native Message class is an implementation of the android GroupView provided by Sourcepoint's SDK and should be imported into your application using the following:

import com.sourcepoint.gdpr_cmplibrary.NativeMessage

Provided Layout vs Custom Layout

Select which layout you wish to use for the application.

Provided Layout

The android SDK comes with a provided layout that can be used by instantiating an instance of a NativeMessage with an activity reference:

val nativeMessage = NativeMessage(this) // `this` is the activity context

Custom Layout

val nativeMessage = object : NativeMessage(this) {
            override fun init() {
                // set your layout `R.layout.custom_layout_cl`
                View.inflate(context, R.layout.custom_layout_cl, this)
                // mandatory configuration
		setAcceptAll(findViewById(R.id.accept_all_cl))
                setRejectAll(findViewById(R.id.reject_all_cl))
                setShowOptions(findViewById(R.id.show_options_cl))
                setCancel(findViewById(R.id.cancel_cl))
                setTitle(findViewById(R.id.title_cl))
                setBody(findViewById(R.id.body_cl))
            }
        }

If you choose to use your own layout (e.g. relative layout, constraint layout, etc...), please follow the subsequent guidelines:

Create a NativeMessage object and then use the init method to override the layout. Inflate the overriding layout and include the reference to the layout. In the example below, R.layout.custom_layout_cl is the reference to the layout.

val nativeMessage = object : NativeMessage(this) {
            override fun init() {
                // set your layout `R.layout.custom_layout_cl`
                View.inflate(context, R.layout.custom_layout_cl, this)

Finally, override the following UI elements in your custom layout by setting the resource IDs. Failure to override each button and/or label in the list below will result in an error.

                // mandatory configuration
		setAcceptAll(findViewById(R.id.accept_all_cl))
                setRejectAll(findViewById(R.id.reject_all_cl))
                setShowOptions(findViewById(R.id.show_options_cl))
                setCancel(findViewById(R.id.cancel_cl))
                setTitle(findViewById(R.id.title_cl))
                setBody(findViewById(R.id.body_cl))
            }
        }

If successful, the developer should be able to see the overriding layout on their mobile device. Below is the code put together.

Note: The custom layout should be passed within onResume inside the run method to visualize your custom layout. By passing custom layout as a parameter, you are telling Sourcepoint to visualize your customize layout instead of a web view. Please see the example below:

    override fun onResume() {
        super.onResume()
        Log.i(TAG, "init");
        buildGDPRConsentLib().run(NativeMessage());
    }

Style Customization (Optional)

In addition to configuring a layout, you can also override (optional) the look and feel of the configuration coming from the Consent Management Platform (CMP) such as background color, size, etc...

In order to apply you custom style you should use the following configuration:

val nativeMessage = object : NativeMessage(this) {
            override fun init() { /*...*/ }
		override fun setAttributes(attrs: NativeMessageAttrs?) {
                // This will ensure all attributes are correctly set.
                super.setAttributes(attrs)

                // Overwrite any layout after calling super.setAttributes
                getAcceptAll().button.setBackgroundColor(Color.RED)
                getRejectAll().button.setBackgroundColor(Color.YELLOW)
		getTitle().text = "custom title"
		// ...
            }
        }