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-layout-landing [2026/07/25 17:32] – dorepssection:section-layout-landing [2026/07/28 21:54] (current) – doreps
Line 1: Line 1:
-====== Total Launcher Layout Objects ====== +====== Total Launcher Layout Objects: Master Android Homescreen Design ====== 
- +<WRAP hscroll_box> 
-Custom layouts are fundamental building blocks within the Total Launcher ecosystem, providing the primary mechanism for organizing clickable graphic objects, shortcuts, and widgets. Unlike simple free-form object placement, applying a specialized Layout Object automatically imposes a set of alignment and spacing rules on the content it contains. This guide explains the: +<WRAP> 
-  * **Adding a layout** to the page +Custom layouts serve as foundational building blocks for developing any advanced homescreen layout within the Total Launcher ecosystem. By grouping interactive graphic objects, app shortcuts, and widgets into defined containers, these specialized structures automatically impose consistent alignment and spacing rules across the entire custom setup. Mastering these shared design fundamentals ensures a cohesive, professional aesthetic before diving into specific linear, radial, or matrix configurations. The workflow begins by adding a new layout structure to the workspace and configuring the global properties. 
-  * **Shared design fundamentals** applicable to all layout types +</WRAP> 
-  * **Unique layouts** specific guides: +<WRAP> 
-    * **List (linear)** +^  Layout Selection Dialog  ^ 
-    * **Circle (radial)** +|  {{:ui:ui-layout-selection-v4.webp?direct&150}}  | 
-    * **Grid (matrix)** +</WRAP> 
-    *  +</WRAP> 
-===== Adding A Layout To The Page ===== +===== Add A Layout To The Page ===== 
-A list layout (linear) is added to a page and modified in the following process:+A list layout (linear) is added to a page and modified with the following steps:
   - Enter [[:section:section-basic_editing#to_enter_edit_mode|Edit Mode]]. Tap the ++''Edit Off'' icon|{{:ui:ui-icon_edit_mode-edit_off-v4.webp?direct&100}}++ in the lower right to change it to an ++''Edit On'' icon|{{:ui:ui-icon_edit_mode-edit_on-v4.webp?direct&35}}++   - Enter [[:section:section-basic_editing#to_enter_edit_mode|Edit Mode]]. Tap the ++''Edit Off'' icon|{{:ui:ui-icon_edit_mode-edit_off-v4.webp?direct&100}}++ in the lower right to change it to an ++''Edit On'' icon|{{:ui:ui-icon_edit_mode-edit_on-v4.webp?direct&35}}++
     - Tap-hold the list object to select it.     - Tap-hold the list object to select it.
     - In the ++Object Design Menu (top)|{{:ui:ui-icon_object_design_menu_top-v4.webp?direct&150}}++ select the ++Option icon|{{ :ui:ui-icon_option-25-v4.webp}}++.     - In the ++Object Design Menu (top)|{{:ui:ui-icon_object_design_menu_top-v4.webp?direct&150}}++ select the ++Option icon|{{ :ui:ui-icon_option-25-v4.webp}}++.
   - Review the menu panels indicated at the bottom of the interface.   - Review the menu panels indicated at the bottom of the interface.
-    - Select ''OPTIONS'' to modify the static parameters. +    - Select ''OPTIONS'' to modify its options. 
-    - Select ''ANIMATION'' to adjust dynamic behaviors.+    - Select ''ANIMATION'' to adjust the dynamic behaviors.
   - Apply the desired variable changes within the respective menus.   - Apply the desired variable changes within the respective menus.
  
-===== Understanding Layout Properties =====+===== Understand Layout Properties ===== 
 + 
 +While Total Launcher offers distinct spatial arrangement types (Grid, Circle, List), the visual styling options and interaction rules for the **items contained inside** these layouts remain the same. The configuration interface features five standardized tabs present in every layout dialog: 
 +  * **Launch sound** 
 +  * **Icon** 
 +  * **Label** 
 +  * **Shadow** 
 +  * **Background**
  
-While Total Launcher offers distinct spatial arrangement types (Grid, Circle, List), the visual styling options and interaction rules for the **items contained inside** these layouts remain completely uniform. The configuration interface features four standardized tabs present in every layout dialog. These global functions must be understood first, as they constitute the standardized visual design system across all layout implementations.+ These global functions must be understood first, as they constitute the standardized visual design system across all layout implementations.
  
 ==== Shared Style Tabs ==== ==== Shared Style Tabs ====
Line 28: Line 35:
 <WRAP hscroll_box> <WRAP hscroll_box>
 <WRAP> <WRAP>
-=== Icon === +=== ☛ Launch Sound (Shared Behavior) === 
-Controls visual attributes of contained image graphics. Note that this often adjusts the internal space surrounding the icons (Icon padding), global visibility (opacity and saturation), and applies color overlays uniformly to create cohesive themes. +While present in the general options, these trigger points exist across all layout types. Technically, this is an interaction behavior rather than a visual style property. 
 +  * **Tap, Swipe up, Swipe down, Swipe left, Swipe right:** Assign device audio files to be played upon specific physical, directional interaction types. 
 +  * **Sound:** Assign a specific interaction to play a device sound (see [[section-sound|Resource - Sound]] when any of the objects in the list layout receives that interaction.  
 +<WRAP alert round centeralign> What this means ...\\ A sound selected for any interaction will play for all objects in the layout that receive that same interaction. For example, a ''tap'' will cause the same sound on any list item 'tapped'. 
 +</WRAP> 
 +  * **Tap:** - Select the sound played upon a single tap. 
 +  * **Swipe up:** - Select the sound played upon an upward swipe. 
 +  * **Swipe down:** - Select the sound played upon a downward swipe. 
 +  * **Swipe left:** - Select the sound played upon a leftward swipe. 
 +  * **Swipe right:** - Select the sound played upon a rightward swipe. 
 +</WRAP> 
 +<WRAP> 
 +{{:ui:ui-layout-list-launch_sound_v4.webp?direct&150}} 
 +</WRAP> 
 +</WRAP> 
 +\\  
 +<WRAP hscroll_box> 
 +<WRAP> 
 +=== ☛ Icon === 
 +This controls visual attributes of the icon. Note that this often adjusts the internal space surrounding the icons (Icon padding), global visibility (opacity and saturation), and applies color overlays uniformly to create cohesive themes.
 === Options - Icon === === Options - Icon ===
 Modify the visual attributes of the icon images contained within the grid. Modify the visual attributes of the icon images contained within the grid.
Line 43: Line 68:
 </WRAP> </WRAP>
 </WRAP> </WRAP>
 +\\ 
 <WRAP hscroll_box> <WRAP hscroll_box>
 <WRAP> <WRAP>
-=== Label === +=== ☛ Label === 
-Dictates the typography for text descriptions associated with contained items. This encompasses typeface selection, vertical wrapping (Label lines), sizing, scaling, and the transition of color when an object is pressed or interacted with. +This sets the typography for descriptions for the contained items, covering typeface selection, vertical wrapping (Label lines), sizing, scaling, and the transition of color when an object is pressed or interacted with. 
 === Options - Label === === Options - Label ===
 Control the display parameters and typography of the text associated with each grid item. Control the display parameters and typography of the text associated with each grid item.
Line 61: Line 87:
 </WRAP> </WRAP>
 </WRAP> </WRAP>
 +\\ 
 <WRAP hscroll_box> <WRAP hscroll_box>
 <WRAP> <WRAP>
-=== Shadow === +=== ☛ Shadow === 
-Provides dedicated drop shadow controls specifically for item labels. Detailed specifications regarding how to utilize Shadows can be referenced **[[section:section-shadow|here]]**.+This provides dedicated drop shadow controls specifically for //item labels//. Detailed specifications regarding how to utilize Shadows can be referenced **[[section:section-shadow|here]]**.
 === Options - Shadow === === Options - Shadow ===
 Apply drop shadows to text labels for enhanced contrast against varied backgrounds. See [[:section:section-shadow|here]] for more detail on how to use Shadows. Apply drop shadows to text labels for enhanced contrast against varied backgrounds. See [[:section:section-shadow|here]] for more detail on how to use Shadows.
Line 76: Line 103:
 </WRAP> </WRAP>
 </WRAP> </WRAP>
 +\\ 
 <WRAP hscroll_box> <WRAP hscroll_box>
 <WRAP> <WRAP>
-=== Background === +=== ☛ Background === 
-Configures the styling of the overall layout container and the individual background states (resting, pressed, focused) for items contained within. Standard **margins** and **item spacing** properties are also defined within this section.+This configures the styling of the overall layout container and the individual background states (resting, pressed, focused) for items contained within. Standard **margins** and **item spacing** properties are also defined within this section.
 === Options - Background === === Options - Background ===
 Configure the container styling, individual item backgrounds, and spacing options. Configure the container styling, individual item backgrounds, and spacing options.
Line 93: Line 121:
 </WRAP> </WRAP>
 </WRAP> </WRAP>
- 
-This standardization ensures that design preferences, such as specific font sizes or background colors, are preserved regardless of the chosen spatial arrangement. Future visual theme adjustments only require editing the global configuration rules defined in these tabs. 
  
 ===== The Specific Layout Types ===== ===== The Specific Layout Types =====
Line 100: Line 126:
 To create custom Android interfaces, one of three specialized structural archetypes must be selected. Although they share the visual configuration system detailed above, each utilizes a distinct method of spatial organization. The following documentation details the distinct properties of each layout style. To create custom Android interfaces, one of three specialized structural archetypes must be selected. Although they share the visual configuration system detailed above, each utilizes a distinct method of spatial organization. The following documentation details the distinct properties of each layout style.
  
-Select a layout type to review its dedicated unique options:+Select 1 of the 3 layout types to review its dedicated unique options:
 <WRAP hscroll_box> <WRAP hscroll_box>
 <WRAP> <WRAP>
-[[:section:section-layout-list|{{:ui:ui-layout-list-v4.webp?direct&150}}]]\\  +[[:section:section-layout-list|{{:ui:ui-layout-list-v4.webp?150}}]]\\ ➡️[[:section:section-layout-list|List Layout]] - (Linear)
-[[:section:section-layout-list|List Layout - (Linear)]]+
 </WRAP> </WRAP>
 <WRAP> <WRAP>
-[[:section:section-layout-grid|{{:ui:ui-layout-grid-v4.webp?direct&150}}]]\\  +[[:section:section-layout-grid|{{:ui:ui-layout-grid-v4.webp?150}}]]\\ ➡️[[:section:section-layout-grid|Grid Layout]] - (Matrix)
-[[:section:section-layout-grid|Grid Layout - (Matrix)]]+
 </WRAP> </WRAP>
 <WRAP> <WRAP>
-[[:section:section-layout-circle|{{:ui:ui-layout-circle-v4.webp?direct&150}}]]\\  +[[:section:section-layout-circle|{{:ui:ui-layout-circle-v4.webp?150}}]]\\ ➡️[[:section:section-layout-circle|Circle Layout]] - (Radial)
-[[:section:section-layout-circle|Circle Layout - (Radial)]]+
 </WRAP> </WRAP>
 </WRAP> </WRAP>
-