Resource - Shadow

Shadows for an object, whether it is text or other graphics such as images, shapes, icons, windows, or folders, serve as a fundamental visual anchor that provides a three-dimensional lift to complement a professional interface. By creating a separation between the object and its background, the user's eye easily distinguishes what is interactive and what is static.

Total Launcher relies on Android's native rendering engine, which features specific behaviors. Use these two concepts when working with graphic objects:

• For a Solid Shadow: -
  • Assign the shape or picture/image to the Object's Edit Option dialog Image (foreground) property (the first element)
  • Assign the shadow preset to its single Background property in that dialog. An example of that dialog is shown here.
• For a Hollow Ring Shadow: - Apply a border width of at least 3 to the shape, and set the Alpha Fill opacity to 1% (e.g., ARGB 01000000).
  • See the example here.
• For ALL Shadows (The Margin Rule): - Increase 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.
  • <insert sample image>

• 0% Alpha Transparency: - Never set 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. The Margin dialog does offer a Suggest setting to try first.
• Stacking Backgrounds: - The Background menu is a single-occupancy slot. The slot accommodates a Shape resource or a Shadow resource, but cannot stack them directly inside the same menu field at the same time.

Total Launcher offers a “library” for its user-created shadow presets used for visual depth and separation from background objects. The library is viewed by navigating to the Main Menu > Launcher options > Resources > Shadow as shown in this dialog.

Common uses for shadow resources include:

• Exterior or Interior Drop Shadows: - Provides the native ability to cast outward shadows based on an object's external mathematical boundaries. Total Launcher does not natively support inner shadows (shadows cast inside the object). Creating an inner shadow effect requires combining multiple hollow shapes with inverted margins.
  • View drop vs inner shadow examples here.

• Custom Bases: - Acts as the foundational layer for launcher objects, granting flat graphics a physical presence on the screen.
  • View custom base examples here

• Floating Cards: - Applies high Offset Y and Radius values to background shapes to create panels that appear elevated far above the wallpaper.
  • View floating card examples here.

• Lifted Buttons: - Utilizes a tight Radius and low Offset values behind icons or small shapes to create tactile, clickable elements that mimic physical hardware keys.
  • * View lifted button examples here.

• Layered UI Effects: - Generates visual hierarchy (Z-axis depth) and clear boundaries when stacking multiple widgets, overlapping windows, or pinning panels. The shadow visually dictates which element resides in the foreground, preventing flat, confusing layouts.
  • View layered UI examples here.

• Text Emphasis: - Ensures text remains legible regardless of the wallpaper underneath. Applying a tight, dark shadow preset behind bright text separates the characters from busy or similarly colored backgrounds, acting as a soft outline.
  • View text emphasis examples here.

Total Launcher provides no core library of shadows, only the space to store user-created shadow effects.

Shadows can be created at any time and added to 'Resource - Shadow' by navigating to

• Main Menu > Launcher options > Resources > Shadow > Add icon

Shadows can be created “on-the-fly” when working with an object at

• Object Design menu > Options > Background > Shadow

The Shadow dialog and the description of its elements are shown below:

Shadow Add Dialog

Element Descriptions

The Shadow Add dialog

• 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 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 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 following procedure outlines the standard method for applying a shadow resource to an object:

1. Enter Edit On mode or long-press the desired graphic object on the screen to open the Object Design menu.
   1. Select the Option icon to launch the Object Options dialog.
      1. Select Image and assign the primary foreground element (a specific shape or image).
      2. Select Background to open its dialog.
         1. Scroll to Shadow then select the required shadow preset (or tap the + icon to create a new one).
2. Back out of this screen to return to the Object Options Edit dialog and select the Margins
   1. Increase the margins to accommodate the combined value of the shadow's radius and offset, ensuring the blur is not clipped by the bounding box as shown in this example. The example demonstrates the **margin rule** but actually utilized the Suggestion icon to produce it.

The following are common design methods utilizing shadows to enhance overall layout:

• Framed Image Layouts: - Creates the appearance of physical photos, Polaroid prints, or framed art floating above the wallpaper. Instead of displaying flat, standard rectangular photos, images are cropped into precise custom designs (such as circles or heavily rounded rectangles) and lifted off the screen with a distinct drop shadow.
  • View framed image example here.

• Uniform App Icon Reshaping: - Standardizes the size and design of mismatched application icons. Older or varying app icons can be forced to conform to a specific, matching shape (like identical circles or rounded squares). By applying this uniform shape alongside a soft shadow to all shortcuts, a cohesive, modern interface is achieved without requiring downloaded third-party icon packs.
  • View uniform icon reshaping examples here.

In modern UI design, light is usually treated as coming from directly above or slightly “front-and-top.” This means the X offset is often 0 (centered horizontally), and the Y offset is positive (pushing the shadow down). Below are suggested settings for the X/Y Offsets and the Radius if this style is desired.

• Increase margins: - 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 here.

• Avoid 0% Alpha: - Avoid an Alpha Fill opacity of exactly 00 since this causes the rendering engine to skip the calculation and delete the shadow and border entirely to save processing power. See the technical discussion here.

• Use 1% Alpha for hollow shapes: - Trick the engine into rendering a shadow for a transparent shape by setting the Alpha Fill opacity to 01 combined with a thick border. See the technical discussion here.

• Do not rely on gradient shadows: - Shadows ignore image or shape internal gradient fades and cast a uniform blur based solely on the mathematical outer boundary of the shape. The shadow is generated based on its options (color, radius, and offsets). See the technical discussion here.

• Use high opacity on dark themes: - Overcome the luminance floor and maintain visibility on dark wallpapers by utilizing high alpha values (80%+) or solid colors. See the technical discussion here.

• Utilize color wheel opposites: - Create visual separation on exceptionally dark backgrounds by applying a hue-shifted shadow from the opposite side of the color wheel. See the technical discussion here.

While Rule 1 states that Margin must be ≥ (Radius + Offset), high-radius shadows require a “Safety Buffer”.

• The Rule of Thumb: - For any Radius over 20, multiply the required margin by 1.2.
• Example: - If the 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.

When configuring a Graphic Object's Options (gear) menu, the Background property is a single-occupancy slot.

• A shape, an image, a color or a shadow can be assigned to this slot, but resources cannot be combined 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.

Total Launcher processes shadows using native drawing routines, which require dynamic graphic calculations.

• High GPU Demand: - Large shadow radii require significant Gaussian blur calculations during screen rendering.
• Frame Rate Drops: - Applying large shadow radii (e.g., above 25) to multiple overlapping objects or within scrolling containers causes noticeable stuttering or frame rate drops on older devices.
• Mitigation Strategy: - Maintain performance by minimizing the number of heavily shadowed objects on a single page, keeping the Shadow radius value moderate, or utilizing pre-rendered PNG images with built-in shadows for static, complex graphics.