Resizing Elements for Different Screen Sizes in Appcelerator Titanium Alloy


Resizing Elements for Different Screen Sizes in Appcelerator Titanium Alloy

20:06 08 October in Appcelerator Titanium
1 Comment

When I was building my sample Score Keeper app in Appcelerator Titanium Alloy I came across the need to resize elements for the iPhone 5 display and older smaller displays. That left me wondering how do I resize different elements including images inside of my Titanium Alloy app.

If you subcribe to my course on here you can download the Score Keeper app for your self and look through all the code but here is a little sample of how I was able to resize and change attributes in my main XML file from my main javascript file.

The first thing I want to do is determine when I want this code to run. In my case I just wanted it to run on smaller screen sizes so I added a function as follows:

  1. if(Titanium.Platform.displayCaps.platformWidth <= 480){
  3. }

Notice here that I am running an if statement an getting the playformWidth so the size of the app and saying if it is less than 480 width then run the code that I put inside of the brackets. No the code in the brackets is what I found awesome. I can access any attribute on my main XML file just by running this line of code in my if statement.

  1. if(Titanium.Platform.displayCaps.platformWidth <= 480){
  2. $.numFirstL1.left = 11;
  3. }

The $ is how I access the main file then I type in the ID of the element I wish to change and then add a dot and the attribute I wish to change which in this case left. That means if in plain english that if the screen size is less than or equal to 480 then I want you to go in and move the numFirst1 ID which happens to be an image view and move it over to 11px left. Now from here I just have to do that with all my different elements I need to change. For example here is all the different elements I am chaining

  1. if(Titanium.Platform.displayCaps.platformWidth <= 480){
  2. //Position the left score
  3. $.numFirstL1.left = 11;
  4. $.numFirstL2.right = 11;
  5. //Position the right score
  6. $.numFirstR1.left = 11;
  7. $.numFirstR2.right = 11;
  8. //Adjust the width of the score backs
  9. $.scoreBackR.width = '47.5%';
  10. $.scoreBackL.width = '47.5%';
  11. //Adjust the widths of the topTitle widths
  12. $.topTitleBarL.width = '94.5%';
  13. $.topTitleBarR.width = '94.5%';
  14. //Adjusting the title bar position
  15. $.topTitleBarL.left = 6;
  16. $.topTitleBarR.left = 6;
  17. //Adjusting the plus and minus locations
  18. $.plusTeam1.right = 38;
  19. $.minusTeam1.left = 38;
  20. $.plusTeam2.right = 38;
  21. $.minusTeam2.left = 38;
  22. }

If you wish to download the full sample app click here or the button below and subscribe to my full training on

View Course


Be Sociable, Share!

Jeff Batt

Post A Comment