Supporting multiple form-factors using skins

improve this page | report issue


Skins provide support for multiple form factors in a single executable file for devices of the same OS family. They are a sub-variant of an environment and are packaged together in one application. The decision on which skin to use is made automatically at run time.



This tutorial covers the following topics:

Skin creation

Skins can be created by either using MobileFirst Studio or CLI.


Follow the on interactive instructions to complete the process.




A skin folder contains the following folders: images, CSS and js. In order to alter the visuals and logic of the skin application, create new .css and .js files in the corresponding folders.


Skin packaging

All skins for a specific environment are packaged within the app.

Applying skins at run time


A special, developer-controlled JavaScript file, skinLoader.js, is run when the app starts in order to determine which skin to load.
The default skinLoader.js file contains examples of code.

function getSkinName() {
  var skinName = "default";
    skinName = "android.HTML5";
  return skinName;

Skin registration

Skins are automatically registered in the application-descriptor.xml file.

<android version="1.0">
        <skin name="default">
            <folder name="common"/>
            <folder name="android"/>
        <skin name="android.tablet">
            <folder name="common"/>
            <folder name="android"/>
            <folder name="android.tablet"/>
        <skin name="">
            <folder name="common"/>
            <folder name="android"/>
            <folder name=""/>
    <worklightSettings include="false"/>
        <encryptWebResources enabled="false"/>

Last modified on November 09, 2016