Building a Ti Mobile App: GrillTime, part 2

We’ve got some of the basics of our app working, but it looks so drab. I’m much more motivated to work on an app when it looks good early on in the development cycle. So let’s spend this next development push working on the look and feel of the app.

Custom icon

The app icon is crucial — we want it to be unique enough so that the user can quickly find your app in a large group of icons. It should be simple and bold.

I found a great flame image at Dragoart.

We need to provide a number of resolutions for our icon. Based on what is created by Ti Studio for a new project, we need these sizes:

We can also provide a version for retina displays:

This size is not in project by default, but I can confirm that this works. So we create a very high-resolution master image and use a conversion script to build the various sizes for the different platforms. Find the original icons and theconvert_appicon.php script in the artwork/ directory. (Yes, I write my command-line scripts in PHP. Get over yourself!)

Splash screen

Beyond the app icon, the splash screen is really important for making a good first impression on the user. It has to look really good. The art has to be solid, and we’ve got to accomodate a wide variety of display sizes. By looking through the Resources/ folder, we can see all the splash screen images created by default for a new Ti Mobile project:

Two others are created as well,

I believe these are for the iPad. We’re going to ignore them for now, since we’re not really building a tablet-optimized UI. Maybe in a later stage of the project we can tackle those issues.

So for now, we need the sizes listed above. My recommendation is to build two high-resolution master images:

  • a portrait image with an aspect ratio of 3:5
  • a landscape image with an aspect ratio of 5:3

The aspect ratios were selected to match the aspect ratio of the “long” android displays. In my case, my master images are 1093×1821 and 1821×1093. We can write a script to resize the images for the various resolutions and crop them for the “not long” android displays and the iphone displays.

Default images

I noticed some weird things about the default images and the various resolution directories created by Ti Studio:

  • Not comprehensive – why isn’t there a res-long-port-mdpi directory? What about xhdpi displays?
  • Inconsistent – notice that the size of the images in res-long-port-hdpi and res-notlong-port-hdpi are identical, 480×800. That doesn’t seem right.

I decided to just exactly mimic the image sizes that I found, rather than dig into these issues in detail. I think that the runtime will select reasonably good alternatives if the app runs on a mdpi long android display.

Photographic images vs. line art

I really wanted to use a photograph in my splash screen. But using PNGs is not ideal for compressing photos. By the time I was done creating all the different size images, I was adding about 5MB to the size of my app. For the splash screen. Not good.

I read that you could use JPEG images and just change their filename extensions to “png”. This brought my image sizes down to a much more reasonable 500KB (still awfully big, but given that Ti Mobile is going to inflate my app by 3-4 MB, it’s probably not much worse to add 500KB for a good looking splash screen).

I successfully launched my app in the iOS simulator using these disguised JPEG files. Feeling proud of my little hack, I tried to run in the android emulator. No dice. Android called my bluff. So I had to revert to a non-photographic splash screen so that my PNGs were not too heavy.

Originals and conversion scripts

My original artwork is in the artwork/ directory in the main project directory. I create my originals with GIMP and save in its native XCF format so that I can later edit the layers if I need to.

The conversion script is also in the artwork/ directory: convert_splash.php.

Custom font

The best-looking apps I’ve seen almost invariably use non-standard fonts. A tasteful typeface can make a big difference in the look and feel of your app. And it’s not too hard to do, either.

I browsed Google Web Fonts for a font that I liked. It’s not that we need web-ready fonts, but the licensing on these fonts is very attractive for an open-source app.

I selected “Bitter” by Huerta Tipográfica. Really nice — not too whimsical, not too serious. Thanks, ladies and gentlemen, for sharing your font with the world.

I added the font to my collection in Google Web Fonts, then downloaded a ZIP archive. I extracted the ZIP file, and from it, I kept the TTF files:

I created a Resources/fonts directory, and then I put the regular and bold files into the new directory.

I am using TitanUp’s Theme class to manage my fonts. In app.js, I set all my theme styles. I add the font-family property to my font definitions, paying special attention to the way in which these are specified on iOS and android (on iOS, you specify just the friendly name of the font, e.g. “Bitter”; on android, you specify the filename sans the “.ttf” extension, e.g. “Bitter-Regular”).

