Screens
Screens are the foundation of an app— generating and organizing different screens allows you to start building a custom user experience.
All About Screens in Adalo
Learn the fundamentals of screens in Adalo in this short YouTube video.
Most Adalo apps automatically start with Signup, Login, and Home screens
Creating a New Screen
There are two ways you can create a screen.
From the Add Panel
Click the "+" button in the left toolbar
Select the Add Screen Tab
You can then select a Screen Template for your new screen
From a Link Action
Select a component on an existing screen
In the left panel, click "Add Action"
Choose Link, then "New Screen..."
A Modal will appear where you can set the name from your new screen and choose a Screen Template
Editing a Screen
To Edit a screen, click on its title on the canvas. The screen's properties will be visible in the left panel
Set the Screen's Name
Naming screens is an important step of creating your app— make sure your screen labels are clear and differentiated
Set the Navigation Type
Normal - This is what nearly all screens in your app should be set to
Welcome Screen - This is the first screen your users will see if they are not logged in or haven't created an account yet.
Home Screen - This is the screen your users will start on if they've already created an account on your app and are still logged in.
Add Screen Actions
Most screen will not need screen actions, but there are certain cases where they can be very useful.
If you need to have a record automatically created without your user clicking or tapping anything, you can do this with a screen action. You can create one screen action to automatically create the record and another screen action to automatically link them to another screen.
Edit Screen Styles
Screen background color
Screen size
Status Bar text color (mobile only)
Reverse scroll
This is a common option for chat or messaging screens where you want the bottom of the list to be visible when the user gets to the screen and they need to scroll up to see earlier messages
To Resize a screen
Click the screen's name on the canvas and use the yellow drag handles on the corners of the screen to resize it.
To Move a screen
On the canvas, click and hold the name of the screen, then move your mouse to where a new spot on the canvas. It can be helpful when building an app to keep your screens organized into related groups so you can easily find each screen to make edits.
To Delete a screen by selecting the screen's title and pressing 'Delete' or backspace on your keyboard
Last updated
