App & Contact - Search Customization

Looking to completely customize your Total Launcher App Search and Contact Search layout? While Total Launcher's built-in specialty search widgets work great right out of the box, they lock you out of modifying the background, size, location, or animations. This uiTLM How-To guide walks you through bypassing these design limitations. You will learn how to build a fully tailored custom window, embed an app drawer widget, make your launch trigger invisible, and automatically open your keyboard on launch for a seamless, personalized Android experience

1. This video starts by showing text-based Launcher Action objects for App Search and Contact Search to understand the position and appearance of these built-in specialty widgets. It then begins the window creation process
2. Create a new window
   1. Start in Edit mode and tap the Edit Off icon to activate Edit On mode.
   2. Tap the object add icon in the upper right of the screen
   3. The Add dialog opens; select Graphic
   4. Select Image
   5. Select Window
   6. The Window dialog opens, listing the titles of any user-created windows. These windows have design characteristics which are retained and make using a window for another purpose destructive to the original use. Therefore, select the add icon
   7. The title dialog opens. Enter a unique short name for the window (no spaces; use underscores (_) only), since the Launcher will ask you to specify this title later. Tap OK.
   8. The window object now fully appears, selected, with its default background.
3. Customize the window
   1. Briefly, the Edit icon (white) appears for object relocation. See Editing an Object Setting & Location. Should the Edit icon disappear, a slight tap on the object will make it reappear.
   2. Deselect the object (tap in a blank area), then tap the default window icon to open the window (default is full screen)
   3. Resize the window if desired by using the handles on each side (difficult at times to “grab” but keep trying). After resizing, tap-hold the window object to move it to the desired position (alternatively use the Edit icon referred to above to position the object on the x-axis & y-axis value if precise values are required)
   4. Tap the Option icon in the window's lower right corner to open the Window Option dialog.
   5. This demo will customize the window background. Tap Background and from the listing, select Image
   6. The user's Image resource dialog opens. If no suitable image exists, add one. Tap the Add icon, then navigate to a device location or the cloud (direct website access is not available for downloading and placing any acquired images before this step). Once the desired image is in resources, tap it. The image is now shown in the Background's thumbnail.
   7. Back out (swipe right-to-left) to return to the page and see the window selected, with the new image background.
   8. Deselect the window (tap any blank area). The default window icon still shows.
4. Place an app drawer widget in the created window
   1. In the Page Design menu, tap the object add icon in the upper right of the page
   2. From the Add dialog, select Widget.
   3. This video demo will use the App Drawer widget. Tap it. The widget immediately appears centered on the page. In this case, it is over the window object and must be relocated to allow access to it. Tap-hold the App Drawer widget and relocate it anywhere (it will be removed later).
   4. The App Drawer widget is still selected. In the top Object Design menu, tap the copy icon to place a copy in the Launcher's memory.
   5. Tap the newly created Window icon to open the window previously resized and relocated.
   6. VIDEO DEFICIENT To paste the App Drawer widget into the open window, tap the object add icon (upper right) and tap the paste icon . The Window now contains the App Drawer copy.
   7. Tap any blank area to remove the focus from the window and close it. The default window icon remains visible.
   8. To change the default icon, select the window icon, then tap the Object Design menu Option icon to open its Edit Option dialog.
   9. This video demo will only change the image (other options such as pressed and background are available) with the objective of making the icon invisible since the window will be activated by other means.
   10. Tap image to open the Image options dialog. Select Color
   11. For an “invisible window icon,” the color will be set to transparent, represented by an ARGB hex #. Replace the existing # with the value 00000000. For more information on using this Color Picker utility, see here. Tap OK.
   12. Back out of the dialog by swiping right-to-left
   13. The window object is shown, selected. Tap any blank area to deselect it… see nothing… tap the window “area”… the window itself opens.
   14. Further adjust the App Drawer container.
   15. Tap-hold the edge of the container (usually the lower-left corner) to reveal the resizing handles, or tap-hold the object centrally to move the container.
   16. Once satisfied, tap outside the container to close the window. To reopen it, tap in the area where the now-invisible window icon is.
5. Set an Action to open the Window
   1. Select the App Drawer/Window, then tap the Option icon in the lower right corner of the container to open its Option dialog.
   2. Notice the section Gesture to close. This will be covered later. Scroll to the section Action on open and tap it
   3. The dialog Action on Open opens. Scroll down to “App Search” and select it
   4. The Window Option dialog re-opens. Scroll up to “Gesture to Close” and select it.
   5. The Gesture to Close dialog opens to its default “No gesture”. This demo video selects “Swipe up” and the navigation returns to the Window option dialog. Back out of this by swiping right-to-left to return to the page with the App Drawer Window selected.
   6. Tap any blank area to remove the focus and the window disappears. Tap the window area to open the App Drawer now with its keyboard following. Swipe down to close.
   7. Project completed!