Add Margin and Padding to Titanium UI Views like CSS BoxModel

Have you ever tried to add padding to your Ti.UI.Label to add some space between it and the view it’s nested in. In the web development world it’s easy to position your content exactly where you need it by using various CSS box model settings. The two I use the most are margin and padding. Titanium Mobile doesn’t have these settings. My guess is the native SDKs don’t support these types of settings. So what can you do?

CSS Box Model Layout

CSS Box Model Layout from

There are two solutions I use to add margin and padding to Ti.UI.Views like labels and images. The first one is the obvious solution which I used in many of my apps. Simple nest your content view in a parent view and set the top, left, right and bottom settings for margins. I set height and width of the parent view to Ti.UI.SIZE to keep it wrapped tight around the content view. Last I add a background color to the content view to show content margin.

var container = Ti.UI.createView({
    	height : Ti.UI.SIZE,
    	width  : Ti.UI.SIZE
    content = Ti.UI.createLabel({
    	top    : 10,
    	right  : 10,
    	bottom : 10,
    	left   : 10,
    	color  : "#000000",
    	height : 100,
    	text   : "Integer in dolor quis risus accumsan porta sit amet a ipsum.",
    	backgroundColor : "#87FC70"


Now what about padding? In the CSS box model the margin is used to add spacing outside the box and padding is used to add spacing inside the box border. The quick solution would be to use the border settings for the content view. Set the borderWidth to the padding you want and make the borderColor transparent. This doesn’t always work as expected and what if I actually need to use a border. My early versions of this pattern used this hack but I had to move away from it and create an inner view to wrap my content.

So create a new view and copy over the top, right, bottom and left settings to move the margin to the inner view. Now those settings in the content view serve as the padding and you can add a border setting to the inner view to complete the box model.

var container = Ti.UI.createView({
    	height : Ti.UI.SIZE,
    	width  : Ti.UI.SIZE
    inner = Ti.UI.createView({
    	top    : 10,
    	right  : 10,
    	bottom : 10,
    	left   : 10,
    	height : 100,
    	backgroundColor : "#87FC70"
    content = Ti.UI.createLabel({
    	top    : 10,
    	right  : 10,
    	bottom : 10,
    	left   : 10,
    	color  : "#000000",
    	text   : "Integer in dolor quis risus accumsan porta sit amet a ipsum."

iOS Box Model Example

Padding and margin with background colors

Box Model Example

Label view with padding and margin

There it is… the box model in Titanium mobile. You can add borders to the inner view to make sure padding is behind the border. This will work on both iOS and Android apps. I’m curious if anyone has any other solution for margins and padding. Please let me know.

It does get annoying to add all this code each time you need margin and padding for your views. So to make things much easier I created a module called BoxModel to neatly package this up for you to reuse at your hearts content.

Download or clone the code here from GitHub.

Posted in Code, Quick Tip | Tagged , , , , , , , | Leave a comment

Appcelerator Titanium Tip #2: Expedite Development with App Templates

Mobile app templates have been around for some time now. You can get them for all kinds of platforms but not many out there for Appcelerator Titanium apps. This market is pretty new and not many people really know about it. This post is my updated version of the list from NetTuts+ by Jeffrey Way.

Disclosure: Please note that some of the links below are affiliate links, and at no additional cost to you, I will earn a commission if you decide to make a purchase. Please understand I recommend them because they are helpful and useful, not because of the small commissions I make if you decide to buy something.

Why use a template?
Templates do most of the grunt work for you especially if you get a cross-platform template. Like WordPress themes, these templates are designed to get you up and running quickly but you can also take the time to customize them to separate your app from the rest.

Why pay for templates?
Simple, you get what you pay for. I don’t know of many free Appcelerator Titanium templates but chances are you won’t get the same quality and support as you would from a premium template.

Where can I get these templates?
There are a couple places you can go to buy Appcelerator Titanium code.

  • Appcelerator Marketplace
    There are some templates here but you will mostly find modules. Not the best place for templates.
  • Binpress
    This is a great marketplace with many license options but they don’t have many Titanium items available yet.
  • CodeCanyon
    This is by far the best option. At the time of this blog post they have 20 full application templates available.

Here are five templates that cover a wide range of different features from CodeCanyon. All support both Android and iOS devices:

Barebone App. Full Application
This is a great starter template. it includes a slide out menu (like Facebook app), multiple UI components and a drop down menu.

Ultimate Blog App
Turn your blog into an app with this template. Includes the ability to import many third party feeds like YouTube, Vimeo, Flickr and others.

StoreApp: A Titanium Store Application Template
Create a native mobile store to sell your products. Includes a shopping cart, product details and transactions via PayPal.

Tv Radio app
A great template for your media app. It can stream audio and video along with support for a news and gallery section.

MapApp: Titanium Mobile Location Map App Template
Last but not least is a maps template great for travel apps to list points of interest. This template will display distance from location, location details and action buttons to call, save, email or get directions to a location.

Hope this list helps you get going with Appcelerator Titanium templates. Do youself a favor and cut your development time down. Leave comments if you find any other marketplaces out there.

Posted in Quick Tip | Tagged , , , | Leave a comment

ViewScrollr: Free Titanium ScrollableView Module

ViewScrollr is a free Titanium JS Module I created to fix a problem I had a while back with the Ti.UI.ScrollableView object. Basically I needed more control over how the page indicators looked.

After some late night hacking I came up with a pretty basic module with custom paging controls. One of the main differences with this and the Titanium.UI.ScrollableView api is 1) the ability to change the background color of the controls, 2) add a border to each individual indicator and 3) change the selected page indicator color.

Before I released this to the Titanium community I added one more feature that some developers asked about in the QA forums… auto scrolling.

The first version I hacked together used setInterval. I quickly realized this was the wrong approach. If you tried to scroll between pages via touch when the setInterval fired it would override what you were doing and switch to the next page. Really annoying!

So I switched to using a setTimeout. This way you can control when to start the auto scroll timer.

I was fun hacking away at this til 3am. Hope you guys enjoy it. Please feel free to fork, hack and use this module freely.

Download ViewScrollr Demo Project

UPDATE: We released a Pro version of ViewScrollr which adds animated captions and video slides. Available now on CodeCanyon

Posted in Code, Community, Uncategorized | Tagged , , , , , , , | 2 Comments

Appcelerator Titanium Tip #1: Use WebViews To Transform SVG Images

Quick tips are always helpful so I decided to start sharing some since I don’t have the time to write many detailed articles.

Our first tip in this series has to do with scalable images. It’s always a pain to crank out different image sizes and densities for all the devices you have to support in your Appcelerator project. How can you make things easier? How about just creating SVG images and transforming them on the device before you store and display them.

This can be done if you make use of a WebView (which supports SVG on most devices) and transform the image into a PNG data url. You can then store that url on the device for future use and display in an ImageView.

Here’s the Q&A post that mentions the details.

Posted in Quick Tip | Tagged , , , , , | Leave a comment

Action Bar Module for Titanium Mobile

I recently re-wrote my Titanium mobile template (StoreApp) to support Android devices. In the process I coded the a basic foundation for an action bar module. The Titanium SDK doesn’t support action bars yet but there is a task logged in Appcelerator’s JIRA instance for this so it should be coming soon. For now you can use this.

It’s been awhile since I posted something on this blog so I’m hoping this free module makes up for lost time… let’s dive in! Continue reading

Posted in Code, Training | Tagged , , , , , , , , , , | 6 Comments

Useful Links for Titanium Mobile Developers

Here are some links I found useful in building quality mobile apps. Enjoy!

Apple iOS Links

  • WWDC10 Sessions: Apple released the recorded WWDC10 sessions for free last year. I’m assuming you have a developer account already so all you need to do is log in and download some Apple development knowledge. There’s so much info in these sessions. Make sure to check out the sessions on UI design (session 103) and debugging tools (sessions 304, 306, 309, 311 & 317). Browse, download and hack on!

Google Android Links

Posted in Training | Tagged , , | Leave a comment

Titanium Q&A vs. StackOverflow

We all need help sometimes. Especially when you’re working with some new programming platform. Programmers depend on official support from a company but mostly on a community of fellow programmers either in person or on the web.

For titanium that web support comes from two official places. There’s a premium service which makes sense for companies and consultants. Then there’s the free support service which is basically a Q&A forum.

Aside from the official places for help there are the un-official places like this blog. There aren’t many sites out there for Titanium developers since the platform is fairly new. The one that stands out the most for me is StackOverflow. Even though this site covers much more then Titanium… it was build from the ground up to help developers.

If your not familiar with StackOverflow here’s how they describe themselves:

Stack Overflow is a programming Q & A site that’s free. Free to ask questions, free to answer questions, free to read, free to index, built with plain old HTML… You can register if you want to collect karma and win valuable flair that will appear next to your name, but otherwise, it’s just free. And fast. Very, very fast.

I’m a big fan of StackOverflow and I highly recommend it to programmers. It turns out that the Appcelerator guys are also big fans since they copied most of their Q&A concepts from StackOverflow. But I prefer using the real deal and here’s some reasons why:

  • It’s a huge programmer community! What are you waiting for… jump in!
  • Proven Q&A platform with great features and support
  • Single place for almost all your programming Q&A needs including a huge JavaScript community.
  • You earn points that can actually help you in the long run… like promoting yourself as an expert.
  • Speaking of being an expert… there’s an entire career service that helps you hire experts or get hired as one.
  • All submitted content on the site is licensed under Creative Commons and is available free for download.
  • Did I mention it’s a proven platform with great features? Things like searching, tagging, avoiding duplicate questions, stats, incentives, wiki like support, etc…
  • and some Appcelerator employees use it including the CEO!

Now with all that said there are a couple reasons to still use Titanium’s Q&A forum.

  • It has way more Titanium questions… over 13k last time I checked compared to a couple hundred on StackOverflow.
  • It’s the official Q&A site so Appcelerator employees will probably answer questions here instead of StackOverflow.

I for one hope more Titanium developers move over to StackOverflow. Actually I would like to see Appcelerator promote the use of StackOverflow instead of their half baked copy (sorry guys but it sucks). I hated the Q&A site so much I actually purchased access to the official support portal. I can’t say I’m impressed but my questions do get answered for the most part. It’s a high price to pay but useful, timely free support is hard to come by.

Posted in Community | Tagged , , | Leave a comment

Appcelerator Dev Conference Announced

This isn’t a surprise since the last survey I took from Appcelerator had a number of questions about a conference this year. I do plan on attending as you should.

The date is September 18-20, 2011 in San Francisco. The good news is it starts on a Sunday and is only three days long. This should be easy for me to pull off since I won’t have to take more then two days off from work.

Appcelerator is calling the conference CODESTRONG. I’m terrible at naming things (like this blog) so I won’t complain. I’m hoping to hear about more frameworks and tools then the usual Vimeo videos we currently get.

Registration begins in May. There’s no mention of cost or a venue. There is a survey you can fill out to help decide topics so head over there and fill it out.

Announcing Appcelerator’s CODESTRONG Developer Conference!

Posted in Announcements, Event, News | Tagged , , | Leave a comment“Hello World!”);

Welcome to TiHelp.Me!

This blog is all about Appcelerator’s Titanium platform. I wanted to start a blog to help myself and others on the platform since I learned first hand how painful it can be to get good support.

Titanium is relatively new and it has all the signs of a young platform. This blog is my attempt at helping it along. I have a couple other ideas up my sleeve and I’ll share all of them here.

For now join the conversation and subscribe to the feed for helpful info on developing with Titanium.


Posted in Announcements | Leave a comment