meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Next revision		Previous revision
howto:howto-window_blur [2026/06/30 13:56] – created - external edit 127.0.0.1howto:howto-window_blur [2026/07/19 12:00] (current) – ↷ Links adapted because of a move operation doreps
Line 1: Line 1:
-<WRAP center notice centeralign> +===== How to Blur Backgrounds Behind Windows and Folders in Total Launcher =====
-**⚠️ 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>+
  
 +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.
  
----- +<WRAP group> 
- +<WRAP centeralign column 25%> 
- +**▶ [[https://youtu.be/EKwqQeaavRA|Click to Play a YouTube video for the procedure below]]** 
-===== Window or Folder: Blur Behind ===== +{{{{ :howto:howto-window-blur-card_demo-v4.gif|You can create something like this. Be creative with the procedure below.}} 
- +</WRAP> 
-The desired objective is to have the window open over a portion of the page (screen). The screen contents behind the window will be dimmed and blurred through the window (window background is semi-transparent). This feature can also be applied to folders. +<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. 
-Click ++here|{{ :howto:howto-window-blur-ezgif.com-resize.gif }}++ to see the effect. +</WRAP> 
- +</WRAP> 
-Click [[https://youtu.be/EKwqQeaavRA|here]] to see the video for the procedure below.+<WRAP clear b/>
  
 ==== Procedure for Blurring behind a Window ==== ==== Procedure for Blurring behind a Window ====
Line 22: 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 activate (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 de-selected, 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 it's 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.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 it's 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 de-activated, 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 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 tap to open it's 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.
       - Tap the default window icon       - Tap the default window icon
-      - The window opens with it's selected color background and the page behind is blurred.+      - The window opens with its selected color background, and the page behind is blurred.
     - [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.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''
       - Navigate to ''UI & Animation'' > ''Blur amount'' and tap it to open the dialog       - Navigate to ''UI & Animation'' > ''Blur amount'' and tap it to open the dialog
-      - Set the amount at 50. Tap OK+      - Set the amount to 50. Tap OK
       - Back out to the page       - Back out to the page
       - Tap the window to open it to see a noticeably blurred page (if any objects were in the window, the objects would be clearly visible).       - Tap the window to open it to see a noticeably blurred page (if any objects were in the window, the objects would be clearly visible).
-    - [4:08-4:34] The demo just resets the window background to the previously select color.+    - [4:08-4:34] The demo just resets the window background to the previously selected color.
  
 The demo is completed. The demo is completed.
  
 <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP> <WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>