====== 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 [[section:section-basic_editing#to_enter_edit_mode|Edit Mode]] > ''Launcher options'' {{:ui:ui-menu-launcher_options-v4.webp?direct&30}} > ''Resources'' > ''Shape'' as viewed in this ++dialog.|{{:ui:ui-resource-shape-dialog.webp?direct&200}}++
==== 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** | {{:ui:ui-resource-shape-rect-x_2-v4.webp?direct&70|Rectangles}} | Sharp 90-degree corners. Ideal for full-screen containers, divider lines, and rigid grid layouts. Resizes freely on the canvas. |
| **Rounded Rectangle** | {{:ui:ui-resource-shape-rnd_rect-basic-v4.webp?direct&50|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** | {{:ui:ui-resource-shape-oval-basic-v4.webp?direct&50|Oval/Circle}} | Automatically forms a perfect circle when width and height are equal, or an ellipse when stretched. |
| **Squircle** | {{:ui:ui-resource-shape-squircle-basic-v4.webp?direct&50| 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** | {{:ui:ui-resource-shape-arc_270_90-basic-v4.webp?direct&50|Arc}} | Generates curved lines, pie-chart wedges, or circular segments defined by start and sweep angles. |
| **Polygon** | {{:ui:ui-resource-shape-polygon-x_3-basic-v4.webp?direct&100|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**\\ {{:ui:ui-resource-shape-add-dialog-v4.webp?direct&200|Shape Add dialog}} ⬅️➡️ {{:ui:ui-resource-shape-selection-dialog-v4.webp?direct&150|Shape Selection dialog}}
For detailed instructions on configuring gradients, alpha channels, and hexadecimal transparency levels, refer to the **[[:section:section-color_picker|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|
^ **Rounded Rectangle Parameters** ^^^
^ **Parameter** ^ **Range** ^ **Functional Behavior** ^
| **Link All Sides** | Toggle | Toggles uniform corner rounding vs. individual corner adjustments. |
| **Specific Corner** | `0` to `285` | Defines curvature per corner for asymmetrical card designs. The default is Android Material 3's `28`. |
{{:ui:ui-resource-shape-rnd_rect-parms-v4.webp?direct&200|Rounded Rectangle Parameters Dialog}}
++++
++++ 🔷 Arc|
^ **Arc Parameters** ^^^
^ **Parameter** ^ **Range** ^ **Functional Behavior** ^
| **Start Angle** | Degrees | Sets the starting point along the 360-degree radial path (`0°` = 3 o'clock position). |
| **Sweep Angle** | Degrees | Sets the length of the arc span (`90°` = quarter arc, `180°` = semicircle, `360°` = full circle). |
{{:ui:ui-resource-shape-arc-parms-v4.webp?direct&200|Arc Parameters Dialog}}
++++
++++ 🔷 Squircle|
^ **Squircle Parameters** ^^^
^ **Parameter** ^ **Range** ^ **Functional Behavior** ^
| **Curvature** | `2` to `10` | Controls edge curvature. A value of `3` creates a standard squircle; `10` approaches a rounded rectangle. |
{{:ui:ui-resource-shape-squircle-parms-v4.webp?direct&200|Arc Parameters Dialog}}
++++
++++ 🔷 Polygon|
^ **Polygon Parameters** ^^^
^ **Parameter** ^ **Range** ^ **Functional Behavior** ^
| **Sides** | `3` to `24` | Sets the total number of polygon sides (e.g., `3` = triangle, `5` = pentagon). |
| **Rounded Corner Radius** | `0` to `50` | Rounds the vertices. Higher values smooth the corners toward a circular profile. |
| **Size** | `50%` to `200%` | Scales the relative display size within the bounding box. |
| **Rotate** | `-180°` to `180°` | Rotates the shape on a 2D plane prior to placing it on the page. |
{{:ui:ui-resource-shape-polygon-parms-v4.webp?direct&200|Arc Parameters Dialog}} ⇔ {{:ui:ui-resource-shape-polygon-3_24-v4.webp?direct&150}}
++++
===== 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:
- Create a shape with a solid fill (e.g., `#FF1E1E1E` for dark mode).
- Set the corner radius to `28`.
- 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:
- Select an **Oval** shape resource.
- Set the image as a mask fill over a square photo object.
- 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.
{{page>site:site-footer-comment_feedback_block}}