meta data for this page
  •  

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
section:section-layout-circle-orig [2026/07/24 13:42] – removed - external edit (Unknown date) 127.0.0.1section:section-layout-circle-orig [2026/07/24 13:42] (current) – ↷ Page name changed from section:section-layout-circle to section:section-layout-circle-orig doreps
Line 1: Line 1:
 +====== Total Launcher Circle Layout Configuration: A Guide To Radial Menus and Spinner Settings ======
  
 +====== Circle Layout Configuration ======
 +
 +The Circle Layout Configuration dialog in Total Launcher provides dedicated options for arranging interactive objects into a radial pattern on Android devices. Modifying spatial alignment, icon behavior, typography, and background properties allows dynamic, functional ring menus and highly aesthetic custom interfaces to be created. This configuration dialog dictates exactly how items align within the circular container, offering unique features like the interactive fidget spinner effect before transitioning into standard animation behaviors.
 +<WRAP hscroll_box>
 +<WRAP 70%>
 +To place the grid layout on the page:
 +  * Enter [[:section:section-basic_editing#to_enter_edit_mode|Edit Mode]] (Long press an empty area -> Toggle Edit Mode icon) > Tap the ++''Edit Off'' icon|{{:ui:ui-icon_edit_mode-edit_off-v4.webp?direct&100}}++ in the lower right to change it to an ++''Edit On'' icon|{{:ui:ui-icon_edit_mode-edit_on-v4.webp?direct&35}}++
 +  * In the ++Object Design menu (top)|{{:ui:ui-icon_object_design_menu_top-v4.webp?direct&200}}++, select the ++Option icon|{{:ui:ui-icon_option-25-v4.webp}}++ to open the ++Add dialog|{{:ui:ui-object_add-selection-v4.webp?direct&150}}++. Select ''Layout'' > ''Circle''
 +  * The circle object with its default 6 elements is on the page, selected.
 +
 +The layout dialog contains multiple configuration sections, as shown in the edit mode interface ++here|{{ui:ui-layout-circle-v4.webp?direct&300|Circle Layout in Edit Mode}}++. 
 +===== Configuration Procedure =====
 +Follow this sequence to apply modifications to the radial layout that is now on the page:
 +  * If not currently selected, tap-hold the grid object to select it.
 +  * In the ++Object Design Menu (top)|{{:ui:ui-icon_object_design_menu_top-v4.webp?direct&200}}++ select the ++Option icon|{{:ui:ui-icon_option-25-v4.webp}}++.
 +  * Review the menu panels indicated at the bottom of the interface.
 +    * Select [[#options_-_general|''OPTIONS'']] to modify the static parameters.
 +    * Select [[#animation|''ANIMATION'']] to adjust dynamic behaviors.
 +  * Apply the desired variable changes within the respective menus. 
 +</WRAP>
 +<WRAP>
 +{{:ui:ui-layout-circle-v4.webp?direct&200}}\\ or view the ++fidget spinner!|{{:section:section-layout-circle-figet_spinner-video-v4.gif?}}++
 +</WRAP>
 +</WRAP>
 +<WRAP hscroll_box>
 +<WRAP>
 +{{:ui:ui-layout-circle-dialog_full-v4.webp?direct&175|}}
 +</WRAP>
 +<WRAP>
 +===== The Circle Layout Option Dialog =====
 +==== Options - General ====
 +Configure the arrangement and interactive behavior of the radial container.
 +  * **Number of items:** - Define the total number of interactive placeholders assigned to the circular layout.
 +  * **Launch animation:** - Set the animation triggered upon launching an item. Note that this selection requires the ''PRO'' version upgrade.
 +  * **Fidget spinner:** - Enable this toggle to allow the entire layout to spin freely via physical swipe interactions when the launcher is in standard use mode.
 +
 +=== Options - Launch sound ===
 +Assign specific device sounds to physical interactions when the radial layout is activated.
 +  * **Tap:** - Select the sound played upon a single tap.
 +  * **Swipe up:** - Select the sound played upon an upward swipe.
 +  * **Swipe down:** - Select the sound played upon a downward swipe.
 +  * **Swipe left:** - Select the sound played upon a leftward swipe.
 +  * **Swipe right:** - Select the sound played upon a rightward swipe.
 +==== Options - Icon ====
 +Modify the visual attributes of the icon images contained within the circle.
 +  * **Icon size:** - Adjust the overall size (scale) of the icons.
 +  * **Icon padding:** - Modify the internal space surrounding the icons.
 +  * **Icon opacity (%):** - Adjust the transparency level of the icons, utilizing values such as ''100%'' for solid visibility.
 +  * **Icon saturation (%):** - Modify the color intensity, where ''100%'' represents natural colors and reduced values approach grayscale.
 +  * **Icon color filter:** - Apply a specific color overlay or tint to all icons uniformly.
 +===== Options - Label =====
 +Control the display parameters and typography of the text associated with each radial item.
 +  * **Show label:** - Toggle the visibility state of the text labels to On or Off.
 +  * **Typeface:** - Select the specific font family applied to the label text.
 +  * **Label lines:** - Determine the maximum number of lines permitted for text wrapping, ranging from ''1'' to ''3''.
 +  * **Font size:** - Adjust the structural point size of the label text.
 +  * **Scale X (%):** - Stretch or compress the text width horizontally.
 +  * **Text color:** - Define the primary resting color of the text using the Launcher's [[:section:section-color_picker|Color Picker]] and apply a hexadecimal value such as ''#FFFFFFFF''.
 +  * **Text color (pressed):** - Same as ''Text color'' above, but changes the text color as the object is 'pressed' or tapped.
 +==== Options - Shadow ====
 +Apply drop shadows to text labels for enhanced contrast against varied backgrounds. See [[:section:section-shadow|here]] for more detail on how to use Shadows.
 +  * **Shadow color:** - Select the hue of the underlying text shadow.
 +  * **Shadow radius:** - Control the blur, spread, or sharpness of the shadow effect.
 +  * **Shadow offset X:** - Shift the shadow position along the horizontal axis.
 +  * **Shadow offset Y:** - Shift the shadow position along the vertical axis.
 +===== Options - Background =====
 +Configure the container styling, individual item backgrounds, and spacing parameters.
 +  * **Background:** - Set the global color or image for the entire circular container.
 +  * **Margins:** - Define the external spacing outside the layout boundary, requiring specific integer values for ''left'', ''top'', ''right'', and ''bottom''.
 +  * **Item background:** - Set the resting background color or image for individual items.
 +  * **Item background (pressed):** - Set the background visual for individual items during a press interaction.
 +  * **Item background (focused):** - Set the background visual for individual items when navigated to via hardware controls or focus states.
 +  * **Item spacing:** - Adjust the internal gap distance between individual items placed along the circle structure.
 +</WRAP>
 +</WRAP>
 +
 +<WRAP noprint>{{page>site:site-footer-comment_feedback_block}}</WRAP>