Layout in Apple Watch

Question

I am making a calculator for Apple Watch I have inserted a group and inside that I have added 4 button but I can't find any option that those 4 buttons should adjust on both Apple Watch screen.

Apple Watch 38mm

Apple Watch 42mm

Group Properties

Button Properties

Answer 1

Use one WKInterfaceGroup per row and in the size inspector set "Relative to Container" width to 1 and height to 0.18.

Inside each group layout your WKInterfaceButtons setting Relative to Container heights to 1 and width 0.25 (4 elements per row).

Final result on 38mm:

and 42mm:

Answer 2

For anyone else who might be trying to do similar things on Apple Watch kit, there is a very good basic calculator tutorial here: http://www.noodlewerk.com/blog/calculator-apple-watch-tutorial/ (not my own tutorial, but something I came across in my own experimentation with the Kit)

Excerpt from article:

"Select both buttons and open the Attributes Inspector in the sidebar on the right. Keep the width option at ‘Relative to Container’ but change the value from 1 to 0.25."

This percentage setting allows UI elements to re-size relative to the display area, which is useful in situation like the Apple Watch where there are two discreet screen sizes.