howto:howto-shape_with_clear_background [uiTotalLauncherManual]

Table of Contents

Translations of this page:

en

Book Creator
Add this page to your book

Book Creator
Remove this page from your book

Create a Shape Using a See-Through Background

This process is useful for creation or manipulation of shapes that are used anywhere in the launcher or for 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 Window application, GIMP, is available for download from Google Play Store

Click here to view the GIMP procedure

With GIMP open, select File > New
1. Set width to 500 and height to 500 in pixels
2. Select that same dialog's Advanced Options to open a sub-dialog:
  1. Change Fill to show Transparency and click OK (a checkerboard pattern shows)
The canvas has been created. A shape will be placed on it.
1. Select the rectangle tool from the tool dialog (or just press R)
2. The Tool Options dialog shows in the left panel
3. Check Round corners and set the radius to 50
4. 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. It's transparent center will extend toward the shape's outer boundaries,
1. In the Layer panel in the bottom right, add a layer by right-clicking on the existing layer
  1. Select New layer. Click it's name and enter Frosted Glass
  2. While the “Frosted Glass” layer is selected, click File > Edit > Fill and in the open dialog cause the FG Color to be 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
1. Define a gradient effect for the soft border: From the top menu bar, select Select > Feather, enter 30 (pixels), click OK
2. Now press keyboard Delete key to see the center become transparent towards the border's edge
  1. 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 completely empty but slightly glassy
1. With the outer shape selected, then right click the Frosted Glass layer in the Layer panel (bottom right)
  1. Click Alpha to Selection
  2. In the main menu bar select Layer > New layer and name it Tint
    1. Fill this layer with white (the FG Color should still show white from the previous process)
  3. In the Layer panel, set the Tint layer Opacity level to 15% to make the the center appear more like glass is there instead of strict transparency.
Ready to export the file.
1. Select File > Export as and rename the file (top of screen) to glass_shape.webp (JPGs do not support transparency)
  1. 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)
  2. Click Export, then Export again.
Process Complete! The PNG/WEBP is ready to place in Total Launcher Resources.

-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 to be used by Total Launcher needs to be added to the Image Resource area. If unfamiliar with this, the procedure is here.

Create the Resource Shape for the Transparent PNG/WEBP

☛ Demo Video for the procedure

Place the desired shape on the page:
1. In Edit On mode, in the top Page Design, menu, tap + icon
  1. Select Graphic > Image > Default > Shape > Add (+)
  2. In the Add Shape dialog select Shape > Round rectangle and then re-name the Label as “frost”
  3. Tap the Option icon to open the radius dialog
  4. The default setting of 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.
  5. The Shade Add dialog where the “frost” shape is now shown, tap “frost” to place it on the page.
2. The created shape (white rounded rectangle) is now on the page and selected and can be moved by dragging. Move it to any location.
3. In the Object Design men (top) tap Option icon to open the shape's Edit dialog.
  1. Tap Image > Icon pack and select any desired icon
The shape with icon is now on the page.
1. The video's icon had no background. Other icons may have a colored, or shaded backgrounds or insets. If so, see the next step to “minimize” that.
2. In the Object Design menu tap Options to open the Option Edit dialog.
  1. Select Background which opens Image Resources. Scroll and select 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).
1. Tap Options in the Object Design menu and scroll to Margins at the bottom. Tap to open it's dialog. Here, the margins are increased (interior borders are moved towards the center) which shrinks the icon.
  1. Tap OK and back out of the editing dialog to the page.
Project completed.

Margin manipulation for an object, called scaling, is helpful. Explore it more fully here.

Image Download

The above procedure to creates a shape which places an “clear” image as it's 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.

Clear Frosted Border Round Rectantle	Clear Shadowed Round Rectangle

Download	Download

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)

Comments & Feedback

Found a bug, typo, or have a suggestion?
Toby Lancer is ready to help! Look for the Quick Help form:
► Desktop: left sidebar located near the bottom for Private to Admin
► Mobile: 3-bar menu at page top.

► Use the Discussion section below to share any experiences and communications with other Total Launcher users.
► Any Registered User can directly update this and any wiki page if desired.

Moderation: To keep the manual clean, all comments are held for appropriateness review. Preview any comment before submitting it. It will not display after submission until reviewed. So, please, do not resubmit.
Formatting: If using any code snippets place them inside code tags (e.g., 'code') using double single quotes (') before and after to keep them readable.
Be Kind: This is a community effort. Please keep feedback constructive and on topic.

~~DISCUSSION~~

2026/03/30 18:29 · 3 Comments

Discussion

Real name:

E-Mail:

Website:

Enter your comment. Wiki syntax is allowed:

Please solve the following equation to prove you're human. 36 -4 =᠎ Please keep this field empty:

Subscribe to comments

Tools

menus and quick search

site status

Page Tools

meta data for this page