====== Total Launcher Grid Layout Configuration: A Guide To Customizing Icons, Labels, and Backgrounds ======

The Grid Layout Configuration dialog in Total Launcher provides comprehensive options for adjusting the visual presentation and interactive behavior of grid-based object groups. Modifying spatial arrangements, icon styling, typography, and background properties enables the creation of a highly functional and custom interface. This configuration menu dictates exactly how items align within a structured grid, ensuring precise control over the final design before moving into animation behaviors.
<WRAP hscroll_box>
<WRAP 50%>
To place the grid layout on the page:
  * Enter [[:section:section-basic_editing#to_enter_edit_mode|Edit Mode]] (Long press an empty area -> Toggle Edit Mode icon) > 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}}++
  * In the ++Object Design menu (top)|{{:ui:ui-icon_object_design_menu_top-v4.webp?direct&200}}++, select the ++Option icon|{{:ui:ui-icon_option-25-v4.webp}}++ to open the ++Add dialog|{{:ui:ui-object_add-selection-v4.webp?direct&150}}++. Select ''Layout'' > ''Grid''
  * The grid object with its default 6 elements is on the page, selected.
==== Configuration Procedure ====
Follow the sequence to apply modifications to the layout grid that is now on the page:
  * If not currently selected, tap-hold the grid object to select it.
  * In the ++Object Design Menu (top)|{{:ui:ui-icon_object_design_menu_top-v4.webp?direct&200}}++ select the ++Option icon|{{:ui:ui-icon_option-25-v4.webp}}++.
  * Review the menu panels indicated at the bottom of the interface.
    * Select [[#options_-_general|''OPTIONS'']] to modify the static parameters.
    * Select [[#animation|''ANIMATION'']] to adjust dynamic behaviors.
  * Apply the desired variable changes within the respective menus. 
</WRAP>
<WRAP>
{{:ui:ui-layout-grid-v4.webp?direct&200}}
</WRAP>
</WRAP>
<WRAP hscroll_box>
<WRAP>
{{:ui:ui-layout-grid-dialog_full-v4.webp?direct&175}}
</WRAP>
<WRAP>
===== The Grid Layout Option Dialog =====
==== Options - General ====
Configure the arrangement and behavior of the grid container.
  * **Columns:** - Define the number of vertical columns.
  * **Rows:** - Define the number of horizontal rows.
  * **Launch animation:** - Set the animation triggered upon launching an item. Note that this selection requires the ''PRO'' version upgrade.
=== Options - Launch sound ===
Assign specific device sounds to physical interactions when the grid is activated.
  * **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.
==== Options - Icon ====
Modify the visual attributes of the icon images contained within the grid.
  * **Icon size:** - Adjust the overall size (scale) of the icons.
  * **Icon padding:** - Modify the internal space surrounding the icons.
  * **Icon opacity (%):** - Adjust the transparency level of the icons, utilizing values such as ''100%'' for solid visibility.
  * **Icon saturation (%):** - Modify the color intensity, where ''100%'' represents natural colors and reduced values approach grayscale.
  * **Icon color filter:** - Apply a specific color overlay or tint to all icons uniformly.
==== Options - Label ====
Control the display parameters and typography of the text associated with each grid item.
  * **Show label:** - Toggle the visibility state of the text labels to On or Off.
  * **Typeface:** - Select the specific font family applied to the label text.
  * **Label lines:** - Determine the maximum number of lines permitted for text wrapping, ranging from ''1'' to ''3''.
  * **Font size:** - Adjust the structural point size of the label text.
  * **Scale X (%):** - Stretch or compress the text width horizontally.
  * **Text color:** - Define the primary resting color of the text using the Launcher's [[:section:section-color_picker|Color Picker]] and apply a hexadecimal value such as ''#FFFFFFFF''.]
  * **Text color (pressed):** - Same as ''Text color'' above, but changes the text color as the object is 'pressed' or tapped.
=== 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.
  * **Shadow color:** - Select the hue of the underlying text shadow.
  * **Shadow radius:** - Control the blur, spread, or sharpness of the shadow effect.
  * **Shadow offset X:** - Shift the shadow position along the horizontal axis.
  * **Shadow offset Y:** - Shift the shadow position along the vertical axis.
=== Options - Background ===
Configure the container styling, individual item backgrounds, and spacing parameters.
  * **Background:** - Set the global color or image for the entire grid container.
  * **Margins:** - Define the external spacing outside the grid boundary, requiring specific integer values for ''left'', ''top'', ''right'', and ''bottom''.
  * **Item background:** - Set the resting background color or image for individual grid items.
  * **Item background (pressed):** - Set the background visual for individual grid items during a press interaction.
  * **Item background (focused):** - Set the background visual for individual grid items when navigated to via hardware controls or focus states.
  * **Item spacing:** - Adjust the internal gap distance between individual items placed within the grid structure.
</WRAP>
</WRAP>
==== Animation ====
  * <wrap em>To be completed</wrap>

<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>