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. 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.
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! You can download the sample stack for the above example here:
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
Celeste Helling
@Panos The navigation bar is fixed to the left, top and right. The 20 buttons and the group are not fixed by the responsive layout. The buttons size and portion are not locked as well. Thanks for looking at the video.
Panos Merakos
Hello Celeste,
Thanks for the update. Could you also send me the stack? I am unable to reproduce this issue here, so I am wondering if any of the objects has a property or such that is causing different results. You can upload the stack to wetransfer and post the link.
Kind regards,
Panos
Panos Merakos
Thanks Celeste. I have tested using your stack and I cannot reproduce this issue. I think I know the reason - I just had another look in your screen recording and it seems you're using an older version of the magic palette (v1.4.3) but I am using the most recent version (v1.4.7). So it might be the case what you see is a bug in this older version. You can find the most recent version of the mega bundle in your account area.
Hope this helps.
Celeste Helling
@Panos Thanks for looking at it. I will check for the update.
CAsba
I logged into my LiveCode account but there was no Third Party tab. This mystifies me, what did I do wrong ?
CAsba
Third party tab not showing on menu.
Panos Merakos
@CAsba
The Thirdparty tab appears only if you have purchased any third party products with your LiveCode account. Have you purchased the enhancements bundle? If yes, what is the email address you have used?
Kind regards
Javier Miranda
Hi, Can you please help me find the Responsive Layout Library? I am at Products/Third Party of my account, but there is not such item.
Heather Laine
If you don't already own the Responsive Layout extension you can purchase it from our extensions store:
https://livecode.com/extensions/
Alan Green
Should the Responsive Layout detect different Android and iPad resolutions automatically and resize the Header and Navigation widgets automatically, or will these still need to be handled by resizeStack? Thanks.
Panos Merakos
Hello Alan,
Yes, this is possible, as long as the Responsive Layout is set to resize the Header and NavBar widgets depending on the width of the card.
Hope the helps.
Kind regards,
Panos
--
Lloyd Merithew
This would be a whole lot simpler to understand if you supplied a working sample stack.
Heather Laine
Hi Lloyd, I've just uploaded a basic sample stack for the lesson.