Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive


Would someone kindly explain to me how to use the center property for buttons?


It's really not clear from the API, which states:

center (object) - a dictionary with properties x and y to indicate the center of the views position relative to the parent view

Thank you in advance

— asked June 23rd 2010 by Paul Dowsett
  • Oops - forgot to set a meaningful title - it would be nice if the Q&A editor allowed modification of the title after the post has been submitted.

    — commented June 23rd 2010 by Paul Dowsett
  • Setting the button center property to true centers the button within its parent. However, I'd still be interested in knowing what "dictionary with x and y" means, and any other options that are available with this property.
    I'd appreciate any feedback.

    — commented June 23rd 2010 by Paul Dowsett

3 Answers

  • Accepted Answer

    Using the "top" and "left" properties combined on the button MIGHT have the same effect as using "center".

    If you add elements (like buttons) to a window that's not yet open, all elements will be aligned to the left of the screen while it transitions into the new window when you open() it, and then they will centralize themselves once the new window is fully open.

    This causes a weird behavior because the buttons will immediately jump from the left side to the center of the screen on the new window.

    By using the center property on these elements you can tell the app where they should be centered instead of relying on the future window to position them later.

    Relying on the parent window to center (assuming an iphone in portrait mode):

    var b1 = Titanium.UI.createButton({

    Centering it yourself (it might not show up at the same place depending on your parent elements):

    var b1 = Titanium.UI.createButton({

    You might wanna add a button to a window that is not yet open because sometimes when you open a window and then add a button it might take some time for the button to get drawn.

    — answered August 20th 2010 by Caio Iglesias
    1 Comment
    • center:{x:160,y:10} was the right answer. Thank you Caio

      — commented November 4th 2010 by Paul Dowsett
  • I think the term 'dictionary' means the standard format where parameters are enclosed in curly brackets. If I am right, a 'dictionary with properties x and y' would be
    something like createButtton({center:x=0.5,y=0.5}) but happily things seem default to the center of views anyway, at least horizontally.



    — answered June 23rd 2010 by John Holman
    1 Comment
    • Hello, John - it's good of you to respond.
      I think this is part of the problem; until these types of gaps in the docs are filled, then we can only guess.
      Thank you for explaining that the term "dictionary" indicates brackets {} should be used. However, I have tried {center:x=0.3,y=0.6} and {center:x=50,y=150} in my code, with the same result - the button is centered. If there are any other suggestions, I'd be happy to try them.

      — commented June 23rd 2010 by Paul Dowsett
  • I'm not in a position to test this code right now, but you might try:

    — answered June 24th 2010 by Tony Masciola
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.