meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
section:section-margins-page_and_object [2026/04/21 12:56] – dorepssection:section-margins-page_and_object [2026/05/10 18:09] (current) – external edit 127.0.0.1
Line 5: Line 5:
   * Object   * Object
 This guide explains how to use margins in both contexts. The term 'padding' is not used in the Total Launcher interface; all space management of this type is controlled via ''Margin'' or ''Item spacing'' settings. This guide explains how to use margins in both contexts. The term 'padding' is not used in the Total Launcher interface; all space management of this type is controlled via ''Margin'' or ''Item spacing'' settings.
- 
-===== Margin Dialog ===== 
-{{  :section:section-margins-dialog.png?200|Generic Margin Dialog  }} 
  
 ===== Page Margins ===== ===== Page Margins =====
Line 14: Line 11:
  
    *   **Purpose:** The primary use for page margins is to prevent objects from being placed in areas where they might be obscured or interfere with system elements. This includes screen notches, status bars, navigation bars, or gesture areas at the edges of the screen.    *   **Purpose:** The primary use for page margins is to prevent objects from being placed in areas where they might be obscured or interfere with system elements. This includes screen notches, status bars, navigation bars, or gesture areas at the edges of the screen.
-   *   **Effect:** Increasing the margin values (e.g., for 'top', 'bottom', 'left', or 'right') will shrink the available workspace, pushing all content inward, away from that respective edge. A value of '0' allows content to be placed right up to the very edge of the device's screen.+   *   **Positive Margin Effect:** Increasing the margin values (e.g., for 'top', 'bottom', 'left', or 'right') will shrink the available workspace, pushing all content inward, away from that respective edge. A value of '0' allows content to be placed right up to the very edge of the device's screen. 
 +   *   **Negative Margin Effect:** A negative margin will push the page's canvas **off the screen** on that side. This creates an area where content can be placed but will not be visible. This is an advanced technique, sometimes used intentionally to hide parts of a layout. 
 +<WRAP center round tip> 
 +By default, the page will not scroll, even with negative margins that push content off-screen. To create a scrolling page, the 'Fit the content to the screen height' option must be unchecked in Page Options. 
 +</WRAP>
  
 ===== Object Margins ===== ===== Object Margins =====
  
-The behavior of the 'Margin' setting for an object depends on whether it is a simple object or a container object. +The behavior of the 'Margin' setting for an object depends on whether it is 
- +  * a simple object or  
-{{:ui:ui-edit_on-design_menu-page_margins.png?nolink|The Margins Dialog for Pages and Objects.}}+  * a container object
  
 ==== Simple Objects (e.g., Icons, Text, Images) ==== ==== Simple Objects (e.g., Icons, Text, Images) ====
Line 28: Line 29:
    *   **Effect:** A positive margin pushes other objects away from it. A negative margin reduces this space, allowing the object to move closer to, and potentially overlap, adjacent objects.    *   **Effect:** A positive margin pushes other objects away from it. A negative margin reduces this space, allowing the object to move closer to, and potentially overlap, adjacent objects.
  
-==== Container Objects (e.g., Folders, Sliding Drawers, Widgets) ==== +==== Container Objects - Folders, Sliding Drawers, Widgets) ==== 
-For objects that act as containers for other items, the 'Margin' setting functions exactly like a Page Margin. It defines the usable space **inside** the container's own borders.+For objects that act as containers for other items, the ''Margin'' setting functions exactly like a Page Margin. It defines the usable space **inside** the container's own borders.
  
-   *   **Purpose:** This margin controls the internal "inset" or border area within the container. It determines how close the items inside (e.g., app icons within a folder) can get to the container's edge.+   *   **Purpose:** This margin controls the internal "inset" or border area within the container. It determines how close the items inside (like app icons within a folder) can get to the container's edge.
    *   **Effect:** Increasing the margin value shrinks the area where the container's contents can be placed, pulling them inward from the container's edges. This ensures the contents do not touch the visual border of the folder or widget itself.    *   **Effect:** Increasing the margin value shrinks the area where the container's contents can be placed, pulling them inward from the container's edges. This ensures the contents do not touch the visual border of the folder or widget itself.
  
 ===== Margin Dialog Controls ===== ===== Margin Dialog Controls =====
 +{{:section:section-margins-dialog.webp?200|Generic Margin Dialog  }}\\ 
  
