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
Next revision		Previous revision
section:section-widget [2026/07/26 12:59] – [Widget: Compass] dorepssection:section-widget [2026/08/01 19:01] (current) – doreps
Line 1: Line 1:
-<Withinide>%%<!-- googleoff: index -->%%</WRAP> +====== Total Launcher Widgets Guide: Advanced Features for Android Customization ======
-<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> +
- +
- +
- +
----- +
- +
- +
-===== Widgets =====+
  
-This chapter is designed to guide new and intermediate Total Launcher (TL) users on the types, functions, and customization options of widgets within the launcher environment. Widgets in Total Launcher provide both essential dynamic functionality and highly customizable wrapper containers for holding applications, windows, folders, launcher actions, application shortcuts, and system status displays.+Widgets within Total Launcher serve as essential dynamic components for Android customization, delivering advanced features and highly adaptable wrapper containers for applications, folders, and system status displays. Integrating these functional objects into a custom setup elevates the homescreen layout by merging aesthetic appeal with immediate accessibility. Utilizing these objects allows for deep layout design modifications, effectively transforming static screens into interactive, floating dashboards. Accessing and configuring these tools requires entering Edit Mode by long-pressing an empty screen area, tapping the Toggle Edit Mode icon, and selecting the Object Design menu to open the Widget selection dialog.
  
 +This chapter guides new and intermediate Total Launcher (TL) users through the types, functions, and customization options of widgets within the launcher environment. Widgets in Total Launcher provide both essential dynamic functionality and highly customizable wrapper containers for holding applications, windows, folders, launcher actions, application shortcuts, and system status displays.
  
 ==== Overview and Types of Widgets ==== ==== Overview and Types of Widgets ====
  
-In Total Launcher, the widget is one of the three main object categories, alongside **Layout** and **Graphic**. A widget is an individual object with an independent, specialized design and features for its specific purpose.+In Total Launcher, widgets are one of the three main object categories, alongside **Layout** and **Graphic**. A widget is an individual object with an independent, specialized design and features for its specific purpose.
  
 Total Launcher offers two primary categories of widgets:  Total Launcher offers two primary categories of widgets: 
Line 28: Line 15:
 ==== Widget Selection Dialog ==== ==== Widget Selection Dialog ====
  
-To locate this dialog, navigate to ''Edit On'' > Object Design menu (top) ''+'' > ''Widget''. This ++dialog|{{:ui:ui-widget-type_selections-image.webp?direct&200}}++ will be seen. The selections are explained below.+To locate this dialog, 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|Edit On}}++ Object Design menu (top) ''+'' > ''Widget''. This ++dialog|{{ui:ui-widget-type_selections-image-v4.webp?direct&200|Widget dialog}}++ will be seen. The selections are explained below.
  
 ==== Widget - Placement and Advanced Uses ==== ==== Widget - Placement and Advanced Uses ====
Line 34: Line 21:
 === Add a Widget === === Add a Widget ===
  
-To add an Application Widget, enter [[:ui:ui-edit_on|''Edit On'' mode]] [long-press an empty area on the Page, Drawer, or Window] and select **Add (+)** icon {{ui:ui-icon_add-white_on_black-v4.webp?25}}, then select ''Widget'' from the Add dialog list. A visual thumbnail of all widgets will display in **//non-alphabetical//** order.  **Application Widgets** will contain only widgets for apps installed on the user's device.+To add an Application Widget, enter [[:section:section-basic_editing#to_enter_edit_mode|''Edit On'' mode]] [long-press an empty area on the Page, Drawer, or Window] and select **Add (+)** icon {{ui:ui-icon_add-white_on_black-v4.webp?25|Add icon}}, then select ''Widget'' from the Add dialog list. A visual thumbnail of all widgets will display in **//non-alphabetical//** order.  **Application Widgets** will contain only widgets for apps installed on the user's device.
  
 Widgets can be added to a page, sliding drawer, or window. Folders will not accept widgets. Widgets can be added to a page, sliding drawer, or window. Folders will not accept widgets.
Line 45: Line 32:
 There are fourteen built-in widgets in Total Launcher: There are fourteen built-in widgets in Total Launcher:
  
