===== How to Blur Backgrounds Behind Windows and Folders in Total Launcher =====

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]]**
{{{{ :howto:howto-window-blur-card_demo-v4.gif|You can create something like this. Be creative with the procedure below.}}
</WRAP>
<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.
</WRAP>
</WRAP>
<WRAP clear b/>

==== Procedure for Blurring behind a Window ====

  - 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
      - 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
    - [0:29-1:17] Create the window using ''Resources'' to be used in the Blur demo
      - As above, navigate to ''Launcher Options'' > ''Resources'' > ''Window''
        - 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
    - [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''
      - 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-v4.webp?direct&25}} icon. Tap it.
      - 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 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"
      - 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 since it was not needed.)
      - Back out to the page
    - [2:32-2:58] Now to turn on ''Blur behind''
      - As before, navigate to ''Launcher options'' > ''UI & Animation'' > ''Blur behind''. Tap to activate it.
      - 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
    - [2:59-3:03] The window is ready to test.
      - Tap the default window icon
      - 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
      - Tap the window's option {{:ui:ui-icon_option-v4.webp?direct&25}} icon to re-open the Window Options dialog.
      - Tap ''Background'' > ''Color''. 
      - In #ARGB, enter ''00000000'' for transparent.
      - Tap OK to return to the page.
      - 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''
      - Navigate to ''UI & Animation'' > ''Blur amount'' and tap it to open the dialog
      - Set the amount to 50. Tap OK
      - 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).
    - [4:08-4:34] The demo just resets the window background to the previously selected color.

The demo is completed.

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