Thunkable Docs
Build an AppDrag and Drop DocsSnap to Place DocsAcademy
Drag and Drop
Drag and Drop
  • What is Thunkable?
  • 🗺️Getting Started
    • Getting Started Guide
    • Keyboard Shortcuts
    • Undo Redo
    • Thunkable Account
      • Account Management
    • Preview and Test your App
    • Versioning
    • Data Sources
      • Google Sheets Data Source
      • Airtable Data Source
      • Webflow Data Source
      • Local Table Data Source
    • Project Collaboration
      • Organizations
    • 🎓Sample Apps & Tutorials
      • Thunkable Community Forums
      • Sample Apps
      • Video Tutorials
        • Thunkable Live App
          • How to Test and Troubleshoot with Thunkable Live App
        • Data Source Tutorials
          • Connecting to Data Sources
            • Google Sheets
            • Local Table
          • Create Data in a Thunkable Data Source
          • Read Data in a Thunkable Data Source
          • Update Data in a Thunkable Data Source
          • Delete Data in a Thunkable Data Source
        • User Auth & Management
          • Firebase
            • User Sign-Up, Sign-In, and Auth
            • User Sign Out and Password Reset
          • Google
            • User Sign-Up, Sign-In, Sign-Out, and Auth
          • Apple
            • User Sign-Up, Sign-In, Sign-Out, and Auth
        • Projects
          • How to Save Versions of Your Thunkable Project
          • How to Copy and Customize Public or Sample Thunkable Projects
        • User Interface & Design
          • Screens
            • Save and Reuse Thunkable Screens
            • Change Thunkable Screens with a Button Click
            • Create Scrollable Screens in Your Thunkable App
          • Navigators
            • How to Use the Thunkable Stack Navigator
            • How to Use Thunkable Top and Bottom Tab Navigators
            • How to Use the Thunkable Drawer Navigator
            • Combine Figma Frames with Thunkable Navigators
          • Components
            • How to Use the Visibility Property to Create Modals in Thunkable
          • Data Visualization
            • Customize a Data Viewer
          • Text
            • Implement Text Input Validation
        • Alerts & Notifications
          • Display Alert Messages in Your Thunkable App
          • How to Create Three-Button Alert Messages
        • Files
          • Cloudinary
            • Store and Access Cloudinary Files in Your Thunkable App
        • Camera
          • How to Use the Device’s Camera
          • How to Use the Device’s Video Camera
          • Use the Device’s Camera as a QR or Barcode Scanner
        • Realtime Databases
          • Firebase
            • How to Read Data in a Firebase Realtime Database
            • How to Update Data in a Firebase Realtime Database
        • Advanced Blocks
          • Connect Your Thunkable App to a Web API
        • Thunkable Academy
          • Building Your First Thunkable App
            • Getting Started with Thunkable
            • How to Design a Thunkable App
            • How to Connect a Thunkable App to a Data Source
            • How to Make A Thunkable App Interactive with Blocks
          • Thunkable No Code App Creation Basics
            • Thunkable UI Components and App Features
            • Understanding Thunkable's Drag and Drop Block Builder
            • Design, Develop, Debug, and Deploy Your App
        • Hour of Code
          • 2021 - Build an Informational App
          • 2022 - Build a Scavenger Hunt App
          • 2023 - Build a Translator and Text-to-Speech App
        • App Building
          • How to Build a Translation App in Thunkable
          • How to Create an Image Recognition App with Thunkable
          • How to Create a Text-to-Speech App in Thunkable
  • 🎨App Design
    • User Interface (UI) Components
      • Basic Components
        • Button Component
        • Label Component
        • Rich Text Component
        • Image Component
        • Text Input Component
        • Layout Component
        • Group Component
      • Data Components
        • Simple List Component
        • Data Viewer Components
          • Data Viewer List Component
          • Data Viewer Grid Component
          • Custom Data Viewer
      • Input Components
        • Switch Component
        • Slider Component
        • Checkbox Component
        • Date Input Component
        • Time Input Component
      • Media Components
        • Animation Component
        • Video Component
        • Loading Icon Component
      • Embed Components
        • Web Viewer Component
        • Map Component
        • Canvas Component
        • PDF Reader Component
        • Rating Component
      • Modules
        • Introduction
        • User Guide
      • Generative AI
    • Screens
      • Save and Reuse Screens
      • Improve Thunkable Load Time
    • Navigators
      • Top Tab Navigator
      • Bottom Tab Navigator
      • Drawer Navigator
      • Stack Navigator
    • Figma Integration
  • 🛠️Blocks
    • Thunkable Blocks Overview
    • Core Blocks
      • Control Blocks
      • Logic Blocks
      • Math Blocks
      • Text Blocks
      • Lists Blocks
      • Color Blocks
      • Device Blocks
      • Objects Blocks
      • Variables Overview
        • Connect a Firebase Realtime Database
        • Variables Blocks
      • Functions Blocks
    • App Features Blocks
      • Speech Blocks
      • Sound Blocks
      • Share Blocks
      • Camera Blocks
      • Files Blocks
      • Sign In Blocks
        • User Sign Up, Sign In, and Authentication with Firebase
        • User Sign Up, Sign In, and Authentication with Google
        • User Sign Up, Sign In, and Authentication with Apple
      • Location Blocks
      • Push Notification Blocks
      • In-App Purchase Blocks (with RevenueCat)
      • Data Sources Blocks
      • Alerts Blocks
      • Timer Blocks
      • Sensors Blocks
        • Gyroscope
        • Magnetometer
        • Accelerometer
        • Location Sensor
      • Ads by AdMob
    • Advanced Blocks
      • Web APIs Blocks
        • CORS Policy
        • 🆓No Auth APIs
          • Update Data in a Data Source
          • CRUD Operations
          • Setting Headers
        • 📊Charting APIs
          • Create a chart template
          • Charting in Thunkable
      • Bluetooth Low Energy Blocks
      • OpenAI Services ChatGPT Integration Blocks
      • "Any Component" Blocks
      • JavaScript Web Bridge
  • ⚙️Settings
    • App Settings
      • Tablet View
    • Assets
    • Cloud Variable Viewer
    • Manage your Projects
      • My Projects Page
      • Thunkable Projects
      • Duplicate Project
      • Share Your App
      • Download Your App
        • Download Your App on iOS
        • Download Your App on Android
      • Add to Home Screen
      • Managing Project Storage
      • App Data Privacy
      • Delete Project
  • 📱Publishing
    • Overview
    • Publish to the Apple App Store
      • User Guide
      • Troubleshooting
      • Review Process
      • Tracking Usage Description
    • Publish to Google Play Store
      • User Guide
      • Troubleshooting
      • Review Process
    • Publish as a Web App
      • User Guide
      • Custom Domains
      • Troubleshooting
    • Testing
      • Testing on iOS via TestFlight
      • Testing on Android
    • Troubleshooting
      • Publishing Checklist
      • Generate Screenshots
  • 🎮Gaming
    • Gaming Overview
      • Canvas Label
      • Sprites
      • Sprite Gallery
    • Gaming Blocks
      • Events
      • Motion
      • Looks
      • Direction
      • Sensing
      • Add & Remove
      • Stage
  • 🗃️Additional Resources
    • Release Notes
      • Release Notes 2024
      • Release Notes 2023
    • Troubleshooting
      • Can't Sign in to Thunkable?
      • FAQs
    • Minimum Requirements
    • Bugs and Product Feedback
    • App Services and Emulators
