Resizing your app with Responsive Layout
In today's world of multiple devices and form factors, you need a way to display your app perfectly whether the user is on the latest Mac Retina screen or a tiny Android handheld device. Enter the Responsive Layout Library!
First locate your Responsive Layout library on the Third Party tab of your account. Scroll down until you find the Enhancements Bundle. Download the bundle.
Unzip the download and double click the Installer stack:
When the stack opens in LiveCode, click the button (1) to install all your widgets and libraries. Once the bar has fully loaded, click the close button (2) :
You now need to go to Development > Plugins > magic palette and open Magic Palette:
Lets create a simple test stack to see how to apply the Responsive Layout library. I've created a new stack, and added a header bar, a field, a button and a footer bar.
I'm going to start by setting up the header and footer bars to always stick to the sides and stretch with the stack. Switch Magic Palette to the Geometry pane (1), then select the top bar (2):
You will have a dropdown menu in the Geometry manager. Select Fixed, and then in the new boxes that appear enter 0 for left, right and top. Do not enter 0 for bottom or your top bar will cover the entire app...
You should now see that your top bar is sticking to the sides and top. Try resizing the window, the bar should stretch with it. Repeat this for the bottom bar, but this time don't enter anything in the "top" box option. You should now have a stack with a navigation bar stuck to the top and bottom, no matter how you resize it.
I now want the objects in the middle of my app to remain centered, in the middle, when the app resizes. To do this, drag over the field and the button and group them:
These objects will now be acted on together by the Responsive Layout library. When you group them, you will see the dropdown options change. I'm going to align them centrally and prevent them from moving when the app resizes. To do this choose Center from the "Position" dropdown, then column from the "Container" dropdown.
We'll add some spacing around the objects and ensure they remain central. Set the MainAxisAlignment to "spaceEvenly" (1) and the CrossAxisAlignment to "center" (2). I want the button below the field, so I have set the verticalDirection to "up" (3).
Now when you resize the app, you will see that the field and the button maintain their position in the center.
What if I wanted the central field and button to scale appropriately when the app is resized? You can do that quite easily. Lets add a line graph object and see what we can do. As before, group the objects, then choose fixed as the Type (1). Now enter 100 in each of the boxes (2). Your group is now fixed to remain 100 pixels from the edge of your app all round.
Next choose Column from the Content box (1). For main axis alignment, I've chosen space evenly (2). Cross axis we want to stretch (3). I've set the vertical direction to up (4). Note that the order in which you add the objects to your interface will determine the order in which they are displayed.
We now have a set of UI objects in the app that will resize proportionally when the app is resized.
There are many other options and arrangements available in the Responsive Layout library. Play around a bit and try it out! You can download the sample stack for the above example here: