meta data for this page
Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| howto:howto-window-create_simple [2026/07/16 16:10] – doreps | howto:howto-window-create_simple [2026/07/19 12:00] (current) – ↷ Links adapted because of a move operation doreps | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | <WRAP hide> | + | ====== Mastering Android Theming: A Total Launcher |
| - | <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 hide> | + | |
| - | + | ||
| - | + | ||
| - | + | ||
| - | ---- | + | |
| - | + | ||
| - | + | ||
| - | ===== Window: Create (simple) + Add a Widget ===== | + | |
| - | === Window: Create (simple) === | + | Mastering Android interface customization requires precise control over container elements and layout properties. This tutorial outlines the exact procedure for creating a functional window container that hosts application widgets within the Total Launcher ecosystem. By establishing a solid visual foundation, designers and enthusiasts can avoid common configuration pitfalls, such as unintentionally deploying transparent, |
| <WRAP GROUP> | <WRAP GROUP> | ||
| <WRAP center round tip 60%> | <WRAP center round tip 60%> | ||
| <WRAP centeralign> | <WRAP centeralign> | ||
| - | **From experience, a window can be created and the user can not see it!** | + | **From experience, a window can be created, and the user can not see it!** |
| </ | </ | ||
| This happens if 2 options and 1 action are set: | This happens if 2 options and 1 action are set: | ||
| Line 32: | Line 18: | ||
| </ | </ | ||
| - | Since the above TIP has been mentioned, the procedure includes the " | + | Since the above TIP has been mentioned, the procedure includes the " |
| - | - On the home screen, enter Edit On mode (see[[section: | + | ===== Window: Create (simple) ===== |
| - | | + | |
| - | | + | == Step 1 == |
| - | | + | * On the home screen, enter Edit On mode (see[[section: |
| + | == Step 2 == | ||
| + | | ||
| + | == Step 3 == | ||
| + | | ||
| + | == Step 4 == | ||
| + | | ||
| - Image if the screen object to open the window will be an icon-type | - Image if the screen object to open the window will be an icon-type | ||
| - Text if the screen object to open the window will be text-based | - Text if the screen object to open the window will be text-based | ||
| * Note: There is another way to open a window: [[: | * Note: There is another way to open a window: [[: | ||
| - '' | - '' | ||
| - | - From the dialog listing, select '' | + | == Step 5 == |
| + | * From the dialog listing, select '' | ||
| - The Window-Portrait dialog shows any previously created windows ++(see image). | {{: | - The Window-Portrait dialog shows any previously created windows ++(see image). | {{: | ||
| * When a window design is created, it is specific to its designed purpose and will retain its previous characteristics or, if modified here, will change those characteristics where it is elsewhere being used. | * When a window design is created, it is specific to its designed purpose and will retain its previous characteristics or, if modified here, will change those characteristics where it is elsewhere being used. | ||
| Line 49: | Line 42: | ||
| * Note: no spaces or hyphens are permitted, only underscores (_) | * Note: no spaces or hyphens are permitted, only underscores (_) | ||
| - Tap OK | - Tap OK | ||
| - | - Tap the Action icon {{ui: | + | == Step 6 == |
| + | * Tap the Action icon {{ui: | ||
| - Edit (pencil) {{ui: | - Edit (pencil) {{ui: | ||
| * bulb handles on its boundaries used to downsize the window | * bulb handles on its boundaries used to downsize the window | ||
| - | *Option icon {{ui: | + | *Option icon {{ui: |
| * While the Edit and Option dialogs will not be discussed here, more information is available at [[admin: | * While the Edit and Option dialogs will not be discussed here, more information is available at [[admin: | ||
| - Add icon {{ui: | - Add icon {{ui: | ||
| * Objects, such as an app widget, layout, or graphic, can be added to a new window. | * Objects, such as an app widget, layout, or graphic, can be added to a new window. | ||
| * In this example, only the window is being created, so an object will //not// be added. | * In this example, only the window is being created, so an object will //not// be added. | ||
| - | * If an object is to be added now, see these steps, which will replace Steps 6.c and 6.d, and the procedure Window: Add an Existing Widget to a Window after the Window Has Been Created. [[: | + | * If an object is to be added now, see these steps, which will replace Steps 6.3 and 6.4, and the procedure Window: Add an Existing Widget to a Window after the Window Has Been Created. [[: |
| - Back out of the window by swiping right-to-left to return to the Window-Portrait dialog | - Back out of the window by swiping right-to-left to return to the Window-Portrait dialog | ||
| - Back out of the dialog by swiping right-to-left again | - Back out of the dialog by swiping right-to-left again | ||
| == Step 7 == | == Step 7 == | ||
| - | - The new " | + | - The new " |
| * The " | * The " | ||
| * Resize and position on the screen as desired | * Resize and position on the screen as desired | ||
| Line 67: | Line 61: | ||
| - The window object icon, which activates the window, is on the page with its default image. | - The window object icon, which activates the window, is on the page with its default image. | ||
| - This image can be changed by selecting the object (tap and hold to highlight), which opens the top Object Design Menu. | - This image can be changed by selecting the object (tap and hold to highlight), which opens the top Object Design Menu. | ||
| - | - The top Object Design Menu Option icon {{ui: | + | - The top Object Design Menu Option icon {{ui: |
| * Tap the Image field to open the Image selection categories. | * Tap the Image field to open the Image selection categories. | ||
| * Experiment with the Image and Icon Pack categories. | * Experiment with the Image and Icon Pack categories. | ||
| Line 74: | Line 68: | ||
| - The window object icon must be selected, then ... | - The window object icon must be selected, then ... | ||
| * Tap the top Object Design Menu Action icon {{ui: | * Tap the top Object Design Menu Action icon {{ui: | ||
| - | - The Action dialog opens ++(see image). | {{:howto:howto-window-create-object-tap_action-dialog.webp? | + | - The Action dialog opens ++(see image). | {{ui:ui-window-placeholder-action-dialog-v4.webp? |
| - | - Scroll to view the various actions available. In this example use '' | + | - Scroll to view the various actions available. In this example, use '' |
| - | * Select Tap > '' | + | * Select Tap > '' |
| - | * Select Window to open the Window-Portrait dialog ++(see image) | {{:howto:howto-window_create-window_object-window_portrait_dialog.webp? | + | * Select Window to open the Window-Portrait dialog ++(see image) | {{ui:ui-window-portrait-v4.webp.webp? |
| * Scroll the dialog to find and select the example '' | * Scroll the dialog to find and select the example '' | ||
| * TL now returns to the previous Action On Tap dialog (Tap) and shows the tap action will open the '' | * TL now returns to the previous Action On Tap dialog (Tap) and shows the tap action will open the '' | ||
| Line 84: | Line 78: | ||
| - If the widget was not previously added, it can now be added. | - If the widget was not previously added, it can now be added. | ||
| <WRAP Pagebreak /> | <WRAP Pagebreak /> | ||
| - | === Window: Add an Existing Widget to a Window after the Window Has Been Created === | + | ===== Window: Add an Existing Widget to a Window after the Window Has Been Created |
| - There are two ways to add an object to a window: | - There are two ways to add an object to a window: | ||
| Line 92: | Line 86: | ||
| - Enter Edit On mode | - Enter Edit On mode | ||
| - From the top Object Design Menu select the Object Add icon {{ui: | - From the top Object Design Menu select the Object Add icon {{ui: | ||
| - | - The Add dialog opens ++(see image). | {{:howto:howto-window_create-widget-add.webp? | + | - The Add dialog opens ++(see image). | {{:ui-object_add-selection-v4.webp? |
| * Select Widget | * Select Widget | ||
| * Select any desired object, but in this procedure, '' | * Select any desired object, but in this procedure, '' | ||
| - | * Note: There are 3 types of application drawers and 1 contact " | + | * Note: There are 3 types of application drawers and 1 contact " |
| - | - The App drawer widget is now on a page, centered. Tap-hold and drag to re-locate | + | - The App drawer widget is now on a page, centered. Tap-hold and drag to relocate |
| - | - The App drawer widget is on the screen and **is selected**, The following steps will place the widget within the window: | + | - The App drawer widget is on the screen and **is selected**. The following steps will place the widget within the window: |
| - | - Tap the Object Design Menu Copy icon {{ui: | + | - Tap the Object Design Menu Copy icon {{ui: |
| - Now, to paste the copied widget into the window. Open the target window (tap the window widget) | - Now, to paste the copied widget into the window. Open the target window (tap the window widget) | ||
| * In the upper right corner, tap the {{ui: | * In the upper right corner, tap the {{ui: | ||
| - | - From the Add dialog, select '' | + | - From the Add dialog, select '' |
| * The " | * The " | ||
| - | - Close the window by either tapping a blank space outside the window (if the full screen window has been down-sized | + | - Close the window by either tapping a blank space outside the window (if the full-screen window has been downsized |
| - The page still contains the original App drawer widget. Since that widget is //now// contained in the window, it is proper to delete the original App Drawer widget from the page. | - The page still contains the original App drawer widget. Since that widget is //now// contained in the window, it is proper to delete the original App Drawer widget from the page. | ||
| * In Edit On mode, tap and hold the App Drawer widget to select it. | * In Edit On mode, tap and hold the App Drawer widget to select it. | ||
| - | * Fron the Object Design Menu, select the Delete icon {{ui: | + | * From the Object Design Menu, select the Delete icon {{ui: |
| * The Confirm - Remove Selections dialog opens. Select OK | * The Confirm - Remove Selections dialog opens. Select OK | ||
| * The widget is removed | * The widget is removed | ||
| **The project is completed.** | **The project is completed.** | ||
| - | <WRAP center round info 60%> | + | <WRAP center round info 80%> |
| - | A [[feature_requests: | + | A [[feature_requests: |
| </ | </ | ||
| - | |||
| - | |||
| <WRAP noprint> | <WRAP noprint> | ||