Powered by GitBook
On this page
  • Overview
  • Add a Layout to a Screen
  • Insert Additional Containers
  • Add UI Components
  • Layout Properties
  • Alignment
  • Layout
  • Image
  • Style
  • Spacing
  • Container Properties
  • Alignment
  • Layout
  • Image
  • Style
  • Spacing
  • Layout Blocks
  • Container Blocks
  • Related Docs
  • Custom Data Viewer

Was this helpful?

Export as PDF
  1. App Design
  2. User Interface (UI) Components
  3. Basic Components

Layout Component

PreviousText Input ComponentNextGroup Component

Last updated 1 year ago

Was this helpful?

Overview

Thunkable’s layout component allows for more precise positioning of UI components on an app screen, by allowing you to position UI components dependent on other UI components on the screen. For example, in a typical sign-in screen, if a user inputs an incorrect email address or password, a screen built with a layout component allows you to shift the UI components on the screen to display the error messaging to the user.

Add a Layout to a Screen

To add a layout component to a screen:

  1. Drag and drop the layout UI component onto a screen. You’ll notice it is composed of two containers, one on top of the other.

  2. Click and drag the sizing handles in the corners to resize the layout UI component.

  3. Click and drag to reposition it.

Insert Additional Containers

By default, a newly added layout has two horizontal containers arranged vertically, one on top of the other. To insert additional containers to a layout:

  1. Click to select the layout UI component in the component tree or within the screen.

  2. At the top of the layout's properties panel, select whether you want to insert a horizontal or vertical Container. ∙ Horizontal Container - UI components within the container are aligned horizontally, side by side ∙ Vertical Container - UI components within the container are aligned vertically, on top of each other

  3. Identify into which layout or container you want to insert the new container.

  4. Click Add.