-The dialog for adjusting margins is consistent for both Pages and Objects. +   * **left, right, top, and bottom:** - Each value is adjusted separately for precise control. 
- +   * **Measurement Unit and Range:** 
-   * **left, right, top, and bottom:** - Each value is adjusted separately, allowing for precise and asymmetrical control over spacing. +      * While not explicitly stated, the unit is best understood as **dip (density-independent pixel)**. This ensures layouts are consistent across Android devices with different screen sizes and resolutions. 
-   * **Positive Numbers:** Increase the defined space. For a Page or Container, this shrinks the content area. For a Simple Object, this pushes other objects further away. +      * The default setting is ''0''. The maximum positive range is the device's screen resolution (such as 1080 for width, 2400 for height). 
-   * **Negative Numbers:** Decrease the space. This is only applicable to Simple Objects and will cause them to expand beyond their cell boundaries, creating an overlap effect. +   * **Positive Numbers:** Increases the defined space. 
-   * **Suggest:** - Tap to automatically calculate margin values. This is useful when an object has effects like a shadow that extend beyond its normal boundaries, ensuring the effect is not clipped.+      * For a **Page or Container**, this shrinks the usable content area. [+] Practicality limits this; setting a margin equal to the screen width will result in no viewable area. 
 +      * For a **Simple Object**, this pushes other objects further away. 
 +   * **Negative Numbers:** Decreases the defined space, with different effects: 
 +      * For a **Page**, this pushes the content canvas off-screen, making it **partially or totally unviewable**. 
 +      * For a **Simple Object**, this causes it to expand beyond its cell boundaries and **create an overlap effect** with adjacent items. 
 +   * **Suggest:** - Tap to automatically calculate margin values, which is useful for objects with effects like a shadow to ensure the effect is not clipped.
    * **OK:** - Tap to accept the margin numbers shown.    * **OK:** - Tap to accept the margin numbers shown.
  
-===== Related Concept: Item Spacing ===== +===== Related Concepts =====
- +
-While 'Margin' controls space around the borders, a different setting, **'Item spacing'**, is used within container objects like Folders and Sliding Drawers.+
  
 +   * **Item Spacing:** While 'Margin' controls space around borders, 'Item spacing' is used within container objects (like Folders, Sliding Drawers, Widgets (App Drawer, App Drawer (pager), App Group, Contacts, and App Search) to control the space **between the individual items** inside.
    *   **Description:** This setting exclusively controls the amount of empty space **between the individual items** held inside a container. It does not affect the container's margin (the space between the items and the container's edge).    *   **Description:** This setting exclusively controls the amount of empty space **between the individual items** held inside a container. It does not affect the container's margin (the space between the items and the container's edge).
-   *   **Analogy:** This feature can be thought of as applying a 'padding' ''between'' each item in the grid, spreading them out from each other. +   *   **Analogy:** This feature can be thought of as applying a "padding" //between// each item in the grid, spreading them out from each other. 
-   *   **How to Choose a Value:** The input quantity (e.g., from 0-288) is determined by visual preference and usability. There is no single "correct" value. A user should adjust the number and observe the result, balancing aesthetic appearance (a clean, airy look) with usability (ensuring icons are not so close that they are hard to tap accurately).+   *   **How to Choose a Value:** The input quantity (range of 0 - 288) is determined by visual preference and usability. There is no single "correct" value. A user should adjust the number and observe the result, balancing aesthetic appearance (a clean, airy look) with usability (ensuring icons are not so close that they are hard to tap accurately). 
 +<WRAP center round tip> 
 +<WRAP centeralign>**Object Alignment:** For positioning objects relative to each other or the page, the alignment tool offers assistance with centering, edge matching, and distribution. It is a complementary tool to margins for creating precise layouts. 
 +</WRAP> 
 +</WRAP>
  
 <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP> <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>