Translations of this page:
  • en

Resource - Shape

Shape Resources in Total Launcher provide lightweight vector graphics tools for creating scalable UI elements, background containers, and custom button bases. Unlike standard pixel-based images that lose crispness when scaled, vector shapes utilize mathematical rendering to maintain perfect clarity at any screen resolution while consuming minimal system memory. Saved directly within the central resource library, shape assets can be reused across multiple pages and updated globally. Mastering these vector parameters enables the design of modern card layouts, custom borders, and dynamic object masking without external editing software.

What is a Shape Resource?

Total Launcher manages reusable vector assets within a central library accessed via:

  • Location: Enter Edit Mode > Launcher options > Resources > Shape as viewed in this dialog.

Common Use Cases

  • Card UI Backgrounds: Creating clean, modern panels behind text or widgets to improve legibility against busy wallpapers.
  • Custom Buttons: Combining background vector shapes with text or icons to create tactile, interactive controls.
  • Object Masking: Serving as a geometric frame or “cookie cutter” to crop square images into circular or Squircle profiles.
  • UI Accents: Acting as dividers, borders, or structural indicators across layout groups.

Built-in Shape Library

Total Launcher includes a core collection of vector geometries:

Type Preview Primary Use Case
Rectangle Rectangles Sharp 90-degree corners. Ideal for full-screen containers, divider lines, and rigid grid layouts. Resizes freely on the canvas.
Rounded Rectangle Rounded rectangle The primary standard for modern Android design. Ideal for cards, app icon backgrounds, and buttons. Increasing the corner radius beyond `50` transforms the shape into a pill or oval.
Oval Oval/Circle Automatically forms a perfect circle when width and height are equal, or an ellipse when stretched.
Squircle  Squircle A continuous hybrid between a square and a circle. Unlike rounded rectangles, squircles feature smooth curvature along their entire perimeter for a modern UI feel.
Arc Arc Generates curved lines, pie-chart wedges, or circular segments defined by start and sweep angles.
Polygon Polygon samples Multi-sided geometric shapes (3 to 24 sides) such as triangles, pentagons, and heptagons. Excellent for unique navigation keys and geometric accents.

Basic Shape Creation Workflow

To add and configure a new shape resource:

  • Label: Assign a unique descriptive name (use underscores `_` instead of spaces) for identification in the resource manager.
  • Shape Selection: Choose the base vector geometry from the library.
  • Color 1: Defines the primary fill color (Defaults to `#FFFFFFFF` solid white).
  • Color 2: Defaults to transparent (`#00FFFFFF`). Changing Color 2 unlocks 14 gradient shading modes, wallpaper blur effects, and glassy transparency overlays.
  • Border Width & Color: Defines an outer stroke along the perimeter (`0` to `288` pixels). Borders use solid colors only (gradients are not supported on borders).

Shape Selection Dialog
Shape Add dialog ⬅️➡️ Shape Selection dialog

For detailed instructions on configuring gradients, alpha channels, and hexadecimal transparency levels, refer to the Color Picker Guide.

Advanced Geometry Parameters

Specific shape types provide fine-tuned controls to adjust curvature, angles, and sides. View the dialogs and explanations for these specific shapes:

🔷 Rounded Rectangle

🔷 Arc

🔷 Squircle

🔷 Polygon

Practical Application Examples

1. Creating a Card Background

Instead of placing text or widgets directly on a busy wallpaper, apply a Rounded Rectangle shape as a background layer:

  1. Create a shape with a solid fill (e.g., `#FF1E1E1E` for dark mode).
  2. Set the corner radius to `28`.
  3. Place the shape behind a group of widgets or text items to form a clean, readable card.

2. Image Masking (Cropping Photos)

Vector shapes act as a geometric frame or “cookie cutter” for images:

  1. Select an Oval shape resource.
  2. Set the image as a mask fill over a square photo object.
  3. The photo automatically crops into a clean, circular profile picture.

Technical Note on Animated Images: Using a Shape resource mask over an animated GIF will freeze the animation at the first frame. To maintain active GIF animations, place the image directly on the page using Add (+) > Graphic > Image (note that shape resources cannot mask direct image objects).

Benefits of Vector Shape Resources

  • Resolution Independence: Shapes never pixelate or blur when stretched across high-density displays.
  • Memory Efficiency: Machine-readable vector shapes consume virtually zero RAM compared to heavy PNG image files.
  • Global Resource Syncing: Because shapes are saved centrally in the resource library, modifying a single shape resource automatically updates every instance of that shape across all pages.

Discussion

Enter your comment. Wiki syntax is allowed:
Please solve the following equation to prove you're human. 9 -0 =