Finally, there is a special procedure you need to follow to get the font to work on iOS:

  • Build the project at least once (the font won’t work yet). Copy build/iphone/Info.plist to the project root directory.
  • Double-click Info.plist to open it in Xcode.
  • Right-click a blank area in the list of keys and choose Add Row. From the resulting list, choose “Fonts provided by application”.
  • Expand Fonts provided by application and click in the Value field. Enter the full name of the font file. If you’ve put the file in the fonts directory as we suggest, make sure to include that path, e.g. /fonts/SpicyRice-Regular.ttf.
  • Save the file and close Xcode.
  • In Ti Studio, clean the project then build it again. This time your custom font should show up.

Tab icons

For now, we’ve only got the one tab of content, the safe cooking temperatures. But we know we’re going to eventually add a timers tab, so we’ll go ahead and set up the tabs and their icons now.

My company licensed Glyphish Pro, a very large and versatile icon set for mobile apps. The price is low enough that even indy developers can afford a license. From this icon set, I selected two icons, “stopwatch” and “thermometer”.

There is some conversion you need to perform to get the images ready for a variety of display resolutions. Glyphish provides the icons in two resolutions, one appropriate for the original iPhone, and one scaled up for the retina display. The one failing of Glyphish, IMHO, is that the images have inconsistent dimensions. They all are about the same size, but they’re not padded to consistent squares of 30×30 or 60×60. So I built a conversion script to do just that and put all the icon images in place. Find the original icons and the convert_icons.php script in the artwork/ directory.

One note on the conversion: rather than create 10 different renditions of the icons (like we did for the splash screens), we can just create one each for ldpi, mdpi, hdpi, and xhdpi. So we create four new directories under Resources/android/images:

Another minor gotcha: the glyphish icon files are named with numbers at the start, like “93-thermometer.png”. If you keep those numbers at the start of the filenames, you’ll get errors when compiling for android like this:

We can now add the images to our tabs:

Finally, let’s get rid of the default tab icons; if we don’t, they’ll be shipped with your app, adding unnecessary bloat. Remove /Resources/images/KS*.

Custom backgrounds

What better way to inject the app with some grilling flavor? I have a few shots of food on the grill, but mine pale in comparison to Mike McCune’s photostream. I grabbed my favorites from his collection, and put them into the artwork/backgrounds directory.

To prepare them for use in the app, I had to reduce their size — many are 12 megapixels or more. So I reduced them all to a reasonable size, like 1280×1024 for landscape and 1024×1280 for portrait. To do that without distorting the images, I have to crop them. I’ve put together a script to do this automatically in artwork/convert_backgrounds.php.

The easiest thing to do would be to set the backgroundImage on a view or window. But the problem is that unless the view has the exact same aspect ratio as the image we’re using, the image will be stretched. Sometimes this distortion is subtle, but sometimes it is really bad. I have put together a technique to get around this problem.

  • create an ImageView that is sized proportionally to the background image and fits either width or height exactly and exceeds the other dimension
  • add the ImageView to the view, centered horizontally and anchored to the bottom of the window
  • use the zIndex to make sure that the ImageView is beneath the other views, especially since we’ll be removing the view and creating a new one when the orientation changes

Note that we have to anchor to the bottom of the window because of the way TabGroups and new windows work on android. When a new window is opened from a Tab on android, it covers up the tabs, which means the top of the window is quite a bit higher on the screen than the parent window. So by anchoring to the bottom, the image doesn’t shift around when we move from the Tab window to the child window.

We set the background of the TableView to ‘transparent’ to make sure that the ImageView shows through the TableView. And finally, we add a semi-opaque view between the ImageView and the TableView to “screen back” the image, making it easier to read the text in the TableView.

Let’s take a look

OK, the app has come a long way visually. Let’s have a look:

GrillTime on iOS

Download source code

Part 1 · Part 3 · Part 4

Leave a Reply

Your email address will not be published. Required fields are marked *