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
howto:howto-window_blur [2026/07/15 19:58] – dorepshowto:howto-window_blur [2026/07/19 12:00] (current) – ↷ Links adapted because of a move operation doreps
Line 1: Line 1:
-<WRAP hide>%%<!-- googleoff: index -->%%</WRAP> +===== How to Blur Backgrounds Behind Windows and Folders in Total Launcher =====
-<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>+
  
- +Enhancing the visual depth of an Android interface is achieved by applying a dimming and blurring effect to the background behind an open window or folder. Total Launcher serves as the ultimate use case for this aesthetic upgrade, enabling custom semi-transparent backgrounds to overlay the main screen seamlessly. Implementing this design technique ensures foreground content remains highly legible and visually striking by temporarily obscuring the underlying home screen elements. The following instructions detail the exact configuration process.
- +
----- +
- +
- +
-===== Window or Folder: Blur Behind =====+
  
 <WRAP group> <WRAP group>
Line 21: Line 9:
 </WRAP> </WRAP>
 <WRAP round column 60%> <WRAP round column 60%>
-The desired objective is to have the window open over a portion of the page (screen).\\ \\  The screen content behind the window will be dimmed and blurred through the window (the window background is semi-transparent).\\ \\  This feature can also be applied to folders.+\\ \\ \\ The desired objective is to have the window open over a portion of the page (screen).\\ \\  The screen content behind the window will be dimmed and blurred through the window (the window background is semi-transparent).\\ \\  This feature can also be applied to folders. 
 +</WRAP>
 </WRAP> </WRAP>
-</WRAP? 
 <WRAP clear b/> <WRAP clear b/>
  
Line 30: Line 18:
   - Create a [[howto-window-create_simple#to_access_mainm_enu_and_launcher_options|simple window]] or open a desired window to modify.   - Create a [[howto-window-create_simple#to_access_mainm_enu_and_launcher_options|simple window]] or open a desired window to modify.
     - [0:00-0:28] This demo starts by confirming the ''blur behind'' is //not// activated     - [0:00-0:28] This demo starts by confirming the ''blur behind'' is //not// activated
-      - Navigate to ''Main menu'' > ''Launcher Options'' > ''UI & Animation'' > ''Blur behind''+      - Enter [[section:section-basic_editing|**Edit Mode**]] > **''Launcher options''** {{:ui:ui-menu-launcher_options-v4.webp?direct&30}} > ''UI & Animations'' > ''Blur behind''. Deactivate ''Blur behind ''.
       - Back out to the page       - Back out to the page
     - [0:29-1:17] Create the window using ''Resources'' to be used in the Blur demo     - [0:29-1:17] Create the window using ''Resources'' to be used in the Blur demo
-      - Navigate to ''Main menu'' > ''Launcher Options'' > ''Resources'' > ''Window''+      - As above, navigate to ''Launcher Options'' > ''Resources'' > ''Window''
         - Tap ''Add'' and enter a unique name (for spaces use underscores). Tap OK.         - Tap ''Add'' and enter a unique name (for spaces use underscores). Tap OK.
-      - The desired window is now in ''Resources:Window''. Back out to the page to now add that window to the page+      - The desired window is now in ''Resources: Window''. Back out to the page to now add that window to the page
     - [1:18-1:35] ''Edit On'' should be activated (notice the Page Design menu at the top). Tap "+" to add an object (window)     - [1:18-1:35] ''Edit On'' should be activated (notice the Page Design menu at the top). Tap "+" to add an object (window)
       - Select ''Graphic'' > ''Image'' > ''Window''       - Select ''Graphic'' > ''Image'' > ''Window''
       - Scroll and select the just-created window object. It now shows on the page and is selected automatically.       - Scroll and select the just-created window object. It now shows on the page and is selected automatically.
-    - [1:36-2:31] The window must be deselected, then tapped to open. It opens full page. Notice the Page Design menu at the top now has an ''Edit'' {{:ui:ui-icon_edit.webp?direct&25}} icon. Tap it. +    - [1:36-2:31] The window must be deselected, then tapped to open. It opens full page. Notice the Page Design menu at the top now has an ''Edit'' {{:ui:ui-icon_edit-v4.webp?direct&25}} icon. Tap it. 
-      - With the window now in its Edit mode, re-size it (since this demo is to show "Blur behind") by dragging the "knobs" on each side. +      - With the window now in Edit On mode, resize it (since this demo is to show "Blur behind") by dragging the "knobs" on each side of the boundaries. 
       - The window now shows an "Option" {{:ui:ui-icon_option-v4.webp?direct&25}} icon in the lower right corner. Tap it       - The window now shows an "Option" {{:ui:ui-icon_option-v4.webp?direct&25}} icon in the lower right corner. Tap it
       - The Window Option dialog opens. The only adjustment here is to change the ''Background'' from its default to a more attractive color.       - The Window Option dialog opens. The only adjustment here is to change the ''Background'' from its default to a more attractive color.
       - Tap ''Background'' > ''Color'' to open the "Color Picker"       - Tap ''Background'' > ''Color'' to open the "Color Picker"
-      - Select any color, but here was ARGB E4AEEF78. +      - Select any color, but here the #ARGB used was ''E4AEEF78''. 
-      - Tap OK to see the new color showing in the ''Background'' image. (Shadow was deactivated, just did not need it.)+      - Tap OK to see the new color showing in the ''Background'' image. (Shadow was deactivated since it was not needed.)
       - Back out to the page       - Back out to the page
     - [2:32-2:58] Now to turn on ''Blur behind''     - [2:32-2:58] Now to turn on ''Blur behind''
-      - Navigate to ''UI & Animation'' > ''Blur behind''. Tap to activate. +      - As before, navigate to ''Launcher options'' > ''UI & Animation'' > ''Blur behind''. Tap to activate it. 
-      - The ''Blur amount'' is tapped to open its dialog, which shows a range of 10 - 100, with 100 being fully opaque (nothing shows). Leave the setting at 10, which is the slightest blur available.+      - The ''Blur amount'' dialog is now open. It shows a range of 10-100, with 100 being fully opaque (solid). Leave the setting at 10, which is the slightest blur available.
       - Back out to the page       - Back out to the page
     - [2:59-3:03] The window is ready to test.     - [2:59-3:03] The window is ready to test.
Line 56: Line 44:
     - [3:04-3:30] Now change the window background so the page itself can be seen     - [3:04-3:30] Now change the window background so the page itself can be seen
       - Tap the window's option {{:ui:ui-icon_option-v4.webp?direct&25}} icon to re-open the Window Options dialog.       - Tap the window's option {{:ui:ui-icon_option-v4.webp?direct&25}} icon to re-open the Window Options dialog.
-      - Tap ''Background'' > ''Color''  +      - Tap ''Background'' > ''Color''.  
-      - In ARGB, enter 00000000 for transparent +      - In #ARGB, enter ''00000000'' for transparent. 
-      - Tap OK to return to the page+      - Tap OK to return to the page.
       - The window is open with a clear background allowing a viewport to the blurred page behind it.       - The window is open with a clear background allowing a viewport to the blurred page behind it.
     - [3:31-4:07] Now set a higher diffusion rate for the ''Blur amount''     - [3:31-4:07] Now set a higher diffusion rate for the ''Blur amount''