How to adapt overlays to various screen sizes
This guide shows how to use the Singular adaptive overlays' layout feature. It uses a composition with overlays adapted to three separate aspect ratios:
16:9 (landscape mode on phones and typical laptop/desktop screens)
4:3 (square aspect ratio on most tablets)
9:16 (portrait mode on most phones)
1. Download and open the composition used in this guide
Navigate to the Dashboard > Templates > Resources and download the Adaptive Overlays for Screen Size template.
2. Open and inspect the composition
Open the downloaded composition in Composer.
Double-click the Lower sub-composition in the composition tree and notice the "16:9 (Landscape Range)," "4:3 (Square Range)," and "9:16 (Portrait Range)" overlays.
These three overlays all present the same information but do so in layouts designed for the specific aspect ratios of various devices.
3. Assign aspect ratios to an overlay
Since the three overlays have already been already built, all that is left to do is activate the Adaptive feature and assign them a layout (portrait, square, or landscape) so Singular knows which layout to render on various devices.
Select the 16:9 (Landscape Range) folder.
In the property panel, select the Adaptive tab.
In the tab's drop-down menu, choose Layout and click Add.
Select Landscape to make this specific overlay only visible when a landscape range device views this output.
If you roll over the selection box, a popup shows the available aspect ratios for each layout. Each layout option covers a range.
4. Repeat step three
Repeat step three for the other two overlays in the composition.
Make sure to choose square for the "4:3 (Square Range)" overlays and portrait for the "9:16 (Portrait Range)" overlays.
5. Test in an output window
After you activate the adaptive overlay feature for all three sub-compositions, it's time to check your work in Composer. In this guide, you'll do this for the 9×16 (Portrait Range)" overlay.
To do this, you'll change the output window's Globals - Layout setting.
A. Set globals
Navigate to the data interface and control panel and select Globals > Layout > Portrait. The 9×16 (Portrait Range) overlay should be activated in the output window when you animate in the overlays.
This makes only overlays assigned to Portrait Layout visible in the composition tree, which is handy when you're authoring multiple aspect ratios in one composition.
B. Change output window aspect ratio
In the top right corner above the output window, change the window size to 1080×1920 (or the portrait resolution of your choice) to view your overlay at the correct aspect ratio.
Continue to step seven to test if your other overlays become visible when the output window is at their aspect ratios.
6. Take In an overlay in Studio
Click Click here to Add Overlay and select Lower.
Press the play button to take it In.
Your output window is in portrait mode because that was the last mode set in Composer.
7. Adjust the output settings
The last step is to adjust the output settings so that the overlays adapt to the layout settings defined in Composer.
Select the three dot button in the top right corner of Studio and select Output URL.
On the left panel of the pop-up window, select Advanced.
Choose Responsive in the Render Window Size drop-down menu.
Select the Adaptation Globals menu option in the left panel.
In the Layout drop-down menu, choose Automatic.
Copy and paste the App Output URL to a new Chrome browser tab and scale the browser window around the screen. Depending on the aspect ratio, different sized pre-built overlays will be displayed.
You can also paste your adaptive URL into Responsinator to test how responsive websites look on various devices.
Generate locked URL outputs from an instance of Singular Studio
To generate multiple locked URL outputs from one instance of Singular Studio
Add the screen size and layout to the end of an app's output URL.
For example, to lock the output of the app you used in this tutorial to 1920×1080: 16:9, add /Output?width=1920&height=1080&g_layout=landscape to the end of its output URL.
See the output here:
In a locked output ratio, scaling the output window won't activate the other overlay layouts.
Last updated