Add UI Components

To add UI components to a layout:

  1. Drag and drop UI components into a container on a screen.

  2. Once UI components are in a container, rearrange their order by dragging and dropping their component names in the component tree.

Layout Properties

The following properties are configured on the right in the layout's properties panel.

Alignment

Property
Value
Description

Direction

vertical

The elements directly within the layout (could be a UI component or a container) are aligned vertically, on top of each other.

Direction

horizontal

The elements directly within the layout (could be a UI component or a container) are aligned horizontally, side by side.

Vertical / Horizontal Alignment

top

The elements directly within the layout (could be a UI component or a container) are positioned at the top of the layout.

Vertical / Horizontal Alignment

bottom

The elements directly within the layout (could be a UI component or a container) are positioned at the bottom of the layout.

Vertical / Horizontal Alignment

left

The elements directly within the layout (could be a UI component or a container) are positioned at the left of the layout.

Vertical / Horizontal Alignment

right

The elements directly within the layout (could be a UI component or a container) are positioned at the right of the layout.

Vertical / Horizontal Alignment

center

The elements directly within the layout (could be a UI component or a container) are positioned in the center of the layout (either top to bottom or left to right, depending on the selected direction).

Vertical / Horizontal Alignment

space-between

The elements directly within the layout (could be a UI component or a container) are positioned with an equal amount of space between them.

Vertical / Horizontal Alignment

space-around

The elements directly within the layout (could be a UI component or a container) are positioned with an equal amount of space between them, including at the top and bottom for a vertical direction layout or left and right for a horizontal direction layout.

Scrollable

true/on

The user can scroll within the layout.

Scrollable

false/off

The user cannot scroll within the layout.

Scroll Bar Visible

true/on

The scroll bar is visible to the user.

Scroll Bar Visible

false/off

The scroll bar is not visible to the user.

Horizontal Alignment Examples

Vertical Alignment Examples

Layout

Property
Value
Description

X

coordinate value

Position of the upper left corner of the layout on the X-axis, where the left side of the screen is X=0.

Y

coordinate value

Position of the upper left corner of the layout on the Y-axis, where the top of the screen is Y=0.

Height

number in pixels

The layout’s height is defined by a custom number of pixels.

Width

number in pixels

The layout’s width is defined by a custom number of pixels.

Resize Mode

Stretch

Stretches the layout to fit the dimensions of the device's screen.

Resize Mode

Float in Place

Renders the layout in the same aspect ratio as the design, regardless of the device size.

Image

Property
Value
Description

Background Picture

Upload files

Click to upload an image file.

Background Picture

Type in URL

Type in an image URL.

Background Picture Resize Mode

cover

Fills the entire layout without changing the height and width ratio of the image.

Background Picture Resize Mode

contain

The entire image is scaled down to fit inside the layout, without changing the height and width ratio of the image.

Background Picture Resize Mode

stretch

The image's height will change to fill the layout length-wise.

Background Picture Resize Mode

repeat

The image repeats to cover the layout. The image's height and width ratio do not change.

Background Picture Resize Mode

center

The image is positioned in the middle of the layout.

Style

Property
Value
Description

Visible

visible

Users can see the layout.

Visible

invisible

Users cannot see the layout.

Background Color

color

The background color of the layout.

Border: Style

solid

The layout’s border is a solid line.

Border: Style

dotted

The layoutt’s border is a dotted line.

Border: Style

dashed

The layout’s border is a dashed line.

Border: Color

color

