Brand your Tabris.js app

Brand your Tabris.js app

Branding an app is essential! That’s why we wanted to make the branding of a Tabris.js app as easy as possible. As you might have read, since a few days we provide a free build service on tabrisjs.com that allows you to build your apps online. So, how do you add branding to your Tabris.js app?

For us branding is adding your own logos, splash screens, title and IDs. As a result you need a set of icons first. We can recommend makeappicon.com to generate the needed set of icons. Doing it manually does always take forever…

Screen Shot 2015-04-01 at 14.17.58

After you have your icon set ready you can simply add it to your config.xml like in the example below. You might notice that this looks like you are doing the branding for an Apache Cordova app. This is no coincidence! Tabris.js is compatible with Apache Cordova. This means you can use the config.xml as you know it from plain Cordova apps.

<pre lang="xml">
<?xml version='1.0' encoding='utf-8'?>
<widget
    id="my.first.app"
    version="1.0.0"
    xmlns:gap="https://phonegap.com/ns/1.0"
    xmlns="https://www.w3.org/ns/widgets"
    xmlns:cdv="https://cordova.apache.org/ns/1.0">
    ...
    <platform name="ios">
        <!-- iOS 8.0+ -->
        <icon src="Icon-60@3x.png" width="180" height="180" />
        <!-- iOS 7.0+ -->
        <!-- iPhone / iPod Touch  -->
        <icon src="Icon-60.png" width="60" height="60" />
        <icon src="Icon-60@2x.png" width="120" height="120" />
        <!-- iPad -->
        <icon src="Icon-76.png" width="76" height="76" />
        <icon src="Icon-76@2x.png" width="152" height="152" />
        <!-- iOS 6.1 -->
        <!-- Spotlight Icon -->
        <icon src="Icon-Spotlight-40.png" width="40" height="40" />
        <icon src="Icon-Spotlight-40@2x.png" width="80" height="80" />
        <!-- iPhone / iPod Touch -->
        <icon src="Icon.png" width="57" height="57" />
        <icon src="Icon@2x.png" width="114" height="114" />
        <!-- iPad -->
        <icon src="Icon-72.png" width="72" height="72" />
        <icon src="Icon-72@2x.png" width="144" height="144" />
        <!-- iPhone Spotlight and Settings Icon -->
        <icon src="Icon-Small.png" width="29" height="29" />
        <icon src="Icon-Small@2x.png" width="58" height="58" />
        <!-- iPad Spotlight and Settings Icon -->
        <icon src="Icon-50.png" width="50" height="50" />
        <icon src="Icon-50@2x.png" width="100" height="100" />
    </platform>

    <platform name="android">
        <icon src="drawable-mdpi/ic_launcher.png" density="mdpi" />
        <icon src="drawable-hdpi/ic_launcher.png" density="hdpi" />
        <icon src="drawable-xhdpi/ic_launcher.png" density="xhdpi" />
        <icon src="drawable-xxhdpi/ic_launcher.png" density="xxhdpi" />
        <icon src="drawable-xxxhdpi/ic_launcher.png" density="xxxhdpi" />
    </platform>

</widget>
</pre>

Adding splash screens works exactly the same way. Take a look at the Cordova documentation to see what’s possible. As always, please feel free to leave a comment or any kind of feedback.

7 Comments

Sorry, the comment form is closed at this time.