Adaptive Overlays for Screen Size

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 Singular Adaptive Overlays feature set - Layout. We have created a single Composition that has overlays which adapt for three separate aspect ratios as seen below:


Landscape is 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 for Screen Size" Resource Composition

Download the "Adaptive Overlays for Screen Size" Composition from the Resources section of the Template Library.

Download "Adaptive Overlays for Screen Size" Resource


2 - Open and Inspect the Composition

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

Open Composition and Inspect


Since the overlays are already built, you just have to 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 Range)", 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 range 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 4 overlays in the Composition.

Make sure to choose "Square" for the "4:3 (Square Range)" overlays and choose "Portrait" for the "9:16 (Portrait Range)" overlays.

6 - Test (view in Output Window)

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

A - Set the Global

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 "9x16 (Portrait Range) overlays should be activated in the Output Window when you animate in the overlays.

Notice that 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

Within the top right corner over the Output Window, change window the 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 into Studio.

After importing the Composition into Studio, add the Lower 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.

Hit the three dot button in the upper right corner of Studio and select "Output URL". 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, the different sized pre-built overlays will be displayed.

Test the Adaptive Globals feature in a browser



You can also try pasting your adaptive 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 locked 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.

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



Please sign in to leave a comment.