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
section:section-shadow [2026/05/10 18:09] – external edit 127.0.0.1section:section-shadow [2026/05/20 20:58] (current) – doreps
Line 1: Line 1:
-{{https://img.shields.io/badge/PAGE-UNDER_CONSTRUCTION-orange.png?350&style=for-the-badge}} 
- 
-< restructure this for improved flow > 
 ====== Resource - Shadow ====== ====== Resource - Shadow ======
  
Line 9: Line 6:
 Total Launcher relies on Android's native rendering engine, which features specific behaviors. Use these two concepts when working with graphic objects: Total Launcher relies on Android's native rendering engine, which features specific behaviors. Use these two concepts when working with graphic objects:
  
-==== 1. To create a reliable drop shadow, follows these guidelines: ====+==== To create a reliable drop shadow, follows these guidelines: ====
   * **For a Solid Shadow:** - Assign the shape or picture/image to the Object's Edit Option dialog ''Image'' (foreground) property (the first element), and assign the shadow preset to it's single ''Background'' property in that dialog. An example of that dialog is shown ++here.|{{:section:section-object-edit-option-dialog.webp?direct&200}}++   * **For a Solid Shadow:** - Assign the shape or picture/image to the Object's Edit Option dialog ''Image'' (foreground) property (the first element), and assign the shadow preset to it's single ''Background'' property in that dialog. An example of that dialog is shown ++here.|{{:section:section-object-edit-option-dialog.webp?direct&200}}++
   * **For a Hollow Ring Shadow:** - Applies a border width of at least ''3'' to the shape, and sets the Alpha Fill opacity to 1% (e.g., ''ARGB 01000000'').   * **For a Hollow Ring Shadow:** - Applies a border width of at least ''3'' to the shape, and sets the Alpha Fill opacity to 1% (e.g., ''ARGB 01000000'').
   * **For ALL Shadows (The Margin Rule):** - Increases the object's ''Margins'' in the direction the shadow falls. The margin value must be equal to or greater than the shadow's radius to prevent the soft edges of the shadow from hitting the object's invisible bounding box and clipping.   * **For ALL Shadows (The Margin Rule):** - Increases the object's ''Margins'' in the direction the shadow falls. The margin value must be equal to or greater than the shadow's radius to prevent the soft edges of the shadow from hitting the object's invisible bounding box and clipping.
  
-==== 2. When a drop shadow is desired, avoids the following actions: ====+==== When a drop shadow is desired, avoids the following actions: ====
   * **0% Alpha Transparency:** - Never sets a shape's fill to exactly ''00'' (e.g., ''ARGB 00000000''). The rendering engine assumes the object is completely invisible and instantly deletes the shape, border, and shadow from the screen to save processing power.   * **0% Alpha Transparency:** - Never sets a shape's fill to exactly ''00'' (e.g., ''ARGB 00000000''). The rendering engine assumes the object is completely invisible and instantly deletes the shape, border, and shadow from the screen to save processing power.
   * **Margins at 0:** - A zero margin forces the shape to touch the absolute edges of its container, leaving zero physical room on the canvas for the shadow to be drawn.    * **Margins at 0:** - A zero margin forces the shape to touch the absolute edges of its container, leaving zero physical room on the canvas for the shadow to be drawn. 
Line 39: Line 36:
 |  The Shadow Add dialog\\ {{:ui:ui-resource-shadow-add-dialog.webp?direct&200}}  | • **Label:** - Enter a filename (no spaces/only underscore ''_'' for separators) to ID when saved.\\ \\ • **Shadow color:** - See a full review of TL's Color Picker [[:section:section-color_picker|here.]] See also the discussion below for successful color selection for shadows on different backgrounds.\\ \\ • **Shadow radius:** - Controls the spread/softness of the shadow. "Radius" technically measures a distance (in pixels) the blur extends from the object's edge. (A technical review of "Radius" is [[:section:section-resource-shadow-radius-technical|here.]]) Visually it determines how "fuzzy" the shadow appears.\\ » Low values (1-5): Tight, hard-edged shadow mimicking harsh light source.\\ » High values (10+): Wide, soft-edged shadow mimicking a large, diffused light source.\\ ⇒ Note: If Offset X/Y = 0, the shadow remains perfectly centered behind the object; a higher radius will make it "glow" out from all sides.\\ \\ • **Shadow offset X:** - Controls the horizontal position of the shadow relative to the object. Positive values push the shadow to the right; negative values push the shadow to the left.\\ \\ • **Shadow offset Y:** - Controls the vertical position of the shadow relative to the object. Positive values push the shadow downwards; negative values push the shadow upwards. | |  The Shadow Add dialog\\ {{:ui:ui-resource-shadow-add-dialog.webp?direct&200}}  | • **Label:** - Enter a filename (no spaces/only underscore ''_'' for separators) to ID when saved.\\ \\ • **Shadow color:** - See a full review of TL's Color Picker [[:section:section-color_picker|here.]] See also the discussion below for successful color selection for shadows on different backgrounds.\\ \\ • **Shadow radius:** - Controls the spread/softness of the shadow. "Radius" technically measures a distance (in pixels) the blur extends from the object's edge. (A technical review of "Radius" is [[:section:section-resource-shadow-radius-technical|here.]]) Visually it determines how "fuzzy" the shadow appears.\\ » Low values (1-5): Tight, hard-edged shadow mimicking harsh light source.\\ » High values (10+): Wide, soft-edged shadow mimicking a large, diffused light source.\\ ⇒ Note: If Offset X/Y = 0, the shadow remains perfectly centered behind the object; a higher radius will make it "glow" out from all sides.\\ \\ • **Shadow offset X:** - Controls the horizontal position of the shadow relative to the object. Positive values push the shadow to the right; negative values push the shadow to the left.\\ \\ • **Shadow offset Y:** - Controls the vertical position of the shadow relative to the object. Positive values push the shadow downwards; negative values push the shadow upwards. |
  
-===== Practical Applications ===== - do samples and include how to procedure+===== Practical Applications =====  
 + 
 +<do samples and include how to procedure>
 The following are methods to apply shadows in object design: The following are methods to apply shadows in object design:
   * **Layered Image or Shape Frames:** - Acts as a strict clipping mask for a photograph with its own background frame to create a floating border effect.   * **Layered Image or Shape Frames:** - Acts as a strict clipping mask for a photograph with its own background frame to create a floating border effect.
Line 59: Line 58:
       * Prevent clipping by increasing the object's margins to be greater than or equal to the shadow's radius and offset       * Prevent clipping by increasing the object's margins to be greater than or equal to the shadow's radius and offset
       * See the technical discussion [[:section:section-shadow-rule1|here.]]       * See the technical discussion [[:section:section-shadow-rule1|here.]]
- 
  
   * **Do not use 0% Alpha:**   * **Do not use 0% Alpha:**
Line 85: Line 83:
   * **Example:** If your Radius is 50 and Offset is 10, do not set the Margin to 60. Set it to **72** to account for the "tail" of the Gaussian blur.   * **Example:** If your Radius is 50 and Offset is 10, do not set the Margin to 60. Set it to **72** to account for the "tail" of the Gaussian blur.
  
-> **Design Tip:** To test your shadows effectively, always set your launcher wallpaper to the color recommended in the "Best Use On" column of the configuration tables. Testing a "Light Mode" shadow on a "Dark Mode" background will always result in a "Contrast Wall" failure. +<WRAP center round tip 60%> 
- +**Design Tip:** To test your shadows effectively, always set your launcher wallpaper to the color recommended in the "Best Use On" column of the configuration tables. Testing a "Light Mode" shadow on a "Dark Mode" background will always result in a "Contrast Wall" failure. 
-Why this works for your manual +</WRAP>
- * Directness: It addresses the "frustrating results" immediately by explaining that it isn't a bug; it's a lack of contrast. +
- * Actionable Data: The "Success/Failure" table gives users a quick sanity check before they spend an hour tweaking offsets. +
- * Rule Integration: It links back to Rule 1 to explain why your Margin of 60 was still clipping your Radius of 50.+
  
-===== UI Navigation Note: The Single-%%Slot%% Background =====+===== UI Navigation Note: The Single Slot Background =====
 When configuring a Graphic Object's Options (gear) menu, the **Background** property is a single-occupancy %%slot%%.  When configuring a Graphic Object's Options (gear) menu, the **Background** property is a single-occupancy %%slot%%. 
-  * You can assign a Shape, an Image, a Color, **OR** a Shadow to this %%slot%%, but you cannot stack them directly inside the same Background menu level.  +  * A shape, an image, a color **or** a shadow can be assigned to this slot, but  cannot be combined to stack them directly inside the same Background menu level.  
-  * To apply a shadow based on a specific custom shape's properties, the Shape Resource must reside in the object's top **Image** (foreground) %%slot%%, while the Shadow preset resides in the **Background** %%slot%%.+  * To apply a shadow based on a specific custom shape's properties, the Shape Resource must reside in the object's top **Image** (foreground) slot, while the Shadow preset resides in the **Background** slot.
  
 ===== Performance Hits from Radius/Blur Use ===== ===== Performance Hits from Radius/Blur Use =====