Responsive Design for Apps with Layouts

You are here:
< Back

 

When mobile programmers build apps, they must ensure that the screens display correctly on varying screen sizes.  This is called Responsive Design. KocoConnect automates your design to be responsive by providing controls in the Layouts Panel.

Alignment

When a component is selected, the Layouts menu will appear to the right. You can adjust the vertical and horizontal alignment by selecting how you want your content to display. The selected component will adjust relative to the screen.  If the component is in a container, it will align relative to that container. For example, create a background image and choose the horizontal spread and vertical spread.  The user will now see the image across the entire screen on all device types.

 

Position and Size

Use the position and size controls to adjust the placement and size of a component.

 

Pinning: Designing for Different Screen Sizes

Pinning is a method of gluing the edge of a component to a nearby object at a set distance. You can pin components to other components or to the edge of your screen. For example, back buttons are often found in the upper lefthand corner of a mobile screen.  If you were to insert a back button, you would select and pin the button to the top and left walls of the screen, so the button displays in the same location on all device types.

Components will always pin to the edge of the closest object.  See more examples how to work with pinning in Tips and Tricks for Layouts.

 

Verify Your Designs Work Across Device Types

To see how your designs look across the varying screen sizes, select the Apple or Android icon and toggle through the different device types. Keep in mind that device simulators are not always accurate, so be sure to test your final designs on real devices before publishing.