The layout’s border is the color selected.

Border: Width

number in pixels

The width of the layout’s border is defined by a custom number of pixels.

Border: Radius

number in pixels

The radius of the layout border’s corners is defined by a custom number of pixels.

Shadow: Color

color

The layout’s shadow is the color selected.

Shadow: Opacity

number between 0 and 100

The opacity of the layout’s shadow.

Shadow: Radius

number in pixels

The radius of the layout shadow’s corners is defined by a custom number of pixels.

Shadow: Offset

number in pixels

How far the layout’s shadow should be offset, in height and width, is defined by a custom number of pixels.

Spacing

Property
Value
Description

Margin

top

The margin between the layout’s top border and the next UI component as defined by a custom number of pixels.

Margin

bottom

The margin between the layout’s bottom border and the next UI component as defined by a custom number of pixels.

Margin

left

The margin between the layout’s left border and the next UI component as defined by a custom number of pixels.

Margin

right

The margin between the layout’s right border and the next UI component as defined by a custom number of pixels.

Padding

top

The padding between the layout and its top border as defined by a custom number of pixels.

Padding

bottom

The padding between the layout and its bottom border as defined by a custom number of pixels.

Padding

left

The padding between the layout and its left border as defined by a custom number of pixels.

Padding

right

The padding between the layout and its right border as defined by a custom number of pixels.

Container Properties

The following properties are configured on the right in the container's properties panel.

Alignment

Property
Value
Description

Direction

vertical

UI components within the container are aligned vertically, on top of each other.

Direction

horizontal

UI components within the containerntainer are aligned horizontally, side by side.

Vertical / Horizontal Alignment

top

UI components are positioned at the top of the container.

Vertical / Horizontal Alignment

bottom

UI components are positioned at the bottom of the container.

Vertical / Horizontal Alignment

left

UI components are positioned at the left of the container.

Vertical / Horizontal Alignment

right

UI components are positioned at the right of the container.

Vertical / Horizontal Alignment

center

UI components are positioned in the center of the container (either top to bottom or left to right depending on the selected direction).

Vertical / Horizontal Alignment

space-between

UI components are positioned with an equal amount of space between them

Vertical / Horizontal Alignment

space-around

UI components are positioned with an equal amount of space between them, including at the top and bottom for vertical direction containers or left and right for horizontal direction containers.

Scrollable

true/on

The user can scroll within the container.

Note: When setting a container as scrollable, we recommend the size of the UI components within it be set to an absolute pixel value or Fit Contents.

Scrollable

false/off

The user cannot scroll within the container.

Scroll Bar Visible

true/on

The scroll bar is visible to the user.

Scroll Bar Visible

false/off

The scroll bar is not visible to the user.

Layout

Property
Value
Description

Height

Fit contents

The container’s height is the same as the tallest UI component or container within it (horizontal direction) or the stacked UI components or containers within it (vertical direction).

Height

Fill container

The elements directly within the container (could be a UI component or another container) fill the container vertically.

Height

Size (e.g. 50px or 50%)

The container’s height is defined by a custom number of pixels or percentage of the screen.

Width

Fit contents

The container’s width is the same as the widest UI component or container within it (vertical direction) or the side-by-side UI components or containers within it (horizontal direction).

Width

Fill container

The elements directly within the container (could be a UI component or another container) fill the container horizontally.

Width

Size (e.g. 50px or 50%)

The container’s width is defined by a custom number of pixels or percentage of the screen.

Image

Property
Value
Description

Background Picture

Upload files

Click to upload an image file.

Background Picture

Type in URL

Type in an image URL.

Background Picture Resize Mode

cover

Fills the entire screen without changing the height and width ratio of the image.

Background Picture Resize Mode

contain

The entire image is scaled down to fit inside the screen, without changing the height and width ratio of the image.

Background Picture Resize Mode

stretch

The image's height will change to fill the screen length-wise.

Background Picture Resize Mode

repeat

The image repeats to cover the screen. The image's height and width ratio do not change.

Background Picture Resize Mode

center

The image is positioned in the middle of the frame.

Style

Property
Value
Description

Visible

visible

Users can see the container.

Visible

invisible

Users cannot see the container.

Background Color

color

The background color of the container.

Visible

solid

The container’s border is a solid line.

Visible

