Skip to main content

Building Responsive Layouts for a Simple To-Do List App


Overview​

This guide will walk you through building a responsive layout for a simple To-Do List app in LiveCode Create. By the end of this guide, you will have a clean, flexible layout that adapts to desktop, tablet, and mobile screens. You'll work with Navigation Rails, Navigation Bars, and Dynamic Positioning to create a UI that changes based on the device size.

You can follow along step-by-step or use this guide alongside the accompanying video.

Steps to Build Your To-Do List App​

1. Add and Configure the Navigation Rail​

  1. Drag a Navigation Rail:

    • From the Tools Palette, drag a Navigation Rail onto the Canvas.

  2. Set Fixed Position:

    • Open the Property Inspector.
    • In the Responsive Layout Tab, set the following:
      • Dynamic Position: Fixed
      • Left: 0
      • Top: 0
      • Bottom: 0

  3. Ensure Consistent Positioning:

    • Test your layout by toggling between breakpoints to confirm the navigation rail remains fixed in place.

  4. Hide for Mobile:

    • Switch to the Mobile Breakpoint.
    • In the General Properties tab, uncheck Visible to hide the navigation rail on mobile.

2. Add and Configure a Navigation Bar for Mobile​

  1. Drag a Navigation Bar:

    • Drag a Navigation Bar onto the Canvas.

  2. Set Fixed Position:

    • In the Responsive Layout Tab, set the following:
      • Dynamic Position: Fixed
      • Left: 0
      • Right: 0
      • Bottom: 0

  3. Match Navigation Bar Dimensions:

    • Note the height of the navigation bar (e.g., 49px). This will help with positioning other elements later.

  4. Hide for Other Breakpoints:

    • In the Tablet Breakpoint and Desktop Breakpoint, uncheck Visible for the navigation bar.

3. Create a Main Content Area​

  1. Add a Group:

    • Drag a Group onto the Canvas.
    • Set its Dynamic Position to Fixed.

  2. Adjust Position for Desktop:

    • In the Responsive Layout Tab, set:
      • Left: 80 (to account for the navigation rail width).
      • Top: 0
      • Right: 0
      • Bottom: 0

  3. Adjust Position for Mobile:

    • Switch to the Mobile Breakpoint.
    • Update the Left property to 0 and the Bottom property to 49 (to account for the navigation bar height).

  4. Turn Off Borders:

    • In the General Properties tab, disable any borders applied to the group.

4. Add a Column Inside the Group​

  1. Drag a Column:

    • Drag a Column widget into the group.

  2. Set Column Properties:

    • In the Responsive Layout Tab, configure the following:
      • Cross-Axis Alignment: Stretch
      • Container Type: Fluid
      • Width: 760px (desktop).

  3. Adjust Column Width for Breakpoints:

    • For Tablet Breakpoint, set the width to 600px.
    • For Mobile Breakpoint, set the height to 100%.

5. Add UI Components to the Column​

  1. Add Objects:

    • Drag the following widgets into the column:
      • Label
      • Input Field (to filter the list).
      • Simple List (to display To-Do items).

  2. Configure the Simple List:

    • In the Responsive Layout Tab, set the Container Type to Expanded so it occupies the remaining space in the column.

  3. Customize Styling:

    • Use the Property Inspector to adjust the colors and theme for each component to give your app a polished look.

Previewing Your Responsive Layout​

  1. Switch Between Breakpoints:

    • Use the Breakpoint Buttons in the Canvas Controls to preview how the layout adjusts for desktop, tablet, and mobile.

  2. Test Resizing:

    • Resize the app manually in the Canvas to ensure the layout behaves as expected at all sizes.

Final To-Do List Layout​

By the end of this guide, your app will include:

  • A Navigation Rail for desktop and tablet views.
  • A Navigation Bar for mobile views.
  • A responsive content area with a Label, Input Field, and Simple List that adapt to the screen size.

Congratulations! You've successfully built a responsive layout for a To-Do List app. With LiveCode Create's powerful responsive properties and dynamic positioning, you can design UIs that look great on any screen size.

Conclusion​

Congratulations! You’ve built a responsive To-Do List app using LiveCode Create’s Columns, Rows, and Responsive Layout Properties. By mastering these tools, you can create apps that adapt beautifully to all screen sizes.

Explore more examples and guides to continue learning and improving your skills with LiveCode Create!

For further learning:

Thank you for your feedback!

Was this page helpful?