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
ui:ui-edit_on-design_menu-page_margins [2026/04/21 14:00] – dorepsui:ui-edit_on-design_menu-page_margins [2026/07/21 21:42] (current) – doreps
Line 1: Line 1:
-<insert back button>+<WRAP hide>%%<!-- googleoff: index -->%%</WRAP> 
 +<WRAP center notice centeralign> 
 +**⚠️ v4.0 UI Transition Notice - In Process:** 
 +//The release of Total Launcher v4.0 has introduced significant user interface changes. Please note that this  
 +page does not yet reflect these updates. The new layout paths, folds, and visual maps are currently being  
 +compiled and will be deployed shortly.// 
 +</WRAP> 
 +<WRAP hide>%%<!-- googleon: index -->%%</WRAP>
  
-===== Design Menu Page Margins =====+ 
 +---- 
 + 
 + 
 +====== Design Menu Page Margins ====== 
 + 
 +<WRAP center round info> 
 +The Page Margins dialog controls the usable area of a page. Think of margins as an invisible frame **inside** the physical edges of the device's screen. All content (icons, widgets, etc.) will be contained within this frame. 
 + 
 +The primary purpose of page margins is to create a safe area for a layout, preventing content from being hidden by system elements like screen notches, status bars, or navigation gesture areas. 
 +</WRAP>
  
 Dialog selections are discussed below the image. Only the OK button is available to make a selection in the Design Menu Page Margins image. Dialog selections are discussed below the image. Only the OK button is available to make a selection in the Design Menu Page Margins image.
  
-{{imapmarkers>:ui:ui-edit_on-design_menu-page_margins.png?200|Design Menu Page Margins}}+{{imapmarkers>:ui:ui-martin-page-dialog-v4.webp?200|Design Menu Page Margins}}
 [[:ui:ui-edit_on-design_menu|ID1|OK@71,192,128,235]] [[:ui:ui-edit_on-design_menu|ID1|OK@71,192,128,235]]
 {{cfg>}} {{cfg>}}
Line 14: Line 31:
 <wrap hi>**Design Menu Page Margins dialog.**</wrap> <wrap hi>**Design Menu Page Margins dialog.**</wrap>
  
-Margins could simply be said to be a way of managing space surrounding the page which separates content (icons, widgets, folders) from the device’s screen physical edge, sort of like a frame around a canvas. Smaller margins make more space available for the screen. Page margins in TL affect that frame:+Margins could simply be said to be a way of managing space surrounding the page which separates content (icons, widgets, folders) from the device’s screen physical edge, sort of like a frame around a canvas. Smaller margins make more space available for the screen. **Page margins** in TL affect that frame:
   * Positive margins will reduce the size and position of that frame. Objects in TL will have less space in which to be positioned on the page and screen. This may be required to avoid issues with gesture, controls, notches, cutouts, navigation or status bars.   * Positive margins will reduce the size and position of that frame. Objects in TL will have less space in which to be positioned on the page and screen. This may be required to avoid issues with gesture, controls, notches, cutouts, navigation or status bars.
   * Negative margins will create an area on that side of the page (top, bottom, left, or right) which will //not// be seen on the screen.   * Negative margins will create an area on that side of the page (top, bottom, left, or right) which will //not// be seen on the screen.
Line 20: Line 37:
 Page margins are a design tool which can provide a more consistent result across pages or devices (especially [[:section:section-multi_screen|Multi-Screen Devices]]).   Page margins are a design tool which can provide a more consistent result across pages or devices (especially [[:section:section-multi_screen|Multi-Screen Devices]]).  
  
