<WRAP hide>%%<!-- googleoff: index -->%%</WRAP>
<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>


----


===== Create a Shape Using a See-Through Background =====

This process is useful for creating or manipulating shapes used anywhere in the launcher, including icons. Icons typically are for just one app or widget. But with this described technique, it is possible to have a see-through shape which //holds// an icon or other objects.

==== Create or Obtain the "Invisible" Shape ====

The procedure to apply the "invisible" image to the shape is shown below. There are 2 sources for that image:
  * Create it with an image design application
    * a Windows application, [[https://apps.microsoft.com/detail/9PNSJCLXDZ0V?hl=en-us&gl=US&ocid=pdpshare|GIMP]], is available for download from Google Play Store
<WRAP indent>
<WRAP indent>
<WRAP indent>
++++Click here to view the GIMP procedure|
  - With GIMP open, select ''File'' > ''New''
    - Set ''width'' to 500 and ''height'' to 500 in pixels
    - Select that same dialog's ''Advanced Options'' to open a sub-dialog: 
      - Change ''Fill'' to show ''Transparency'' and click OK (a checkerboard pattern shows)
  - The canvas has been created. A shape will be placed on it.
    - Select the rectangle tool from the tool dialog (or press ''R'')
    - The Tool Options dialog shows in the left panel
    - Check ''Round corners'' and set the ''radius'' to 50
    - Now use the mouse/cursor to draw a square in the center of the canvas and release it when completed. Do not draw outside of the canvas, as the resulting rounded square will define the outer edge of the object. The shape has been created.
  - Define the "frosting": A white block will be added. Its transparent center will extend toward the shape's outer boundaries,
    - In the Layers panel in the bottom right, add a layer by right-clicking on the existing layer
      - Select ''New layer''. Click its name and enter ''Frosted Glass''
      - While the "Frosted Glass" layer is selected, click ''File'' > ''Edit'' > ''Fill'' and in the open dialog set the ''FG Color'' to white using the color dialog. Click OK, and the rounded square will be solid white
  - Define a border of the frost: From the top menu bar, select ''Select'' > ''Shrink'', enter 20 (pixels), click OK
    - Define a gradient effect for the soft border: From the top menu bar, select ''Select'' > ''Feather'', enter 30 (pixels), click OK
    - Now press the keyboard ''Delete'' key to see the center become transparent towards the border's edge
      - If less frost is desired, press ''Delete'' again; or more frost is desired press ''Ctrl''+''Z''
  - Add a "glass effect" to the lens so that the center is not empty but slightly //glassy//
    - With the outer shape selected, then right-click the ''Frosted Glass'' layer in the Layers panel (bottom right)
      - Click ''Alpha to Selection''
      - In the main menu bar select ''Layer'' > ''New layer'' and name it ''Tint''
        - Fill this layer with white (the ''FG Color'' should still show white from the previous process)
      - In the Layers panel, set the ''Tint'' layer ''Opacity level'' to 15% to make the center appear more like glass is there instead of strict transparency.
  - Ready to export the file.
    - Select ''File'' > ''Export as'' and rename the file (top of screen) to ''glass_shape.webp'' (JPGs do not support transparency)
      - Decide which directory on the device to export the file: directory in the 1st column, then the sub-directory (if desired) in the 2nd column)
      - Click ''Export'', then ''Export'' again.
  - **Process Complete! **** The PNG/WEBP is ready to place in Total Launcher Resources.
++++

</WRAP>
</WRAP>
</WRAP>
  * //-or-// use the PNG/WEBP image(s) offered below for download at the bottom of this page. 
Whichever route is selected results in a reusable //glass container// for any icon, shape, or widget!

==== Import the PNG/WEBP to Resources ====

Any external image used by Total Launcher must be added to the 'Image Resource' area. If unfamiliar with this, the procedure is [[section:section-resources#resources_add_to_a_category_s_storage|here]].


<WRAP group>
<WRAP centeralign>**Total Launcher Procedure - The Video**\\ **▶ [[https://youtu.be/BxdWVIRFHTY|Click to Play on YouTube]]**</WRAP>
<WRAP centerblock 25%>
{{  howto:howto-shape_with_clear_background-demo_image-v4.webp?direct&200|Click to Play  }}
</WRAP>
<WRAP clear b/>

==== Create the Total Launcher Resource Shape for the Transparent PNG/WEBP ====
  - Place the desired shape on the page:
    - In ''Edit On'' mode, in the top Page Design menu, tap the ''+'' icon
      - Select ''Graphic'' > ''Image'' > ''Default'' > ''Shape'' > ''Add (+)'' 
      - In the Add Shape dialog select ''Shape'' > ''Round rectangle'' and then re-name the ''Label'' as "frost"
      - Tap the Option {{ui:ui-icon_option-v4.webp?20}} icon to open the radius dialog
      - The default setting is 28, which represents Google's current Material rounded corner for icons. Modifications can be made by direct input or using the slider. Leave it at the default setting. Select OK.
      - In the Shade Add dialog, where the "frost" shape is now shown, tap "frost" to place it on the page.
    - The created shape (white rounded rectangle) is now on the page and selected and can be moved by dragging. Move it to any location.
    - In the Object Design menu (top), tap the Option {{ui:ui-icon_option-v4.webp?20}} icon to open the shape's  Edit dialog.
      - Tap ''Image'' > ''Icon pack'' and select any desired icon
  - The shape with the icon is now on the page. 
    - The video's icon had //no// background. Other icons may have a colored or shaded background or insets. If so, see the next step to "minimize" that.
    - In the Object Design menu, tap Options to open the Option Edit dialog. 
      - Select ''Background'', which opens Image Resources. Scroll and select the ''frost'' image (created in Gimp or Photoshop or downloaded from this page and previously in Image Resources).
  - The "frost" is added to the shape's background. 
  - **If** the icon is larger than desired, //scale// it down (or vice versa). It will //not// affect the size or the shape of the object (frost).
    - Tap Options in the Object Design menu and scroll to ''Margins'' at the bottom. Tap to open its dialog. Here, the margins are increased (interior borders are moved towards the center), which //shrinks// the icon.
      - Tap OK and back out of the editing dialog to the page.
  - Project completed.

<WRAP center round tip 60%>
Margin manipulation for an object, called scaling, is helpful. Explore it more fully [[section:section-margins-page_and_object|here]].

</WRAP>

==== Image Download ====

 The above procedure creates a shape that places a "clear" image as its background. Either of the images below (Frost or Shadow) could be used on dark-mode or light-mode wallpaper or used as image headers for folders.

<WRAP center>
^  **Clear Frosted Border\\ Round Rectantle**  ^  **Clear Shadowed\\ Round Rectangle**  ^
|  {{howto:howto-shape-clear_frost-4background-image-v4.webp?direct&200x200}}  |  {{howto:howto-shape-clear_shadow-4background-image-v4.webp?direct&200x200}}  |
^  {{howto:howto-shape-rnd_frost-file-v4.webp?linkonly|Download}}  ^  {{howto:howto-shape-clear_shadow-file-v4.webp?linkonly|Download}}  ^
</WRAP>
----

<WRAP round tip>
^  Summary of Marial Design (Material You v3) Standards for Radii Corners  ^^^
|  **12**  |  Medium  | cards or grouped lists inside a widget |
|  **16**  |  Large  | floating action buttons (FABs): square-ish\\ or smaller widgets |
|  **28**\\ or\\ **Fully Rounded**  |  Stadium  | standard buttons typically ½ the height\\ (e.g., height = 50, radius is 25: pill shaped) |
</WRAP>

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