mPower™ Blog Series

Multi-Platform Mobile App Screen Design

We all know how bothersome multi-platform mobile app formatting can get. Each platform is unique and exhibits different features, capabilities and behaviour. But then, multi-platform apps are truly “in” today. So – YOU – as the developer, need to find solutions to develop the best cross-formatted apps, without exhausting all your resources on developing for just a couple of platforms at one time.

Fortunately for you, there are some really great multi-platform developer tools in the market today, using which you can easily achieve your aim. Here is an Appcelerator dev tool for cross-formatting mobile applications. You can find the platform tutorials in this Appcelerator link .

The Titanium Development Platform from Appcelerator, which incidentally has a formidable fan following in Twitter, aids the development of native mobile, tablet and desktop apps via web programming languages such as HTML, PHP, JavaScript, Ruby and Python. It now powers over a 1,000 native apps per month. The best thing about Titanium is that if gives users easy access to over 300 APIs and location information.

Additionally, Appcelerator also offers customizable metrics for actions and events. Apps can be totally hardware-based and all app data can be stored either in the cloud or on the device.

Developers of mobile applications know exactly how difficult and frustrating app coding can sometimes get. The problem intensifies further while writing code for multi-platform mobile applications. Each mobile platform, such as Windows Mobile, BlackBerry, Palm, iPhone, iPad and so on, has its own set of features. If designing across diverse devices is a challenge, it is even more so for those who create applications which should be portable across multiple platforms. How can you develop and design for such varied device platforms?

Here, I explain how to design a  mobile app screens in easier way across all the devices.

Start off by dividing the screen into number of views

  • First view contains company logo  with a border.
  • Second View contains application name and the simple description of the application.
  • Third view contains the buttons.
  • The last view is the bottom view be careful here I am not numbering this view as four, named it as bottom view because across all the devices it should appear in the bottom of the screen.



Step 1: To create a window

Var window = Titanium.UI.createWindow();


Step 2: To create first view

Var FirstView = Ti.UI.createView({width:Ti.UI.FILL,height: ‘ 20%‘});
Var border = Ti.UI.createView({width:Ti.UI.FILL,height:’2%’});


Step 3: To create the logo image view

Var LogoImage = Ti.UI.CreateImageView(Image:’path of the image’;Width:Ti.UI.FILL,Height:’18%’});

Step 4: To create second view


Var SecondView = Ti.UI.createView({width:Ti.UI.FILL,height: ‘ 30%‘});

Step 5: To create sub views of second view


Var appicationName = Ti.UI.createLabel({Title:’Innovapptive Substituition Manager’});Var applicationtag = Ti.UI.createLabel({Title:’write the data from the screen’,

Step 6: To create third view

Var ThirdView = Ti.UI.createView({width:Ti.UI.FILL,height: ‘ 40%‘});

Step 7: To create sub views of third view

Var demoButton = Ti.UI.createButton({title:’DemoApplication’});
Var setupButton = Ti.UI.createButton({title:’Setup Connection’,Top:’15dp’});

Step 8: To create bottom view

Var bottomBorder = Ti.UI.createView({width:Ti.UI.FILL,height:’10dp’,Bottom:’2dp’});
new window().open();

Copy the source code into your work space run the application in any device and see the screen look and feel is same as  above screen .

“If your actions inspire others to dream more, learn more, do more and become more, you are a leader.”

Share this post

Comments (5)

  • Sundeep Ravande Reply

    Fantastic Blog ! Inspiring for the entire team !


    October 8, 2013 at 9:52 am
  • Prateek Aggarwal Reply

    Thanks for sharing your technical knowledge

    October 8, 2013 at 11:16 pm
  • IphoneDeveloper Reply

    its very useful who want to start with cross platform..

    October 10, 2013 at 12:18 am
  • Bhaskara Rama Kattamuri Reply

    Nice wote up…. its very useful to me… thanks

    October 10, 2013 at 1:18 am
  • Bhaskara Rama Kattamuri Reply

    Nice wrote up…. its very useful to me… thanks

    October 10, 2013 at 1:18 am

Leave a comment

Your email address will not be published.