-      *++**App Drawer**|{{:ui:ui-widget-app_drawer-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_app_drawer|(jump to full discussion)]] displays applications installed on the device, often functioning as a comprehensive app group with highly customizable layout, grid/list or columns/rows with various sorting options such as +      *++**App Drawer**|{{ui:ui-widget-app_drawer-image-v4.webp?direct&200|App Drawer image}}++ [[:section:section-widget#widget:_-_app_drawer|(jump to full discussion)]] displays applications installed on the device, often functioning as a comprehensive app group with a highly customizable layout, grid/list or columns/rows with various sorting options such as 
         * default as controlled by main menu > launcher options > behavior > app drawer section         * default as controlled by main menu > launcher options > behavior > app drawer section
         * smart based on frequency of use, time of day, and other smart measures         * smart based on frequency of use, time of day, and other smart measures
Line 52: Line 39:
         * offers a full menu bar         * offers a full menu bar
  
-      *++**App Drawer (pager)**|{{:ui:ui-widget-app_drawer_pager-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_app_drawer_(pager)|(jump to full discussion)]] is a newer type of app drawer widget which scrolls horizontally. It does have differences from the app drawer widget.+      *++**App Drawer (pager)**|{{ui:ui-widget-app_drawer_pager-image-v4.webp?direct&200|App Drawer (pager)}}++ [[:section:section-widget#widget:_-_app_drawer_(pager)|(jump to full discussion)]] is a newer type of app drawer widget which scrolls horizontally. It differs from the app drawer widget.
  
-      *++**App Group**|{{:ui:ui-widget-app_group-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_app_group|(jump to full discussion)]] functions similarly to the App Drawer but allows for grouping its items (apps, windows, folders, shortcuts) by user-defined criteria (mostly folders). It offers a customizable layout, icons, labels, and background.+      *++**App Group**|{{ui:ui-widget-app_group-image-v4.webp?direct&200|App Group}}++ [[:section:section-widget#widget:_-_app_group|(jump to full discussion)]] functions similarly to the App Drawer but allows for grouping its items (apps, windows, folders, shortcuts) by user-defined criteria (mostly folders). It offers a customizable layout, icons, labels, and background.
  
-      *++**Contacts**|{{:ui:ui-widget-contacts-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_contacts|(jump to full discussion)]] displays user contacts, based on the device's contact manager, and can be set to grid or list type. It supports long-click calls and allows setting a default graphic for items without a photo.+      *++**Contacts**|{{ui:ui-widget-contacts-image-v4.webp?direct&200|Contacts}}++ [[:section:section-widget#widget:_-_contacts|(jump to full discussion)]] displays user contacts, based on the device's contact manager, and can be set to grid or list type. It supports long-click calls and allows setting a default graphic for items without a photo.
  
-      *++**Media Controller**|{{:ui:ui-widget-media_controller1-image.webp?direct&100}}{{:ui:ui-widget-media_controller2-image.webp?direct&100}}++ [[:section:section-widget#widget:_-_media_controller|(jump to full discussion)]] provides controls for a media application which supports the Android Media Controller API (e.g., Google Music, Poweramp). It also allows selecting a target app, customizing control button size, text size/color, icon color, and using a foreground image (skin). It can display the currently running media app even if a specific target app is not selected.+      *++**Media Controller**|{{ui:ui-widget-media_controller1-image-v4.webp?direct&100|Media Controller - Basic}}{{ui:ui-widget-media_controller2-image-v4.webp?direct&100|Media Controller - Active}}++ [[:section:section-widget#widget:_-_media_controller|(jump to full discussion)]] provides controls for a media application which supports the Android Media Controller API (e.g., Google Music, Poweramp). It also allows selecting a target app, customizing control button size, text size/color, icon color, and using a foreground image (skin). It can display the currently running media app even if a specific target app is not selected.
  
-      *++**Page Indicator**|{{:ui:ui-widget-page_indicator-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_page_indicator|(jump to full discussion)]] shows the user's current position (here a 15 page setup) within the setup pages and can use customizable images or colors for normal, current, and home pages.+      *++**Page Indicator**|{{ui:ui-widget-page_indicator-image-v4.webp?direct&200|Page Indicator}}++ [[:section:section-widget#widget:_-_page_indicator|(jump to full discussion)]] shows the user's current position (here a 15 page setup) within the setup pages and can use customizable images or colors for normal, current, and home pages.
  
-      *++**Analog Clock**|{{:ui:ui-widget-analog_clock-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_analog_clock|(jump to full discussion)]] displays the time and allows setting a time zone and customizing the appearance of the hour hand, minute hand, and second hand (which can be hidden using a transparent color).+      *++**Analog Clock**|{{ui:ui-widget-analog_clock-image-v4.webp?direct&200|Analog Clock}}++ [[:section:section-widget#widget:_-_analog_clock|(jump to full discussion)]] displays the time and allows a user to set a time zone and customize the appearance of the hour hand, minute hand, and second hand (which can be hidden using a transparent color).
  
-      *++**Compass**|{{:ui:ui-widget-compass-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_compass|(jump to full discussion)]] displays a compass functionality. It provides a basic image of the compass needle (skin) and supports applying a color filter to that skin.+      *++**Compass**|{{ui:ui-widget-compass-image-v4.webp?direct&200|Compass}}++ [[:section:section-widget#widget:_-_compass|(jump to full discussion)]] displays a compass functionality. It provides a basic image of the compass needle (skin) and supports applying a color filter to that skin.
  
-      *++**Circle Indicator**|{{:ui:ui-widget-circle_indicator-image.webp?direct&100}}++ [[:section:section-widget#widget:_-_circle_indicator|(jump to full discussion)]] shows the current status for a selected resource such as //battery//, //RAM usage//, //storage//, or //SD card usage//.+      *++**Circle Indicator**|{{ui:ui-widget-circle_indicator-image-v4.webp?direct&100|Circle Indicator}}++ [[:section:section-widget#widget:_-_circle_indicator|(jump to full discussion)]] shows the current status for a selected resource such as //battery//, //RAM usage//, //storage//, or //SD card usage//.
  
-      *++**Drawer Handle**|{{:ui:ui-widget-drawer_handle-image.webp?direct&100}}++ [[:section:section-widget#widget:_-_drawer_handle|(jump to full discussion)]] creates an expanded trigger area to pull out a specific //sliding drawer// (left, right, top, or bottom). It requires selecting the target sliding drawer and can use a custom image instead of the default arrow icon.+      *++**Drawer Handle**|{{ui:ui-widget-drawer_handle-image-v4.webp?direct&100|Drawer Handle}}++ [[:section:section-widget#widget:_-_drawer_handle|(jump to full discussion)]] creates an expanded trigger area to pull out a specific //sliding drawer// (left, right, top, or bottom). It requires selecting the target sliding drawer and can use a custom image instead of the default arrow icon.
  
-      *++**Slider**|{{:ui:ui-widget-slider-image.webp?direct&100}}++ [[:section:section-widget#widget:_-_slider|(jump to full discussion)]] offers on-screen control of screen brightness or volumes (media, ring, notification, alarm, or call)+      *++**Slider**|{{ui:ui-widget-slider-image-v4.webp?direct&100|Slider}}++ [[:section:section-widget#widget:_-_slider|(jump to full discussion)]] offers on-screen control of screen brightness or volumes (media, ring, notification, alarm, or call)
  
-      *++*Photo Slide**|{{:ui:ui-widget-photo_slide-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_photo_slide|(jump to full discussion)]] is a photo show wrapper container to sequentially or randomly display images in color or force grayscale from a designated folder in user-selected intervals. The container's skin and corner radius can be modified.+      *++*Photo Slide**|{{ui:ui-widget-photo_slide-image-v4.webp?direct&200|Photo Slide}}++ [[:section:section-widget#widget:_-_photo_slide|(jump to full discussion)]] is a photo show wrapper container that sequentially or randomly displays images in color or forces grayscale from a designated folder at user-selected intervals. The container's skin and corner radius can be modified.
  
-      *++**RSS reader**|{{:ui:ui-widget-rss_reader-image.webp?direct&200}}++ [[:section:section-widget#widget:_-_rss_reader|(jump to full discussion)]] or **R**eally **S**imple **S**yndication for news, podcasts, other channels or aggregation services. The container will support both images with text and text-only, depending on the aggregator's setup. It accepts standard URLs with an unverified number of available %%slot%%s (up to 20 have been tested).+      *++**RSS reader**|{{ui:ui-widget-rss_reader-image-v4.webp?direct&200|RSS Reader}}++ [[:section:section-widget#widget:_-_rss_reader|(jump to full discussion)]] or **R**eally **S**imple **S**yndication for news, podcasts, other channels or aggregation services. The container will support both images with text and text-only, depending on the aggregator's setup. It accepts standard URLs with an unverified number of available %%slot%%s (up to 20 have been tested).
  
-      *++**Checklist**|{{:ui:ui-widget-checklist1-image.webp?direct&150}}{{:ui:ui-widget-checklist2-image.webp?direct&150}}++ [[:section:section-widget#widget:_-_checklist|(jump to full discussion)]] is a widget to help users manage and track tasks. It offers manual addition, editing, and sorting.+      *++**Checklist**|{{ui:ui-widget-checklist1-image-v4.webp?direct&150|Checklist - View}}{{ui:ui-widget-checklist2-image-v4.webp?direct&150|Checklist - Edit}}++ [[:section:section-widget#widget:_-_checklist|(jump to full discussion)]] is a widget to help users manage and track tasks. It offers manual addition, editing, and sorting.
  
-      *++**Application**|{{:ui:ui-widget-application_widget.webp?direct&200}}++ - [[:section:section-widget#widget:_-_application|(jump to full discussion)]] Every device has 3rd party application for varying purposes, and application developers frequently offer to present their app's data in a customized format. If selected by the user in this dialog, Total Launcher extracts the container and provides placement for the user and some additional customization.+      *++**Application**|{{ui:ui-widget-application_widget-v4.webp?direct&200|Application Widget}}++ - [[:section:section-widget#widget:_-_application|(jump to full discussion)]] Every device has 3rd-party applications for varying purposes, and application developers frequently offer to present their app's data in a customized format. If the user selects this in the dialog, Total Launcher extracts the container and provides placement for the user, along with some additional customization.
  
-Below is a more detailed discussion of each built-in widget. Understanding the differences between similar widgets, such as App Drawer, App Drawer (pager), App Group, and Contacts, is difficult. If the descriptions below still leave questions, this ++spreadsheet representation| {{:section:section-widget-feature\_comparison\_chart.webp?direct&200}} Tap to enlarge ++ may be more helpful for those interested.+Below is a more detailed discussion of each built-in widget. Understanding the differences between similar widgets, such as App Drawer, App Drawer (pager), App Group, and Contacts, is difficult. If the descriptions below still leave questions, this ++spreadsheet representation| {{:section:section-widget-feature\_comparison\_chart.webp?direct&200|Widget Feature Comparison Chart}} Tap to enlarge ++ may be more helpful for those interested.
  
 ---- ----
Line 87: Line 74:
  
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{  :ui:ui-widget-app_drawer-image.webp?direct&200  }}|The **App Drawer** widget is critical for //advanced// setup customization, offering flexibility in how apps are accessed. It can be placed directly on a page, within a window (to create a floating pop-up app drawer), or anchored to a screen edge (simulating a sliding drawer).|+|{{  ui:ui-widget-app_drawer-image-v4.webp?direct&200|App Drawer Widget  }}|The **App Drawer** widget is critical for //advanced// setup customization, offering flexibility in how apps are accessed. It can be placed directly on a page, within a window (to create a floating pop-up app drawer), or anchored to a screen edge (simulating a sliding drawer).|
  
 === Interaction & Navigation === === Interaction & Navigation ===
  
-The bottom **Menu Bar** {{:ui:ui-icon_app_drawer_menu_bar.webp?direct&100}} of the widget is the control center for finding and organizing apps. It contains the **Add**, **Sort**, **Tag**, and **Search** icons.+The bottom **Menu Bar** {{ui:ui-icon_app_drawer_menu_bar-v4.webp?direct&100}} of the widget is the control center for finding and organizing apps. It contains the **Add**, **Sort**, **Tag**, and **Search** icons.
  
-To customize the visual appearance of this bar (background, icon sets, text color/typeface), enter ''Edit On'' > select the App drawer (highlight) > select Object Design Menu (top) {{ui:ui-icon_object_design_menu_top-v4.webp?direct&150}} > '' Options'' {{ui:ui-icon_option-v4.webp?direct&15}}.+To customize the visual appearance of this bar (background, icon sets, text color/typeface), enter ''Edit On'' > select the App drawer (highlight) > select Object Design Menu (top) {{ui:ui-icon_object_design_menu_top-v4.webp?direct&150|Object Design Menu (top)}} > '' Options'' {{ui:ui-icon_option-v4.webp?direct&15}}.
  
 == Search == == Search ==
  
-The Search icon {{ui:ui-icon_search-v4.webp?direct&15}} on the bottom menu bar offers two modes:+The Search icon {{ui:ui-icon_search-v4.webp?direct&15|Search icon}} on the bottom menu bar offers two modes:
   ***Index Search** - Offers a selection of initial letters, numbers, or special characters to jump to specific items.   ***Index Search** - Offers a selection of initial letters, numbers, or special characters to jump to specific items.
-    * **Keyboard Search** - The 3-dot icon {{:ui:ui-icon-3dot.webp?direct&25}} at the bottom opens a full keyboard search.+    * **Keyboard Search** - The 3-dot icon {{ui:ui-icon-3dot-v4.webp?direct&25|3-dot menu}} at the bottom opens a full keyboard search.
     * **Folder Support** - Search can optionally include items contained inside folders. Toggle this via ''Main Menu'' > ''Launcher Options'' > ''Behavior'' > ''Search in folder''.     * **Folder Support** - Search can optionally include items contained inside folders. Toggle this via ''Main Menu'' > ''Launcher Options'' > ''Behavior'' > ''Search in folder''.
  
Line 110: Line 97:
 == Sorting == == Sorting ==
  
-The **Menu Bar** allows a managed ''Sort'' {{ui:ui-icon_sort-v4.webp?direct&15}} icon on the menu bar.+The **Menu Bar** allows a managed ''Sort'' {{ui:ui-icon_sort-v4.webp?direct&15|Sort icon}} icon.
   ***Temporary Sorting**: Sort momentarily by **Name**, **Recently installed**, or **Recent updates**.   ***Temporary Sorting**: Sort momentarily by **Name**, **Recently installed**, or **Recent updates**.
-    ***Persistent Sorting**: Defined in the widget's **Shared Options** \> **Sort order**. Options include:+    ***Persistent Sorting**: Defined in the widget's **Shared Options** > **Sort order**. Options include:
         * **Name** - Alphabetical.         * **Name** - Alphabetical.
         * **User Defined**  -Allows manual rearrangement of apps and folders in Edit Mode.         * **User Defined**  -Allows manual rearrangement of apps and folders in Edit Mode.
         * **Smart** - Ranks items based on usage patterns (time of day, location, headset status, etc.). The number of "smart picks" can be set from 1 to 25.         * **Smart** - Ranks items based on usage patterns (time of day, location, headset status, etc.). The number of "smart picks" can be set from 1 to 25.
-  ***Tags** {{:ui:ui-icon-sort.webp?direct&15}} - This allows users to group applications.+  ***Tags** {{:ui:ui-icon_sort-v4.webp?direct&15|Sort icon}} - This allows users to group applications.
     ***Built-in Tags** - Includes categories such as Productivity, Folder, and Hidden. Additional categories (Maps, News, Social, Games, etc.) can be enabled via ''Main Menu'' \> ''Launcher Options'' \> ''Behavior'' \> ''Built-in tags''.     ***Built-in Tags** - Includes categories such as Productivity, Folder, and Hidden. Additional categories (Maps, News, Social, Games, etc.) can be enabled via ''Main Menu'' \> ''Launcher Options'' \> ''Behavior'' \> ''Built-in tags''.
     ***Untagged Items** - An option exists to display **only** items that have no tag assigned.     ***Untagged Items** - An option exists to display **only** items that have no tag assigned.
Line 122: Line 109:
 === Visual Design === === Visual Design ===
  
-The design options are, again, available once the widget is selected and the **Option icon** {{ui:ui-icon_option-v4.webp?direct&15}} is tapped.+The design options are, again, available once the widget is selected and the **Option icon** {{ui:ui-icon_option-v4.webp?direct&15|Option icon}} is tapped.
  
-== Layout & Scrolling ==+== Layout & Quick Scrolling ==
  
   ***View Type** - Toggle between **Grid type** (customizable columns/rows from 1 to 16) or **List type** (vertical list with icon and name).   ***View Type** - Toggle between **Grid type** (customizable columns/rows from 1 to 16) or **List type** (vertical list with icon and name).
-  ***Scrolling** - Behavior is vertical. Options include **System scroll animation**, **Snap scroll** (prevents items from being cut off), **Hide scrollbar**, or **Quick scroll** (see demo ++here|A nice alpha-visual scrolling search effect: {{:ui:ui-widget-app_drawer-quick_scroll-video-v4.gif}}+++  ***Scrolling** - Vertical scrolling. Options include **System scroll animation**, **Snap scroll** (prevents items from being cut off), **Hide scrollbar**, or **Quick scroll** (see demo ++here|A nice alpha-visual scrolling search effect: {{:ui:ui-widget-app_drawer-quick_scroll-video-v4.gif|Quick Scroll video}}++)
 <WRAP center round tip> <WRAP center round tip>
 Widgets placed in windows that have native scrolling will retain their own internal scrolling characteristics. Widgets placed in windows that have native scrolling will retain their own internal scrolling characteristics.
Line 156: Line 143:
 == Animation & Badges == == Animation & Badges ==
  
-  ***Launch Animation** - Located in the Edit dialog, this controls the effect when the app opens. Options include ''System default'', ''No animation'', ''Fast'', ''Fade in'', ''Popup'', or directional slides (''Flying to/Sliding from'').+  * **Animation** - Located in the Edit dialog, this controls the effect when the app opens. Options include ''System default'', ''No animation'', ''Fast'', ''Fade in'', ''Popup'', or directional slides (''Flying to/Sliding from'').
  
-  ***Badge Counts** - A visual indicator (a red circle with a number) that shows the number of unread notifications or new items waiting for the user in the specific app. These can be customized directly within the widget's **Shared Options**. +  * **Badge Counts** - This is located in the "Shared Options" tab. A visual indicator (a red circle with a number) that shows the number of unread notifications or new items waiting for the user in the specific app. These can be customized directly within the widget's **Shared Options**. 
-    * <WRAP center round todo>+<WRAP center round todo>
 VERIFY THIS COMMENT: do badges show on App Drawer and not App Group? Check your phone ... then adjust this ... This differs from the **App Group**, which displays badges, but customization is handled only system-wide via ''Main Menu'' > ''Launcher Options'' > ''Icon Style'' > ''Badge Count''. VERIFY THIS COMMENT: do badges show on App Drawer and not App Group? Check your phone ... then adjust this ... This differs from the **App Group**, which displays badges, but customization is handled only system-wide via ''Main Menu'' > ''Launcher Options'' > ''Icon Style'' > ''Badge Count''.
 </WRAP> </WRAP>
Line 168: Line 155:
  
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{  :ui:ui-widget-app_drawer_pager-image.webp?direct&200  }}|The **App drawer (pager)** is a distinct, built-in widget that offers an alternative to the standard 'App drawer' for displaying and organizing applications.\\ \\ It is designed as a customizable container that holds user-selected apps and folders, featuring either vertical or horizontal scrolling.\\ \\ Its primary difference lies in its presentation and built-in functionalities, which can provide a more structured and efficient user experience.|+|{{  ui:ui-widget-app_drawer_pager-image-v4.webp?direct&200|App Drawer (pager)  }}|The **App drawer (pager)** is a distinct, built-in widget that offers an alternative to the standard 'App drawer' for displaying and organizing applications.\\ \\ It is designed as a customizable container that holds user-selected apps and folders, featuring either vertical or horizontal scrolling.\\ \\ Its primary difference lies in its presentation and built-in functionalities, which can provide a more structured and efficient user experience.|
  
 The **App drawer (pager)** can be accessed and added by entering ''Edit Mode'' > the ''Add'' icon (+) > ''Widget'', then navigating the list of built-in widgets and selecting it. The **App drawer (pager)** can be accessed and added by entering ''Edit Mode'' > the ''Add'' icon (+) > ''Widget'', then navigating the list of built-in widgets and selecting it.
Line 176: Line 163:
 While the standard "App drawer" is highly customizable, the **App drawer (pager)** widget provides a different structural approach and unique features. A user may prefer this format for the following reasons: While the standard "App drawer" is highly customizable, the **App drawer (pager)** widget provides a different structural approach and unique features. A user may prefer this format for the following reasons:
  
-  ***Paging versus Scrolling:** The fundamental difference is the paginated layout. Instead of a single continuous list, applications are organized across distinct pages that are navigated with a swipe. This can improve organization by allowing users to group apps by category or frequency of use on separate pages.+  ***Paging versus Scrolling:** The fundamental difference is the paginated layout. Instead of a single continuous list, applications are organized across distinct pages that are navigated with a swipe. This can improve organization by allowing users to group apps by category or frequency of use on separate pages. **Quick scrolling** is also offered as in this ++demo|{{:section:section-widget-app_pager-quick_scroll_horiz-v4.gif}} ⇔ {{:section:section-widget-app_pager-quick_scroll_vert-v4.gif}}++ of both vertical //and// horizontal scrolling.
   ***Built-in Search Functionality:** The 'App drawer (pager)' widget includes an integrated app search feature. This provides a significant advantage for users who want to quickly find an application without scrolling through pages or returning to the home screen to use a separate search widget.   ***Built-in Search Functionality:** The 'App drawer (pager)' widget includes an integrated app search feature. This provides a significant advantage for users who want to quickly find an application without scrolling through pages or returning to the home screen to use a separate search widget.
   ***Display Customization:** This widget allows for specific display configurations that differ from the standard drawer.   ***Display Customization:** This widget allows for specific display configurations that differ from the standard drawer.
Line 186: Line 173:
 ==== Widget: App Group ==== ==== Widget: App Group ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-app_group-image.webp?direct&200}}|The App Group shares many core customization and aesthetic features with the App Drawer widget but //does// have some differences noted below. It allows users to create specific groups, which makes it ideal for creating static docks, categorized groups (like "Work Apps" or "Games"), or quick-access panels, rather than displaying all applications on the device (which is the primary function of the App Drawer).|+|{{ui:ui-widget-app_group-image-v4.webp?direct&200|App Group}}|The App Group shares many core customization and aesthetic features with the App Drawer widget but //does// have some differences noted below. It allows users to create specific groups, which makes it ideal for creating static docks, categorized groups (like "Work Apps" or "Games"), or quick-access panels, rather than displaying all applications on the device (which is the primary function of the App Drawer).|
  
 === Customizable Application Container === === Customizable Application Container ===
  
-The App Group widget is primarily used to display a focused selection of icons, relying heavily on user organization and selection. This selection can include applications, windows, folders, or shortcuts.+The App Group widget primarily displays a focused selection of icons, relying heavily on user organization and selection. This selection can include applications, windows, folders, or shortcuts.
  
 ===  Functions and Tagging === ===  Functions and Tagging ===
Line 198: Line 185:
   ***Tagging:** App Group differs from App Drawer in that tagging is //not// available within the drawer since there is no menu system. Tagging can still be done through the App Drawer but cannot be set anew within the App Group. This should not be a significant loss when deciding to use this widget, since the quasi-tag system by group already populates the widget with the desired objects/folders.   ***Tagging:** App Group differs from App Drawer in that tagging is //not// available within the drawer since there is no menu system. Tagging can still be done through the App Drawer but cannot be set anew within the App Group. This should not be a significant loss when deciding to use this widget, since the quasi-tag system by group already populates the widget with the desired objects/folders.
  
-=== Layout and Display ===+=== Layout, Display, and Quick Scrolling ===
  
 The App Group widget provides extensive control over its layout, supporting both grid and list formats: The App Group widget provides extensive control over its layout, supporting both grid and list formats:
Line 204: Line 191:
   ***Layout Type:** The widget can be toggled between **Grid type** or **List type**.   ***Layout Type:** The widget can be toggled between **Grid type** or **List type**.
   ***Grid Dimensions:** When set to **Grid type**, users can define the number of **Columns** (ranging from 1 to 16) and **Rows** (ranging from 1 to 16) to fit the required space on the page, window, or sliding drawer.   ***Grid Dimensions:** When set to **Grid type**, users can define the number of **Columns** (ranging from 1 to 16) and **Rows** (ranging from 1 to 16) to fit the required space on the page, window, or sliding drawer.
- ***Scrolling:** The layout supports vertical scrolling, which is essential for displaying numerous items. Users can customize the scrolling experience using options such as **system scroll animation**, **snap scroll** (to ensure items settle without being cut off), and **hide scrollbar**. Notably, the App Group currently **does not** support horizontal scrolling (paging) like the specialized App Drawer (pager).+ ***Scrolling:** The layout supports vertical scrolling, which is essential for displaying numerous items. Users can customize the scrolling experience using options such as **system scroll animation**, **snap scroll** (to ensure items settle without being cut off), **hide scrollbar**. Notably, the App Group currently **does not** support horizontal scrolling (paging) like the specialized App Drawer (pager).
   ***Menu: Search, Tag, Sort**: //No// menu system for tag, search, or sort is available.   ***Menu: Search, Tag, Sort**: //No// menu system for tag, search, or sort is available.
  
Line 223: Line 210:
 ==== Widget: Contacts ==== ==== Widget: Contacts ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-contacts-image.webp?direct&200}}|**Contacts widget** functions as a specialized container for displaying user contacts with extensive customization options for appearance, layout, and interaction as discussed below.|+|{{ui:ui-widget-contacts-image-v4.webp?direct&200|Contacts}}|**Contacts widget** functions as a specialized container for displaying user contacts with extensive customization options for appearance, layout, and interaction as discussed below.|
  
 === General Functions and Filtering === === General Functions and Filtering ===
Line 233: Line 220:
   ***Layout**: When using the Grid type, the user can customize the layout by setting the number of **Columns** and **Rows**. If grid is set to off, the display will list the contacts in a single column. See below for sorting options.   ***Layout**: When using the Grid type, the user can customize the layout by setting the number of **Columns** and **Rows**. If grid is set to off, the display will list the contacts in a single column. See below for sorting options.
   ***Sorting/Interaction**: The widget supports **Family name first** ordering, which is applicable to Western style names. If not selected, it defaults to first name.   ***Sorting/Interaction**: The widget supports **Family name first** ordering, which is applicable to Western style names. If not selected, it defaults to first name.
-  ***Dialing**: Direct calling by **Long-click call** to the contact's default number is available. This means tapping and holding the contact's image/number initiates a call if the user has previously granted the launcher permission to access the phone. Just a single tap will open the contact data page in the phone app.+  ***Dialing**: Direct calling by **Long-click call** to the contact's default number is available. This means tapping and holding the contact's image/number initiates a call if the user has previously granted the launcher permission to access the phone. A single tap opens the contact data page in the phone app.
  
 === Image and Photo Handling === === Image and Photo Handling ===
Line 240: Line 227:
  
    ***Photo**: The photo shown for each contact defaults to the one in the contact app. If a contact item does not have a photo associated with it, the contact image defaults to an icon with a single capital letter of the contact's name based on sorting order. The user //can// set a **Default photo** within the widget's options for a user-selected icon, image, color, dynamic color, or shape to be used for all contacts lacking a contact app photo.    ***Photo**: The photo shown for each contact defaults to the one in the contact app. If a contact item does not have a photo associated with it, the contact image defaults to an icon with a single capital letter of the contact's name based on sorting order. The user //can// set a **Default photo** within the widget's options for a user-selected icon, image, color, dynamic color, or shape to be used for all contacts lacking a contact app photo.
-   ***Aesthetics**: The size and spacing of the displayed contact icons/images are adjustable via **icon size** (in pixels) and **icon padding** (margins around the icon expressed as a percentage of icon size) and icon **rounded corner**.+   ***Aesthetics**: The size and spacing of the displayed contact icons/images are adjustable via **icon size** (in pixels), **icon padding** (margins around the icon expressed as a percentage of icon size), and the icon **rounded corner**.
  
 === Customization Details === === Customization Details ===
Line 256: Line 243:
   ***Label lines** setting determines the number of lines available for the label (1 to 3).   ***Label lines** setting determines the number of lines available for the label (1 to 3).
   ***Background**   ***Background**
-    ***Background** setting will provide for complete color, dynamic color, icon pack, shape, image, or dynamic image selection. +    The ***Background** setting provides complete color, dynamic color, icon pack, shape, image, or dynamic image selection. 
       * The background for individual items (**item background**), including states when pressed or focused (**item background (pressed)** and **item background (focused)**), can also be customized as covered in the general background above.       * The background for individual items (**item background**), including states when pressed or focused (**item background (pressed)** and **item background (focused)**), can also be customized as covered in the general background above.
       * The distance between items is controlled by **Item spacing** (in pixels).       * The distance between items is controlled by **Item spacing** (in pixels).
Line 265: Line 252:
     * The bottom menu bar used for controlling the widget contents is highly customizable in terms of color, dynamic color, icon pack, shape, and image. The appearance of text on the menu bar is adjustable via **menu text color** (can be invisible if desired) and **menu text typeface**.     * The bottom menu bar used for controlling the widget contents is highly customizable in terms of color, dynamic color, icon pack, shape, and image. The appearance of text on the menu bar is adjustable via **menu text color** (can be invisible if desired) and **menu text typeface**.
       * Menu bar elements include: (not discussed individually are add icon, star on icon, star off icon, dial icon, sort icon, group icon, search icon, and clear menu icon       * Menu bar elements include: (not discussed individually are add icon, star on icon, star off icon, dial icon, sort icon, group icon, search icon, and clear menu icon
-      * **Menu background** is customizable in the same manner as Contact container background discussed above.+      * **Menu background** is customizable in the same manner as the Contact container background discussed above.
   ***Animation**   ***Animation**
     ***Enter animation** for the Contacts widget actually occurs when the user completes a call and returns to the open Contact widget.     ***Enter animation** for the Contacts widget actually occurs when the user completes a call and returns to the open Contact widget.
Line 274: Line 261:
 ==== Widget: Media Controller ==== ==== Widget: Media Controller ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-media_controller1-image.webp?direct&100}} {{:ui:ui-widget-media_controller2-image.webp?direct&100}}|This controls a media application and specifically works with media player apps that adhere to the **MediaController API** of the Android framework. Rather than attempting to list compatible media players, if the widget does not perform, the user should determine whether the media player meets this criterion.\\ The Media Controller displays a set of controls (buttons) along with media metadata (title and artist) and album art for managing audio or video playback.|+|{{ui:ui-widget-media_controller1-image-v4.webp?direct&100|Media Controller - Basic}} {{ui:ui-widget-media_controller2-image-v4.webp?direct&100|Media Controller - Active}}|This controls a media application and specifically works with media player apps that adhere to the **MediaController API** of the Android framework. Rather than attempting to list compatible media players, if the widget does not perform, the user should determine whether the media player meets this criterion.\\ The Media Controller displays a set of controls (buttons) along with media metadata (title and artist) and album art for managing audio or video playback.|
  
 === Key Functions and Configuration === === Key Functions and Configuration ===
Line 307: Line 294:
 ==== Widget: Page indicator ==== ==== Widget: Page indicator ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-page_indicator-image.webp?direct&200}}|The widget serves as a visual aid to show the current location within the setup's available pages.\\ \\ The default page indicator consists of a "house" image representing the home page, and multiple dots for setups with more than one page, all in white. (The image shown is for a 15-page setup.)\\ \\ As a user's action causes the viewable page to change, the indicator representing the current page will enlarge slightly. This means each indicator (page) has 2 states:\\ • focused -or- current\\ • unfocused -or- available but not being viewed|+|{{ui:ui-widget-page_indicator-image-v4.webp?direct&200|Page Indicator}}|The widget serves as a visual aid to show the current location within the setup's available pages.\\ \\ The default page indicator consists of a "house" image representing the home page, and multiple dots for setups with more than one page, all in white. (The image shown is for a 15-page setup.)\\ \\ As a user's action causes the viewable page to change, the indicator representing the current page will enlarge slightly. This means each indicator (page) has 2 states:\\ • focused -or- current\\ • unfocused -or- available but not being viewed|
  
 === Customization and States === === Customization and States ===
Line 326: Line 313:
 ==== Widget: Analog clock ==== ==== Widget: Analog clock ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-analog_clock-image.webp?direct&200}}|This functions as a clock face, displaying time with hour, minute, and second hands.|+|{{ui:ui-widget-analog_clock-image-v4.webp?direct&200|Analog Clock}}|This functions as a clock face, displaying time with hour, minute, and second hands.|
  
 === Customization and Features === === Customization and Features ===
Line 341: Line 328:
     * **Background**: The overall background of the widget would be the clock face. Users should find suitable images to import into Resource Images in the launcher for customization.     * **Background**: The overall background of the widget would be the clock face. Users should find suitable images to import into Resource Images in the launcher for customization.
       * The default background is transparent but can be modified with any of the six options above.       * The default background is transparent but can be modified with any of the six options above.
-    * **Margins**: The margins default to 5 pixels on all sides. An increase in the margins on all sides would reduce the space available for the hands, making them occupy less space. Also, manipulation of the margins could be used as an offset to shift the center point (fulcrum). The margin modification does //not// affect the background display.+    * **Margins**: The margins default to 5 pixels on all sides. Increasing the margins on all sides would reduce the space available for the hands, making them occupy less space. Also, manipulation of the margins could be used as an offset to shift the center point (fulcrum). The margin modification does //not// affect the background display.
   * **Animation**   * **Animation**
     * **Enter animation** for the analog clock widget. **See more discussion on enter animation here**.     * **Enter animation** for the analog clock widget. **See more discussion on enter animation here**.
       * If the clock is on the designated home page and the phone is on the home page, the enter animation is affected after a system doze and "awakened" by the power button or phone unlock.        * If the clock is on the designated home page and the phone is on the home page, the enter animation is affected after a system doze and "awakened" by the power button or phone unlock. 
       * Returning to home screen from exiting 'recent apps', enter animation activates.        * Returning to home screen from exiting 'recent apps', enter animation activates. 
-      * 'Quick Exit' swipe: swiping up from bottom navigation bar wipes the immediate app to backround and brings forth the home screen, in which enter animation also activates, creating a clean transition.  +      * 'Quick Exit' swipe: swiping up from the bottom navigation bar wipes the immediate app to background and brings forth the home screen, in which the enter animation also activates, creating a clean transition. 
-      * **Fixme ... hopefully, some creative soul will insert another way that this is used or useful!**+
  
 ---- ----
Line 353: Line 339:
 ==== Widget: Compass ==== ==== Widget: Compass ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-compass-image.webp?direct&200}}|The **Compass** provides directional functionality.|+|{{ui:ui-widget-compass-image-v4.webp?direct&200|Compass}}|The **Compass** provides directional functionality.|
  
 All customization for compass elements has access to the widget's Edit dialog, which accesses the launcher's Edit dialog, in the following manner: All customization for compass elements has access to the widget's Edit dialog, which accesses the launcher's Edit dialog, in the following manner:
Line 388: Line 374:
     * Shape - Easily, a user-specific shape could be customized. See [[:ui:ui-resources-shape|here.]]     * Shape - Easily, a user-specific shape could be customized. See [[:ui:ui-resources-shape|here.]]
     * Image - Be creative in selecting an image for the compass needle. North is the top of the image! See [[:ui:ui-resources-image|here.]]     * Image - Be creative in selecting an image for the compass needle. North is the top of the image! See [[:ui:ui-resources-image|here.]]
-  * **Color**: A color can be applied to filter (draw over the skin) the image, providing control over the final appearance of the compass graphic. If using a color, an opaque selection will obscure the skin, whereas a transparent selection (where the # begins with ''00'' through ''99'') would cover the compass needle. This uses the launcher's Color Picker utility shown [[:ui:ui-color_picker|here.]]+  * **Color**: A color can be applied to filter (draw over the skin) the image, providing control over the final appearance of the compass graphic. If using a color, an opaque selection will obscure the skin, whereas a transparent selection (where the # begins with ''00'' through ''99'') would cover the compass needle. This uses the launcher's Color Picker utility shown [[:section:section-color_picker|here.]]
     * Dynamic color: This option will cause the skin/needle colors to harmonize or contrast with changing wallpapers in accordance with Android Material You standards. See the TL screen[[:ui:ui-resources-dynamic_color|here*]] or the concept discussed [[section:section-dynamic_color_customize|here.]]     * Dynamic color: This option will cause the skin/needle colors to harmonize or contrast with changing wallpapers in accordance with Android Material You standards. See the TL screen[[:ui:ui-resources-dynamic_color|here*]] or the concept discussed [[section:section-dynamic_color_customize|here.]]
   * **Background**: The background of the widget can be customized.   * **Background**: The background of the widget can be customized.
     * The default background is transparent but can be modified with any of the six options shown above.     * The default background is transparent but can be modified with any of the six options shown above.
-  * **Margins**: The margins default to 0 pixels on all sides. Any increase in the margins on all sides would reduce the space available for the skin/needle, allowing it to occupy less space. Also, manipulation of the margins could be used as an offset to shift the skin/needle position. The margin modification does //not// affect the background display.+  * **Margins**: The margins default to 0 pixels on all sides. Increasing the margins on all sides would reduce the space available for the skin/needle, allowing it to occupy less space. Also, manipulation of the margins could be used as an offset to shift the skin/needle position. The margin modification does //not// affect the background display.
   * **Animation**   * **Animation**
     * **Enter animation** for the analog clock widget. See [[admin:drafts:section-animations_construction|Page and Object Animation]] and [[:ui:ui-object-animation|UI Object Animation]] for an overview of animations available.     * **Enter animation** for the analog clock widget. See [[admin:drafts:section-animations_construction|Page and Object Animation]] and [[:ui:ui-object-animation|UI Object Animation]] for an overview of animations available.
Line 401: Line 387:
 ==== Widget: Circle indicator ==== ==== Widget: Circle indicator ====
 ^  Device resource  ^  Data Value  ^  Image  ^ ^  Device resource  ^  Data Value  ^  Image  ^
-|  • **Battery**  |  % available  |  {{:ui:ui-widget-circle_indicator-image_battery.webp?direct&100}}  | +|  • **Battery**  |  % available  |  {{ui:ui-widget-circle_indicator-image_battery-v4.webp?direct&100|Circle Indicator - Battery}}  | 
-|  • **RAM usage**  |  % available  |  {{:ui:ui-widget-circle_indicator-image_ram.webp?direct&100}}  | +|  • **RAM usage**  |  % available  |  {{ui:ui-widget-circle_indicator-image_ram-v4.webp?direct&100|Circle Indicator - Ram}}  | 
-|  • **Storage**\\ (internal storage)  |  % available  |  {{:ui:ui-widget-circle_indicator-image_storage.webp?direct&100}}  | +|  • **Storage**\\ (internal storage)  |  % available  |  {{ui:ui-widget-circle_indicator-image_storage-v4.webp?direct&100|Circle Indicator - Storage}}  | 
-|  • **SD card**  |  % available\\ (if inserted)  |  {{:ui:ui-widget-circle_indicator-image_sdcard.webp?direct&100}}  |+|  • **SD card**  |  % available\\ (if inserted)  |  {{ui:ui-widget-circle_indicator-image_sdcard-v4.webp?direct&100|Circle Indicator - SD Card}}  |
 |The **Circle indicator** displays the **current status** of a specific device resource in a visual, circular format.||| |The **Circle indicator** displays the **current status** of a specific device resource in a visual, circular format.|||
  
Line 413: Line 399:
 Customization options for the widget container and indicator appearance are: Customization options for the widget container and indicator appearance are:
  
-  * **Color** - Sets the color of the displayed graphic elements using either the launcher's [[:ui:ui-color_picker|Color Picker utility]] or [[:ui:ui-resources-dynamic_color|Dynamic Colors.]]  Learn about the dynamic color scheme [[section:section-dynamic_color_customize|here.]] +  * **Color** - Sets the color of the displayed graphic elements using either the launcher's [[:section:section-color_picker|Color Picker utility]] or [[:ui:ui-resources-dynamic_color|Dynamic Colors.]]  Learn about the dynamic color scheme [[section:section-dynamic_color_customize|here.]] 
-  * **Background** - Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container.  See [[:ui:ui-generic-background|Background]] for more details if desired.+  * **Background** - Defines the background selections (color, dynamic color, icon pack, shape, image, and dynamic image) for the widget container.  See [[:ui:ui-generic-background|Background]] for more details if desired.
   * **Margins**: Allows adjustment of the margins surrounding the widget in its container. See [[:section:section-margins-page_and_object|Understanding Margins in Total Launcher.]]   * **Margins**: Allows adjustment of the margins surrounding the widget in its container. See [[:section:section-margins-page_and_object|Understanding Margins in Total Launcher.]]
  
Line 421: Line 407:
 ==== Widget: Drawer handle ==== ==== Widget: Drawer handle ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-drawer_handle-image.webp?direct&200}}|This serves as an **expanded trigger area** to pull out a specific **sliding drawer** which is particularly useful if the default used by Total Launcher (a narrow invisible trigger area on the edge of the screen) is deemed too narrow or not accessible.\\ Total Launcher supports four sliding drawers (left, right, top, and bottom).|+|{{ui:ui-widget-drawer_handle-image-v4.webp?direct&200|Drawer Handle}}|This serves as an **expanded trigger area** to pull out a specific **sliding drawer** which is particularly useful if the default used by Total Launcher (a narrow invisible trigger area on the edge of the screen) is deemed too narrow or not accessible.\\ Total Launcher supports four sliding drawers (left, right, top, and bottom).|
  
 === Customization and Configuration === === Customization and Configuration ===
Line 431: Line 417:
     * Icon pack - See [[:ui:ui-generic-icon_pack|here.]]     * Icon pack - See [[:ui:ui-generic-icon_pack|here.]]
     * Shape - Easily, a user-specific shape could be customized. See [[:ui:ui-resources-shape|here.]]     * Shape - Easily, a user-specific shape could be customized. See [[:ui:ui-resources-shape|here.]]
-  * **Color filter**: A color can be set to **draw over the drawer handle**. This uses the launcher's Color Picker described [[:ui:ui-color_picker|here.]]+  * **Color filter**: A color can be set to **draw over the drawer handle**. This uses the launcher's Color Picker described [[:section:section-color_picker|here.]]
   * **Background**: Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container. See [[:ui:ui-generic-background|Background]] for more details if desired.   * **Background**: Defines the background selections (color, dynamic color, icon pack, shape, image and dynamic image) for the widget container. See [[:ui:ui-generic-background|Background]] for more details if desired.
   * **Margins**: Allows adjustment of the margins surrounding the widget container. See [[:section:section-margins-page_and_object|here.]]    * **Margins**: Allows adjustment of the margins surrounding the widget container. See [[:section:section-margins-page_and_object|here.]] 
Line 439: Line 425:
 ==== Widget: Slider ==== ==== Widget: Slider ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-slider-image.webp?direct&200}}|Offering on-screen control of screen brightness and volume (media, ring, notification, alarm, or call) through a linear representation with a "thumb" or bulb indicating the current point within the target's data range.|+|{{ui:ui-widget-slider-image-v4.webp?direct&200|Slider}}|Offering on-screen control of screen brightness and volume (media, ring, notification, alarm, or call) through a linear representation with a "thumb" or bulb indicating the current point within the target's data range.|
  
 === Key Functions and Customization === === Key Functions and Customization ===
Line 451: Line 437:
     * Alarm volume - Master control for any application which utilizes the "alarm" setting     * Alarm volume - Master control for any application which utilizes the "alarm" setting
     * Call volume - If the device has phone capabilities, the speaker volume during a call.      * Call volume - If the device has phone capabilities, the speaker volume during a call. 
-  * **Thumb size** - This is the bulb or solid circle (default) representing the current point within the range. Size range is 0 - 287.+  * **Thumb size** - This is the bulb or solid circle (default) representing the current point within the range. Size range is 0 - 200.
   * **Thumb skin** - This is the bulb or solid circle (default) which can be user-replaced   * **Thumb skin** - This is the bulb or solid circle (default) which can be user-replaced
-  * **Track thickness** - The thickness of the line along which the thumb (bulb) will travel. Thickness range is 0 - 287.+  * **Track thickness** - The thickness of the line along which the thumb (bulb) will travel. Thickness range is 0 - 200.
   * **Track color** - The visible color of the portion of the track to the right of the thumb position. Some may call this "unused capacity". This is through Color or Dynamic Color.   * **Track color** - The visible color of the portion of the track to the right of the thumb position. Some may call this "unused capacity". This is through Color or Dynamic Color.
   * **Progress color** - The visible color of the portion of the track to the left of the thumb position, set via Color or Dynamic Color.   * **Progress color** - The visible color of the portion of the track to the left of the thumb position, set via Color or Dynamic Color.
Line 463: Line 449:
 ==== Widget: Photo slide ==== ==== Widget: Photo slide ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-photo_slide-image.webp?direct&200}}|A slideshow of sequential or random images from a designated folder, displayed at user-selected intervals. and customization options (such as grayscale or corner radius).|+|{{ui:ui-widget-photo_slide-image-v4.webp?direct&200|Photo Slide}}|A slideshow of sequential or random images from a designated folder, displayed at user-selected intervals. and customization options (such as grayscale or corner radius).|
  
 === Key Functions and Customization === === Key Functions and Customization ===
Line 472: Line 458:
   * .bmp   * .bmp
   * .gif   * .gif
 +  * .ico
 </WRAP> </WRAP>
 <WRAP col33> <WRAP col33>
-  * .ico 
   * .jpeg   * .jpeg
 +  * .jpg
 </WRAP> </WRAP>
 <WRAP col33> <WRAP col33>
-  * .jpg 
   * .png   * .png
 +  * .9.png (nine patch)
   * .webp   * .webp
 </WRAP> </WRAP>
Line 500: Line 487:
 ==== Widget: RSS reader ==== ==== Widget: RSS reader ====
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-rss_reader-image.webp?direct&200}}|An **RSS reader** integrates _R_eally _S_imple _S_yndication feeds (for news, podcasts, or aggregated channels) through any RSS service. The reader supports the display and content of user-selected services (3 are included, but a user can search for ''rss sports'' or ''rss podcasts'' etc), which can include images with text or text-only layouts.|+|{{ui:ui-widget-rss_reader-image-v4.webp?direct&200|RSS Reader}}|An **RSS reader** integrates _R_eally _S_imple _S_yndication feeds (for news, podcasts, or aggregated channels) through any RSS service. The reader supports the display and content of user-selected services (3 are included, but a user can search for ''rss sports'' or ''rss podcasts'' etc), which can include images with text or text-only layouts.|
  
 === Functional Characteristics === === Functional Characteristics ===
Line 513: Line 500:
 ==== Widget: Checklist ==== ==== Widget: Checklist ====
 {{tablelayout?colwidth="425px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="425px,375px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-checklist1-image.webp?direct&200}} {{:ui:ui-widget-checklist2-image.webp?direct&200}}|This is a "To Do" list with each item preceded with an active checkbox for a user to indicate "completion" and an edit icon to enter the checklist dialog for creating, deleting, and managing the list.|+|{{ui:ui-widget-checklist1-image-v4.webp?direct&200|Checklist - View}} {{ui:ui-widget-checklist2-image-v4.webp?direct&200|Checklist - Edit}}|This is a "To Do" list, with each item preceded by an active checkbox for a user to indicate "completion" and an edit icon to open the checklist dialog for creating, deleting, and managing the list.|
  
 === Key Functions and Customization === === Key Functions and Customization ===
Line 548: Line 535:
 The **Application Widget** serves as a container for third-party widgets provided by other apps installed on the user's device (e.g., Weather, Calendar, Music Player). Total Launcher extracts these standard Android views for placement by the user in the setup. The **Application Widget** serves as a container for third-party widgets provided by other apps installed on the user's device (e.g., Weather, Calendar, Music Player). Total Launcher extracts these standard Android views for placement by the user in the setup.
 {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px,375px"&rowsHeaderSource=auto&float=center}}
-| {{:ui:ui-widget-application_widget.webp?direct&200}} | The image shows Page 6 of 13 of the application widgets on the device used to capture the image. It is shown to provide the reader with sample view the application widget dialog.\\ \\ These application widgets **may not** be on any user's device. A user's device will only show a list of application widgets installed on their device. |+| {{ui:ui-widget-application_widget-v4.webp?direct&200|Application Widget}} | The image shows Page 6 of 13 of the application widgets on the device used to capture the image. It is shown to provide the reader with sample view the application widget dialog.\\ \\ These application widgets **may not** be on any user's device. A user's device will only show a list of application widgets installed on their device. |
  
-Android application developers will encode widget containers for specialized data display setups for their applications. When these are available with the application Total Launcher extracts and displays each in the application widget dialog for the user to select and install on a page, drawer, or window.+Android application developers will encode widget containers for specialized data display setups for their applications. When these are available, with the application Total Launcher extracts and displays each in the application widget dialog for the user to select and install on a page, drawer, or window.
  
 Each application widget developer provides customization opportunities for their respective widgets. However, Total Launcher, in managing an application widget, focuses on the visual presentation of the wrapper container. The dialog for the application widget Option Edit is shown below Each application widget developer provides customization opportunities for their respective widgets. However, Total Launcher, in managing an application widget, focuses on the visual presentation of the wrapper container. The dialog for the application widget Option Edit is shown below
 {{tablelayout?colwidth="225px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-application_widget-option_edit.webp?200}}|+|{{:ui:ui-widget-application_widget-option_edit-v4.webp?200|Application Widget Option Edit dialog}}|
  
-  ***Rounded corner radius** - The widget's container defaults to a square but can be resized by tap-holding and grabbing a container corner. The user can choose to have corners rounded by selecting the desired radius, with a range of 0 (square), 300 (circle), to 575 (a rhombus-type, 4-vertex object with curvilinear sides, as shown in {{:ui:ui-widget-application_widget-option_edit-rnd_corner_575.webp?linkonly|this image}}.+  ***Rounded corner radius** - The widget's container defaults to a square but can be resized by tap-holding and grabbing a container corner. The user can choose to have corners rounded by selecting the desired radius, with a range of 0 (default for the original widget) to 575 (which can be a horizontal pill, circle, or vertical pill depending on how the widget container is sized). 
 +  *
   ***Opacity** - This allows the user to control how much transparency is applied when viewing the underlying content, in this case, the application widget. The launcher option provides a slider from 0 (opaque, with container content fully blocked) to 100 (fully transparent). This option will apply the effect to the entire widget container, meaning overall colors will be fully visible (100), muted (50), or the content blocked (0). Most likely, meaningful use of this option would be in combination with either the background option of color or dynamic color to provide a tonal quality to the widget container   ***Opacity** - This allows the user to control how much transparency is applied when viewing the underlying content, in this case, the application widget. The launcher option provides a slider from 0 (opaque, with container content fully blocked) to 100 (fully transparent). This option will apply the effect to the entire widget container, meaning overall colors will be fully visible (100), muted (50), or the content blocked (0). Most likely, meaningful use of this option would be in combination with either the background option of color or dynamic color to provide a tonal quality to the widget container
-{{tablelayout?colwidth="225px"&rowsHeaderSource=auto&float=center}} 
-|{{:ui:ui-widget-application_widget-option_edit-opacity.webp?200}}| 
  
-  ***Configure widget** - This dialog appears for any **Application Widget**. //However//, it can only be activated by a user //**if**// the application developer has enabled the configuration feature. It **will not** work on every application widget, as shown with the notification in the image below.+  * **Widget settings** - This dialog appears for any **Application Widget**. //However//, it can only be activated by a user //**if**// the application developer has enabled the configuration feature. It **will not** work on every application widget, as shown with the notification in the image below.
 {{tablelayout?colwidth="225px"&rowsHeaderSource=auto&float=center}} {{tablelayout?colwidth="225px"&rowsHeaderSource=auto&float=center}}
-|{{:ui:ui-widget-application_widget-option_edit-config_widget_issue.webp?200}}|+|{{:ui:ui-widget-application_widget-option_edit-config_widget_issue-v4.webp?200|Application Widget NOT configurable}}|
  
-  ***Background** - Defines the background of the widget container. **For complete discussion on background see [[...|Background]].**+  ***Background** - Defines the background of the widget container. **For complete discussion on background see  [[:admin:drafts:section-background|Background]].**
   ***Margins**: Allows adjustment of the margins surrounding the widget in its container. For complete discussion on setting margins, see [[:section:section-margins-page_and_object|Understanding Margins in Total Launcher]].   ***Margins**: Allows adjustment of the margins surrounding the widget in its container. For complete discussion on setting margins, see [[:section:section-margins-page_and_object|Understanding Margins in Total Launcher]].
  
Line 575: Line 561:
 === Scaling vs. Resizing === === Scaling vs. Resizing ===
  
-There is a functional difference between resizing and scaling a widget in how they affect the widget's background size. **Resizing** the widget frame (dragging the corner handles) changes the container size, but the content inside **does not** automatically stretch to fill the new space. If the widget //content// appears too small or floats in empty space after resizing, use the **rotate-transform** icon {{ui:ui-icon_rotate-transform-v4.webp?direct&25}} (then tap its ''Transform'' button and use the top slider [10-100]) to zoom the widget with its contents, which //will not// change the background size.+There is a functional difference between resizing and scaling a widget in how they affect the widget's background size. **Resizing** the widget frame (dragging the corner handles) changes the container size, but the content inside **does not** automatically stretch to fill the new space. If the widget //content// appears too small or floats in empty space after resizing, use the **rotate-transform** icon {{ui:ui-icon_rotate-transform-v4.webp?direct&25|Rotate-Transform icon}} (then tap its ''Transform'' button and use the top slider [10-100]) to zoom the widget with its contents, which //will not// change the background size.
   ***Resize** - Changes the boundaries of the container.   ***Resize** - Changes the boundaries of the container.
   ***Scale** - Zooms the widget content and its container (background).   ***Scale** - Zooms the widget content and its container (background).