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="http://phonegap.com/ns/1.0"
    xmlns="http://www.w3.org/ns/widgets"
    xmlns:cdv="http://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
  • Samuel
    Posted at 4:35 pm, April 2, 2015

    Q1. Will I have to place the drawable icon folders in the www folder
    Q2. Also the build takes too long, is it from my files?.

  • Samuel
    Posted at 9:01 pm, April 3, 2015

    Also, After I build and install the app I get something similar to the green tabris js app with tabs but the middle tab is labelled Bundled Script.
    Its it because I branded my app?

    The hello app was not like that.

  • Samuel
    Posted at 10:39 pm, April 3, 2015

    To added a drawer

  • Samuel
    Posted at 10:40 pm, April 3, 2015

    To add, I add a drawer to the app

  • Samuel
    Posted at 10:26 am, April 21, 2015

    Do I need the cordova plugin for splash screen for my splash screen to show?
    below is my code, the icon works fine but the splash screen does not show.
    The images are outside the www

  • Samuel
    Posted at 2:35 pm, April 24, 2015

    Hi guys…i know am asking a lot here but kindly help me out