-The above design menu ** page margin** dialog image shows controls for +The above Design Menu **Page Margin** dialog shows controls for: 
-  * **left**, **right**, **top**, and **bottom** - each adjusted separately if desired. Each element must be changed individually and each page in a  user's setup offers a margin control.  +  * **Margin Value Fields (top, bottom, left, and right):** 
-    * While documentation does not describe the measurement unit it will be more understandable to use the unit **dip** (density-independent pixel). Total Launcher excels in supporting development of setups/layouts across Android devices of varying screen size, resolutions, and pixel density (pixels per inch or ppi). This methodology is one of the better practices for layout dimension, margin padding, and other UI components. +    * These four fields allow a number input to define the size of the margin on each respective side of the page. Each side is controlled individually.  
-    * The default setting is 0, but there is a maximum positive range of the device's screen resolution. The range The device used for this wiki's images and videos is 1080x2400. +    * **Measurement Unit:** While not labeled, the unit is best understood as **dip (density-independent pixel)**. This ensures the layout remains consistent on Android devices with different screen sizes and resolutions. 
-          * **//Positive Numbers//** will increase the size of the respective border resulting in a loss of usable screen space but can be used to avoid system mechanics or for design aesthetics.  +      * **Positive Numbers:** A positive value increases the size of the invisible frame on that side, **reducing the usable screen space**. This is the standard way to avoid system UI elements. 
-            * While TL permit //any// positive number, practicality limits to usable number (again, based on the user's device resolution): +        * A very large value can have a dramatic effect. For example, on a 1080x2400 screen, a 'left' margin of ''1080'' would result in no viewable page area. 
-              * equal to the device's width (e.g. 1080) or height (e.g. 2400) results in //no// viewable page/screen area for right/left (1080) or top/bottom (2400) +      * **Negative Numbers:** A negative value decreases the border, effectively pushing the page's canvas **off the screen** on that side. Any content placed in this negative margin area will be partially or totally **unviewable**. This is an advanced technique for specific design objectives. 
-              * 1/2 of those number would make 3/4 of the page/screen unavailable. +   * **SUGGEST:** - Tap this button to have Total Launcher propose margin values. It may suggest numbers to account for system navigation bars or other dynamics it can detect. 
-          * **//Negative Numbers//** will decrease a border giving more space allocation for objects although objects touching that space begin to become partially, then totally, unviewable, a possible user objective. It //will not// provide for a scrolling page, either vertically or horizontally. +   * **OK:** - Tap to accept the margin numbers shown and return to the previous screen.
-    * This gives a better understanding of the progression of the impact of positive page margin numbers. Typically, page margin are used to avoid cutouts, system navigation bars, or other aesthetic design purposes. With this understanding, there is no suggested numbers ... pick a number to meet the need.   +
-  * **Suggest** - tap it to learn if any margin numbers are proposed by internal dynamics of TL. Results are usually returned when margins are being adjusted in an **object** //if// the object contains a shadow or offset option. See [[ui:ui-object-text-option-edit|Text Object Options]], [[:section:section-layout-option|Layout Options]] +
-  * **OK** - Tap to accept the margin numbers shown. Returns the user to previous page.+
  
 Visual demos of the effects of page margins are seen for {{https://youtube.com/shorts/DnxbDHWJKKU?feature=share|positive page margins}} and for {{https://youtu.be/FQI65uyIJb0|negative page margins}}. Visual demos of the effects of page margins are seen for {{https://youtube.com/shorts/DnxbDHWJKKU?feature=share|positive page margins}} and for {{https://youtu.be/FQI65uyIJb0|negative page margins}}.
  
-<WRAP center round tip 60%> +<WRAP center round tip> 
-For scrolling a page the Page Options dialog's //Fit the content to the screen height (make it not scrollable)// must be unchecked. See [[howto:howto-page_scrolling-vertical|Page Scrolling - Vertical]] on how a vertically scrolling page can be created.+<WRAP centeralign>For scrolling a page, the Page Options dialog's\\   * //**Fit the content to the screen height (make it not scrollable)**//\\ must be unchecked.\\ \\ See [[howto:howto-page_scrolling-vertical|Page Scrolling - Vertical]] on how a vertically scrolling page can be created.</WRAP>
 </WRAP> </WRAP>
  
-<WRAP center round tip 60%> +<WRAP center round tip> 
-A somewhat related concept to managing page space is the alignment tool discussed [[howto:howto-object-alignment|Object Alignment]]. It is a quasi-grid tool, in that it assists in the centering, edge matching, vertical and horizontal positioning.+<WRAP centeralign>Related Concept: **Alignment Tool**</WRAP> 
 +See the [[howto:howto-object-alignment|Object Alignment]] "How To" secton to learn its use. It is a quasi-grid tool, in that it assists in the centering, edge matching, vertical and horizontal positioning.
 </WRAP> </WRAP>
----- 
-====== Design Menu Page Margins ====== 
- 
-The Page Margins dialog controls the usable area of your page. Think of margins as an invisible frame **inside** the physical edges of your device's screen. All of your content (icons, widgets, etc.) will be contained within this frame. 
- 
-The primary purpose of page margins is to create a safe area for your layout, preventing content from being hidden by system elements like screen notches, status bars, or navigation gesture areas. 
- 
-{{:ui:ui-edit_on-design_menu-page_margins.png?nolink|Design Menu Page Margins dialog.}} 
  
-===== Dialog Selections ===== 
- 
-The dialog provides the following controls to define the page's internal frame: 
- 
-   * **Margin Value Fields (top, bottom, left, and right):** 
-     - These four fields allow you to input a number to define the size of the margin on each respective side of the page. Each side is controlled individually. 
-     - **Measurement Unit:** While not labeled, the unit is best understood as **''dip'' (density-independent pixel)**. This ensures your layout remains consistent on Android devices with different screen sizes and resolutions. 
-     - **Positive Numbers:** A positive value increases the size of the invisible frame on that side, **reducing the usable screen space**. This is the standard way to avoid system UI elements. 
-       - A very large value can have a dramatic effect. For example, on a 1080x2400 screen, a 'left' margin of ''1080'' would result in no viewable page area. 
-     - **Negative Numbers:** A negative value decreases the border, effectively pushing the page's canvas **off the screen** on that side. Any content placed in this negative margin area will be partially or totally **unviewable**. This is an advanced technique for specific design objectives. 
- 
-   * **SUGGEST:** 
-     - Tap this button to have Total Launcher propose margin values. It may suggest numbers to account for system navigation bars or other dynamics it can detect. 
- 
-   * **OK:** 
-     - Tap to accept the margin numbers shown and return to the previous screen. 
- 
-===== Important Considerations ===== 
- 
-   * **Scrolling:** Setting a negative margin to push content off-screen does **not** automatically enable scrolling. To create a vertically scrolling page, you must uncheck the 'Fit the content to the screen height' option in the main Page Options. See [[ui:page_scrolling|Page Scrolling]]. 
-   * **Object Positioning:** Page margins define the canvas area. To position objects precisely *within* this area, use the tool discussed in [[ui:object_alignment|Object Alignment]]. 
----- 
 <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP> <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>
  
 +<wrap hide>
 +===== Hidden Index Anchors =====
 +[[:ui:ui-edit_on-design_menu|ID1|OK@71,192,128,235]]
 +{{cfg>}}
 +   {
 +   }
 +{{<cfg}}
 +</wrap>