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!

Download and Install the 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) :

Open Magic Palette

You now need to go to  Development > Plugins > magic palette and open Magic Palette:

Create a Test Stack

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.

Grouping objects

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.

Now when you resize the app, you will see that the field and the button maintain their position in the center.

Scaling a UI Object.

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!

9 Comments

Stam

Nice walkthrough - but really needs clear documentation. It can't be used as is by someone who doesn't know how to use it. There are many options which really aren't clear what they do and how they should be used.

I played around with the field/button group and was hoping to introduce some separation between the two but ended up with multiple 'layout errors' reporting a number of pixels overflow and at some point something happened and no matter what values i picked in the drop downs i was stuck with the same options, none of which made much sense. In the end i had to delete the group and recreate it to get further.

Why does changing the padding/margins in left or top or right or bottom change all 4 values to the same number? What is the point of having 4 fields if you can't assign different numbers to any of them? And so on...

Clearly this has potential, but without clear explanation of how to use it this won't be useful to man or beast!
It's easy to recreate the example above, but venturing beyond that seems to invariably lead to failure... (for me anyway...)

Celeste Helling

How do you establish the child controls? I keep getting an error that child controls are required.

Heather Laine

Hi Stam, thank you for the feedback. I absolutely agree more documentation is needed and we will create and post more lessons on various aspects as soon as we can.

Stam

Thanks Heather, that would very much be appreciated - and I know it takes time to do a good tutorial. In the mean time, even a listing of each setting and it's meaning would probably help...

Panos Merakos

@Celeste
You just choose the controls you want to place in the group (using shift+click) and then click on the "Group" button in the LiveCode menubar.

Celeste Helling

@Panos
I did group the controls before trying to set the responsive layout options. I actually followed the example in this article. Do you have any other suggestions? Thanks!

Panos Merakos

@Celeste
Thanks for the update. I have followed the lesson and do not see that issue. Could you post a short screen recording that shows the problem? You can upload it to weTransfer/dropBox/elsewhere and post the download link here.

Kind regards

Celeste Helling

This is the download link

https://wetransfer.com/downloads/2be184e97e6dd22f853bbfa59e32e91720220816205941/f32b9029e98a9eadc9302aeccc13411b20220816205954/df29ba

Two things: 1. If I tried to group select, Livecode crashed with the screen recording on. 2. After selecting column in the content section, I have to select the browse tool and then switch to the edit tool for the alignment options to show. The options do not populate. The same error happens.

Panos Merakos

Hello Celeste,
Thank you for the video. I think you get that error because the buttons inside the group have all their position type (in the magic palette) set to "fixed". When a child control has its position type set to "fixed" it is ignored by the container. So, if you change the position type from "fixed" to empty for each button, then hopefully the error should go away.

King regards
Panos

Add your comment

E-Mail me when someone replies to this comment

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.