Introduction to Adaptive Overlays

New to the platform is the advanced Adaptive Overlays feature. Adaptive overlays adjust depending on the type of device they are rendered. This creates yet another layer of customization and personalization for the viewer.

This quick tutorial will show one example of the Adaptive Overlays feature set - Layout. We have created a single Composition that accounts for three separate aspect ratios as seen below:


"Landscape" a mobile phone held horizontally or a typical laptop or desktop monitor.



Square range. Many tablets use the more traditional 4:3 aspect ratio.



Portrait, which is a typical mobile device held vertically.


1 - Download "Adaptive Overlays Intro Example" Composition

Download the "Adaptive Overlays Intro Example" Composition from the Resources section of the Marketplace.

Download "Adaptive Overlays Intro Example" from the Marketplace


2 - Open and Inspect the Composition

Open your recently downloaded Composition. Dig into the "Main Overlay" Subcomposition within the Composition Tree and note that there are three pre-built overlays called "16:9 (Landscape)", "4:3 (Square)" and "9:16 (Portrait)". These overlays present all the same information but in unique layouts designed for specific aspect ratios for different devices. 

Open Composition


All you have to do, now that the three unique overlays have been built, is activate the Adaptive Overlays feature and assign the overlays according to Layout (Portrait, Square, and Landscape) so Singular knows which Layout to render on various devices.

3 - Select Adaptive Tab, Add "Layout"

Select the first overlays group folder, "16:9 (Landscape)", and select the "Adaptive" tab within the Property Panel. This is where you'll activate the Adaptive Overlays feature. Next, select "Layout" and then click "add". 

 Add "Layout" in the "Adaptive" Tab


You have just made the Layout Adaptive for this 16:9 overlay.

4 - Choose Layout

Select "Landscape" because we want this specific overlay, designed only for landscape screens, visible when a Landscape device is viewing this output.

Choose Layout


If you roll over the selection box, a popup will show the aspect ratios that are handled for each layout. Each of the layout options cover a range.

5 - Repeat

Follow steps 3-for the other two overlays in the "Main Overlay" Subcomposition.

Instead of choosing the "Landscape" option for the Layout, make sure to choose "Square" for the "4:3 (Square)" overlay and choose "Portrait" for the "9:16 (Portrait)" overlay.

6 - Test (view in Output Window)

After you've activated the Adaptive Overlay feature for the Layout of all three overlays, you'll want to check your work. To do this, you'll have to change the Output Window's Globals - Layout setting. We'll do this for the "9x16 (Portrait)" overlay. 

A - Set the Global

Have the "9x16 (Portrait)" overlay selected, jump over to the Data Interface and Control Panel and select the "Globals" tab. Then go to the "Layout" dropdown menu and select "Portrait". The "1080x1920 (Portrait) overlay should be activated in the Output Window.

This will make only Overlays you have assigned to Portrait Layout visible in the Composition Tree, and a very handy feature when authoring multiple aspect ratios within one Composition.

Set Layout Global


B - Change Output Window Aspect Ratio

Next, change the Output Window size to 1080x1920 (or any "Portrait" resolution you prefer) to view your overlay at the correct aspect ratio.

Change Output Window Aspect Ratio



Follow this step (7) in order to test if your other overlays become visible when the Output Window is at their aspect ratios. 

7 - Open Composition in Studio

Open this Composition in a Control Application. For this example, we'll use Singular's Studio.

After importing the Composition into Studio, add the "Main Overlay" overlay and take it in. 

Open the Composition in Studio



Your Output Window is in Portrait mode because that was the last mode set in Composer.

8 - Adjust Output Settings

The last step is to adjust the output settings so that your overlays can be adaptive to the Layout settings you defined in Composer.

Hi the Share button in the upper right corner of Studio. On the left panel of the pop-up window, select "Advanced". Then choose Responsive in the dropdown menu for the Render Window Size.

Choose "Responsive" for Render Window Size


Next, click the Adaptation Globals menu option in the left panel. Under the Layout option, choose Automatic. 

Add "Layout" Adaptive Globals


Copy and paste the App Output URL to a new Chrome Browser and scale the Browser window around the screen. Depending on what the aspect ratio is, one of the three overlays will be activated.

Test the Adaptive Globals feature in a browser



You can also try pasting the above URL into Responsinator. It is a handy website for testing what responsive websites will look like on various devices.

Additional Tip

You can also generate multiple different URL outputs from the same instance of Singular Studio.

In the example below, the output URL will be locked 1920x1080: 16:9. 

This is the url (notice the end of the URL):

Locked 1920x1080 Output URL


Here is the locked 1920x1080 output URL in a browser window: 


In a locked output ratio, scaling the output window will not activate the other overlay layouts.

Locked 1920x1080 Output URL in browser window

Was this article helpful?
4 out of 4 found this helpful



Please sign in to leave a comment.