Configuring Customizations

The Mobile SDK allows for a wide range of customizations to make it behave, look, and feel more like the rest of your app does. We devided these into three categories, at which we will take a look next.

tip

Adjusting the settings mentioned on this page is completely optional. There are defaults in place – so if you don’t see any need to tweak some or even all of these options, you don’t have to, and can just stick to the predefined standards instead. We highly recommend to take the time to do some proper customization though, because it will make the user experience of your customers much more seamless and unique.

Configuring the Feature Set

Our photo product editor comes with an elobarate set of features, allowing for a wide variety of possibilities to design and customize products. Some of those features can be configured to better address your and your customer base’s needs. This is completely optional and if you decide, that you are fine with the preconfigured way things work, default values will take effect.

If instead you want to further adjust the feature set, you can pass an EditorConfiguration to the editor’s initialization call. The following table gives an overview about configuration flags currently available in EditorConfiguration:

Property	Type	Default	Description
allowMultipleElementsForWallDecor	Boolean	false	Controls whether multiple elements (images, stickers, etc) can be applied to a wall décor product.
warnUncoveredWrapAreaWallDecor	Boolean	false	Controls whether a warning is shown when the areas of a canvas which are wrapped around at the side contain empty space.

Customizing UI Branding

The Mobile SDK should integrate with your app as seamlessly and unobtrusively as possible, so that a smooth user experience is guaranteed. That’s why we integrated a Branding class with various settings, that allow you to tweak colors and dimensions to match your specific corporate identity. It can be passed as an optional parameter in the EditorView’s initialize methods.

Here is an overview of everything you can currently configure and the respective defaults, if you skip one or more of those values:

Property	Type	Default	Description
primaryColor	String	■  "#1d71b8"	Primary color that is applied to e.g. buttons of main workflows.
secondaryColor	String	■  "#36A9E1"	Secondary color that is applied to UI elements with less importance, that should still get some visual highlighting.
fontColorDark	String	■  "#4d4d4d"	Color for texts that are supposed to be displayed in a darker shade.
fontColorLight	String	■  "#fff"	Color for texts that are supposed to be displayed in a lighter shade.

tip

For all color definitions mentioned above, the following formats are allowed: #rrggbb (full hexadecimal notation), #rgb (shortened hexadecimal notation), or rgba(r,g,b,a) (decimal notation with alpha channel). Hexadecimal values are treated as case insensitive and color definitions may not contain any additional whitespaces. We recommend, that you thoroughly check the editor after color adjustments to ensure good contrast and readability for all UI elements.

Translating Texts

By default our SDK is equipped with texts in the English language. Don’t worry though – if your target audience resides in a different language area, you can override all texts with proper translations. Those translations are defined in the form of a JSON file with key-value pairs, mapping each string identifier to its translated representation. As soon as you call one of the initialize methods of the SDK, just pass an InputStream referring to that file to the optional translationsSource parameter.

Here is a very basic example of what a translation JSON file might look like (in reality it will contain a much larger amount of mappings):

translations.json (de_DE sample)

{
    "app.mirai.addPages.button": "Seiten hinzufügen",
    "app.mirai.backgrounds.colorTab.label": "Farbe",
    "app.mirai.calendar.backToOverview.button": "Zur Übersicht"
}

You can download a template of the JSON file with English default texts to start your custom translation conveniently.

tip

After translating texts, please check the editor and make sure, that all messages are displayed properly and nothing is cropped or overlapped. It is generally advisable to keep translations as short as possible to avoid any undesirable UI states.

Configuring User Behavior Analytics Capabilities

The ip.labs Mobile SDK comes with some built-in user tracking capabilities to give you some helpful analytical and statistical insights into the usage of the product. By default tracking is turned off, but you can easily activate it during SDK initialization or even later during the runtime of your app.

To get analytics data, just set the right state for the optional userTrackingPermission parameter of IplabsMobileSdk like this:

// Activate analytics during SDK initialization…
IplabsMobileSdk.initialize(
    operatorId = yourOperatorId,
    locale = yourLocale,
    baseUrl = yourBaseUrl,
    externalCartServiceBaseUrl = yourExternalCartServiceBaseUrl,
    localProjectsLocation = yourLocalProjectsLocation,
    userTrackingPermission = UserTrackingPermission.ALLOW
)

// …or at a later point after the initialization
IplabsMobileSdk.userTrackingPermission = UserTrackingPermission.ALLOW