Skip to main content

Creating a Layout in LiveCode Create

In LiveCode Create, a Layout represents a single screen or view in your app. Whether you’re designing a home screen, a settings page, or a modal dialog, layouts are the foundation for building your app’s interface. This guide will explain how to create and manage layouts effectively.

What is a Layout?​

A Layout is a collection of widgets (buttons, lists, fields, etc.) and containers displayed together to form a screen or view within your app. Layouts are versatile and can be used for:

  • Standard app screens (e.g., dashboards, home pages).
  • Dialogs or modals that appear temporarily.
  • Interactive forms or pages to display data.

Layouts sit on the Canvas Area in the App Building Environment, where you can visually design and edit them.

Creating a New Layout​

To create a new layout:

  1. Open your project in LiveCode Create.
  2. Navigate to the Project Browser in the left-hand toolbar.
  3. At the top of the Project Browser, click the Plus Icon (➕) to add a new layout.
  4. Give your layout a descriptive name (e.g., “HomeScreen”, “SettingsPage”).

Your new layout will appear in the Project Browser and will be displayed on the Canvas Area for editing. You can configure your layout using the Property Inspector to set properties such as the layout size and background color.

Tip: Using descriptive names for your layouts like “LoginScreen” or “ProfilePage” will make it easy to keep track of them.

You can switch between different layouts in your project using the Project Browser:

  1. Open the Project Browser.
  2. Click on the name of the layout you want to edit.
  3. The selected layout will appear on the Canvas Area, replacing the previously active layout.

Adding Widgets and Containers to a Layout​

Widgets are the building blocks of your layout. Use the Tools Palette to add widgets like buttons, text fields, images, and lists to your layout. You can also drag containers out from the Tools Palette to organize your widgets into groups to easily position them using Responsive Layout.

Steps:

  1. Open the Tools Palette from the left-hand toolbar.
  2. Drag and drop a widget onto the Canvas Area (the active layout).
  3. Use the Property Inspector to customize the widget’s appearance, behavior, and data binding.

Example:

  • Add a Button Widget and customize its label to “Submit”.
  • Add a Simple List Widget to display tasks from your datastore.

Adding Widgets to a Layout

Working with Layout Breakpoints​

Breakpoints allow you to design responsive layouts that adapt to different screen sizes (e.g., mobile, tablet, and desktop).

Switching Between Breakpoints​

  1. In the Canvas Controls above your layout, locate the Breakpoint Selector.
  2. Select the desired screen size:
    • Small: For mobile screens.
    • Medium: For tablets.
    • Large: For desktops.
  3. Customize the size and position of the widgets on your layout for each breakpoint by setting their properties in the Property Inspector. This will ensure your app looks great on all devices.

Tip: Changes made in one breakpoint can cascade down to smaller sizes unless overridden.

Desktop Layout Breakpoint Example
Tablet Layout Breakpoint Example
Mobile Layout Breakpoint Example

Learn more: Designing a Responsive Layout

Managing Layouts​

The Project Browser makes it easy to manage layouts in your project:

  • Rename a Layout: Right-click the layout in the Project Browser and select Rename.
  • Duplicate a Layout: Right-click the layout and choose Duplicate to make a copy.
  • Delete a Layout: Right-click the layout and select Delete to remove it.

Note: Deleting a layout will remove all of the widgets, actions, and code associated with it.

Using Layout Controls​

Above the Canvas Area, there are quick controls for managing layouts:

  • Add Layout: Create a new layout quickly using the ➕ button.
  • Delete Layout: Remove the currently active layout using the Delete Icon.
  • Switch Breakpoints: Toggle between different screen sizes using the Breakpoint Selector.
  • Resize Layout: Easily resize the layout using the resize handles located around the edges of the layout.

These controls help streamline your workflow while designing layouts.

Example Workflow: Creating a Home Screen Layout​

Follow these steps to create a simple home screen layout:

  1. Create a Layout:

    • Click the Plus Icon in the Project Browser to create a new layout.
    • Name it “HomeScreen”.

  2. Add Widgets:

    • Drag a Label Widget onto your layout and set the text to “Welcome to My App”.
    • Add a Button Widget and customize its label to “Get Started”.

  3. Customize Widgets:

    • Use the Property Inspector to set the text size, alignment, and colors for each widget.

  4. Test Responsiveness:

    • Use the Breakpoint Selector to adjust the layout for mobile, tablet, and desktop views.

Home Screen Layout Example

Tips for Creating Effective Layouts​

  • Reuse Layout Patterns: Duplicate existing layouts to save time when creating similar screens.
  • Group Related Widgets: Use containers to group widgets and keep layouts organized.
  • Test Across Breakpoints: Ensure your layout works well on all screen sizes.
  • Use Consistent Styling: Apply consistent colors, fonts, and spacing across all layouts using the Theme Editor.

For further learning:

Thank you for your feedback!

Was this page helpful?