dotted

The container’s border is a dotted line.

Visible

dashed

The container’s border is a dashed line.

Border: Color

color

The container’s border is the color selected.

Border: Width

number in pixels

The width of the container’s border is defined by a custom number of pixels.

Border: Radius

number in pixels

The radius of the container border’s corners is defined by a custom number of pixels.

Shadow: Color

color

The container’s shadow is the color selected.

Shadow: Opacity

number between 0 and 100

The opacity of the container’s shadow.

Shadow: Radius

number in pixels

The radius of the container shadow’s corners is defined by a custom number of pixels.

Shadow: Offset

number in pixels

How far the container’s shadow should be offset, in height and width, is defined by a custom number of pixels.

Spacing

Property
Value
Description

Margin

top

The margin between the container’s top border and the next container as defined by a custom number of pixels.

Margin

bottom

The margin between the container’s bottom border and the next container as defined by a custom number of pixels.

Margin

left

The margin between the container’s left border and the next container as defined by a custom number of pixels.

Margin

right

The margin between the container’s right border and the next container as defined by a custom number of pixels.

Padding

top

The padding between the container and its top border as defined by a custom number of pixels.

Padding

bottom

The padding between the container and its bottom border as defined by a custom number of pixels.

Padding

left

The padding between the container and its left border as defined by a custom number of pixels.

Padding

right

The padding between the container and its right border as defined by a custom number of pixels.

Layout Blocks

To access the blocks specific to the layout component:

  1. Navigate to the Blocks tab.

  2. In the component tree on the left, click the Layout component.

  3. A drawer of layout-specific blocks opens.

Block Image
Description

If the layout is scrollable, you can use this block to scroll the user to the end of the layout. For example, a user clicks a button in a chat app, and the layout scrolls to the end of the chat history to see the most recent messages.

If the layout is scrollable, you can use this block to scroll the user to the start of the layout.

Sets the layout’s height to a custom number of pixels.

Gets the layout’s height in pixels.

Gets the layout’s computed height, the on-screen dimensions of the layout, after it has been rendered on-screen. The value returned is an integer, representing the layout's height in pixels.

Sets the layout’s width to a custom number of pixels.

Gets the layout’s width in pixels.

Gets the layout’s computed width, the on-screen dimensions of the layout, after it has been rendered on-screen. The value returned is an integer, representing the layout's width in pixels.

When set to true, it sets the layout to visible, meaning the layout is visible to users.

When set to false, it sets the layout to invisible, meaning the layout is not visible to users.

Gets the layout’s visibility status. Returns true (visible) or false (invisible).

Set the position of the upper left corner of the layout on the X-axis, where the left side of the screen is X=0.

Get the position of the upper left corner of the layout on the X-axis, where the left side of the screen is X=0.

Set the position of the upper left corner of the layout on the Y-axis, where the top of the screen is Y=0.

Get the position of the upper left corner of the layout on the Y-axis, where the top of the screen is Y=0.

Set the layout’s background color.

Get the layout’s background color.

Set the layout's background picture. Click the dropdown menu to select an image from your computer.

Get the layout's background picture.

Set the layout’s background picture resize mode. See the layout Properties section for definitions of the acceptable values.

Get the layout’s background picture resize mode.

When set to true, it sets the layout to scrollable for users.

When set to false, it sets the layout to scrollable for users.

Gets the Layout’s scrollable status. Returns true (scrollable) or false (not scrollable).

When set to true, it sets the layout’s scroll bar to be visible to users.

When set to false, it sets the layout’s scroll bar to invisible for users.

Gets the layout’s scroll bar visibility status. Returns true (visible) or false (invisible).

Container Blocks

To access the blocks specific to the container component:

  1. Navigate to the Blocks tab.

  2. In the component tree on the left, click the Container component that is nested under the layout component.

  3. A drawer of container-specific blocks opens.

Related Docs

Custom Data Viewer

The layout component is the foundation of custom data viewers, which allows for more precise positioning of UI components on an app screen.

The blocks are the same as the ones above in the , but specific to the container instead of the layout.

Have feedback on this doc? Please take a moment to share your feedback here: . Your valuable insights will help us improve and better serve you in the future.

🎨
Custom Data Viewer
Thunkable Docs Feedback
Layout Blocks section