Author: Moritz Post

UPDATE: The post has been updated to use the new tabris.TabFolder api Creating a good mobile app goes hand in hand with creating a well designed mobile app. With Tabris.js you are able to cater the style of your app to your design needs. One of the more iconic widgets on Android is the tab. In Tabris.js tabs are represented by the TabFolder widget. The following code is...

Read More

Creating great mobile apps usually involves making use of icons. May it be as touch target, indicator or just as decorations, icons make an app come to life and provide personality. Therefore it is important to focus on your icon design by and make them as readable and meaningful as possible. A mobile platform usually has its own style of icons with certain key metrics and attributes. One of such icon systems is the Google material design...

Read More

Positioning widgets in a layout is a very common task in Tabris.js apps. When dealing with varying device densities, Tabris.js lets you declare all dimensions in device independent pixels. This ensures that a layout will look the same on high and low resolution displays. Providing device independent pixels means that you can only provide positions with a multiple of the base density of the display. So a device with a 4x...

Read More

UPDATE 1: With Tabris.js 1.1 released to production, we have removed the "sneak peak" indication from this article. UPDATE 2: Starting with Tabris.js 2.0.0-beta1 the base theme to inherit from has been renamed to DarkAppBar and the theme preference now expects an Android resource reference to a theme. See here for details. In a previous blogpost we discussed how to choose between one of the predefined themes for your Tabris.js app on Android. Basically...

Read More

Building a Tabris.js client for Android or iOS has gotten pretty easy thanks to the Tabris.js build service. For the Android client you don't even need to provide a signing certificate to get started: Simply hit "Build Android App" and off you go. Since the build infrastructure is based on the Cordova platform, you can use the build's config.xml file to provide custom branding like icons or app name. Tabris Android...

Read More

Creating an engaging mobile app is a challenging task. There are several best practice approaches to increase user delight and one of them is the use of animations. Animations can guide the user through the app, provide visual clues or simply give reassuring feedback. In this installment of the Tabris.js examples blog post series we will learn how to create widget animations with Tabris.js and...

Read More

A modern mobile UI should be delightful to use with small details that make the app feel alive. One of such interaction models is parallax scrolling which moves UI planes independently from each other. In this blog post we will explore how such an effect can be implemented with Tabris.js. One of the keystones in Tabris.js UI development is the direct and fine-grained control over the...

Read More

At some point every mobile app uses images. Maybe to indicate a button or to show you some cute kitten pictures. Tabris.js supports images in a variety of ways, be it as background images, page icons or inside an ImageView. In this blog post we want to focus on the ImageView as used in the image example. Check out the other posts in the "Tabris.js Examples"...

Read More

Often times mobile apps are used to display content. We want our apps to start up fast and bring us to the content as soon as possible. Therefore we store data locally for fast retrieval and offline caching. Popular solutions for such a local store is SQLite on Android or Core Data (SQLite) on iOS. Lately a new player has emerged in the mobile database scene: Realm. Realm...

Read More

The days until the upcoming Tabris 1.4 release are numbered and we have another nice addition to share with you. A ProgressBar can be configured to be indeterminate, which puts it in a never-ending activity mode. On iOS, indeterminate progress is always shown with a spinning indicator. The Android client uses a bar-like visualization for that state but it is also very common to see a...

Read More