Design your sidebar with Tasker

Photo by Azamat E. on Unsplash

Some years ago, sidebars were very popular. I remember using Sloth Launcher, a contextual overlay launcher for Android that could show different apps based on user-defined conditions.

Lately, I’ve been looking for something similar, but I couldn’t find anything, so I decided to write my own using Tasker.

This brief screen-recording shows the final result. There are three main components:

• the sidebar: the overlay containing the applications;
• the sidebar launcher: the little pill on the right that opens the overlay;
• the sidebar backdrop: an invisible overlay to close the sidebar.

Sadly, I had to define a fixed number of applications, and it’s not possible to customize the color of the items when tapping.

The sidebar has two groups:

• fixed apps: two applications chosen at the beginning that don’t change;
• dynamic apps: five applications specified by a profile, based on user-defined conditions.

In the following steps, I’ll explain how to design the sidebar and how to make it works. If you want to download it, follow this link.

Requirements

Tasker version 5.13.0-beta or above is required. Previous versions may have issues with the task that chooses the fixed apps.

Step 0. Introduction

The following steps explain the items shown in the screenshot.

Step 1. Tasks to define the applications

The first tasks I created are Select App, Select Fixed Apps, and Set Dynamic Apps.

Select Fixed Apps

Select App is a utility task that lets the user select an app. It then obtains the app info and returns them in a JSON with the following format. It contains the icon to show in the sidebar and the app to launch with it.

{“icon”:”%app_icon()”, “package”:”%app_package()”}

Select Fixed Apps uses the previous task to ask the user for two favorite apps to show at the top of the sidebar. It performs the following actions:

1. Perform Task: calls the Select App task and sets the result to the %sidebarFixedApps1 variable.
2. Set Variable Structure Type: makes sure that Tasker sees the variable as a JSON.
3. Perform Task: calls the Select App task and sets the result to the %sidebarFixedApps2 variable.
4. Set Variable Structure Type: makes sure that Tasker sees the variable as a JSON.

Set Dynamic Apps

It receives a parameter %par1 with a list of app names, fetches their information, and saves them in an array %sidebarDynamicApps. Other tasks will use this one to set up to 5 apps based on the context.

It performs the following actions:

• 3. Array Set: sets the value of the array %sidebarDynamicAppsNames using the data received with %par1 split by comma.
• 6. For: loops through the %sidebarDynamicAppsNames array.
• 8. App Info: obtains the app info using its name.
• 9. Array Push: pushes the information, with the same format the Select App task returns, in the %sidebarDynamicApps array.
• Actions 5 and 10 manage the %sidebarDynamicApps array index.
• Actions 12 to 16 make sure that Tasker sees the variables as JSON. I had to add this because Tasker doesn’t see them as JSON otherwise.

Step 2. Design the scenes

It’s better to prepare the Open Sidebar and Close Sidebar tasks with a provisional action, for example, the Wait 1 ms action, because the scenes will use them. We will change them in the following step to respectively open and close the scenes of the sidebar.

Be aware that I set the sizes of the scenes according to my screen size (1080 x 1920 pixels) and my needs. You can adapt them according to yours.

Sidebar

This scene is the overlay containing the applications.

It is a small scene appearing on the right side of the screen. It uses the %sidebarFixedApps and %sidebarDynamicApps variables defined in the previous step to show two parts: the Fixed Apps and the Dynamic Apps.

The scene appears as an Overlay and is 165 x 1080 pixels (width x height), both portrait and landscape. The background is transparent, so its value is #00000000.

It appears in the editor as in the following image, which also shows the components.

The Background component has the following configurations.

It is an image component that fills the scene, so it has the same size. The value of the grey I used as Colour is #eeeeee, and the Corner Radius is at 30 pixels. On tap, it runs the Perform Task action calling the Close Sidebar task.

The Fixed Apps 1 and Fixed Apps 2 components launch an app and close the sidebar. They appear as icons and have the following configurations.

They are image components because they allow configuring icons from variables as images. With buttons, this is not possible. They are 135 x 135 pixels.

The value of the image is the %sidebarFixedAppsN[icon] variable, with N being 1 or 2. To set a variable as an image, click the two crossed arrows.

The background tab is unchanged. On tap, it runs the following actions:

1. Launch App: launches the app with the package from the %sidebarFixedAppsN[package] variable.
2. Perform Task: runs the Close Sidebar task.

The Line component has the following configurations.

It is a rectangle component to divide the Fixed Apps from the Dynamic Apps. It is 135 x 1 pixels so that it appears as a line. The value of the grey I used as Colour is #212121. On tap, it runs the Perform Task action calling the Close Sidebar task.

The Dynamic Apps components from 1 to 5 launch an app, if defined, and close the sidebar. They appear as icons and have the following configurations.

These components are just like the Fixed Apps one. They are image components and have a size of 135 x 135 pixels.

The value of the image is the %sidebarDynamicAppsN[icon] variable, with N being from 1 to 5. To set a variable as an image, click the two crossed arrows.

The background tab is unchanged. On tap, it runs the following actions:

1. Launch App: launches the app with the package from the %sidebarDynamicAppsN[package] variable. This action run if the %sidebarDynamicAppsN variable is set.
2. Perform Task: runs the Close Sidebar task.

Sidebar Backdrop

This scene is an invisible overlay to close the sidebar.

It is a scene that fills the screen and stands behind the sidebar.

The scene appears as an Overlay and is 1080 x 1920 pixels, which is the screen size. The background is transparent, so its value is #00000000.

It appears in the editor as in the following image, which also shows the component.

The Background component has the following configurations.

It is an image component that fills the scene, so it has the same size. It is transparent, so the Colour is #00000000. On tap, it runs the following actions:

1. Element Back Colour: changes the color of the Background element in the scene from #00000000 to #00000000. It is a small workaround to hide as much as possible the tapping color.
2. Perform Task: runs the Close Sidebar task.

Sidebar Launcher

This scene is the little pill on the right that opens the other two.

It is an almost invisible scene appearing on the right side of the screen.

The scene appears as an Overlay and is 40 x 300 pixels, both portrait, and landscape. The background is transparent, so its value is #00FFFFFF.

It appears in the editor as in the following image, which also shows the components.

The Area component is the most extensive element. It’s big enough to be easily reached with a swipe and small enough not to disturb any tap on that side of the screen.

It is an image component that fills the scene, so it has the same size. It is transparent, so the Colour is #00000000. On a left stroke, it runs the Perform Task action calling the Open Sidebar task.

The Small Area component is the small invisible element that opens the sidebar on tap or stroke.

It is an image component and is 20 x 150 pixels. It is transparent, so the Colour is #00000000. On tap or left stroke, it runs the Perform Task action calling the Open Sidebar task.

The Pill component is the pill element that opens the sidebar on tap or stroke.

It is an image component and is 10 x 150 pixels. The value of the grey I used as Colour is #eeeeee, and the Corner Radius is at 30 pixels. On tap or left stroke, it runs the Perform Task action calling the Open Sidebar task.

Step 3. Tasks to open and close the sidebar scenes

In the following tasks, I used the Destroy Scene action instead of the Hide Scene action because the latter made the scenes lag so much that they were nearly impossible to use.

Stop Sidebar Scenes

This task destroys previously created scenes. It will help close the sidebar when changing display orientation.

The Destroy Scene actions have the Continue Task After Error option enabled and destroy the three sidebar scenes if they are open. The option allows the task to continue if the specified scene is already closed.

Stop Sidebar Launcher

This task destroys previously created scenes of the launcher.

The Destroy Scene action has the Continue Task After Error option enabled and destroys the Sidebar Launcher scene.

Start Sidebar Launcher

This task destroys previously created scenes and starts the sidebar launcher. The %sidebarLauncherEnabled variable define if it is allowed to show the launcher.

It performs the following actions:

1. Perform Task: runs the Stop Sidebar Launcher task to close previously shown scenes.
2. Perform Task: runs the Close Sidebar task to close the sidebar and to show the launcher. Read more about it below.

Toggle Sidebar Launcher

It is a shortcut to enable or disable the sidebar launcher scene. It toggles the %sidebarLauncherEnabled variable’s value.

It performs the following actions:

1. If: checks if %sidebarLauncherEnabled is true.
2. Variable Set: sets %sidebarLauncherEnabled to false.
3. Else: if the first condition is not met.
4. Variable Set: sets %sidebarLauncherEnabled to true.

Close Sidebar

It closes the sidebar scenes and displays the sidebar launcher.

It performs the following actions:

1. Destroy Scene: destroys the Sidebar Backdrop scene with the Continue Task After Error option enabled.
2. Destroy Scene: destroys the Sidebar scene with the Continue Task After Error option enabled.
3. Show Scene: if the %sidebarLauncherEnabled variable is true, it displays the Sidebar Launcher scene as Overlay, Blocking so that the user can interact with it. The Horizontal Position is all the way to the right, while the Vertical Position is in the center. The options Show Over Keyguard and Continue Task Immediately are enabled.

Open Sidebar

It displays the sidebar scenes and closes the sidebar launcher.

It performs the following actions:

1. Show Scene: displays the Sidebar Backdrop scene as Overlay, Blocking so that the user can interact with it. The Horizontal Position is all the way to the left, while the Vertical Position is all the way up. The options Show Over Keyguard and Continue Task Immediately are enabled.
2. Show Scene: displays the Sidebar Backdrop scene as Overlay, Blocking so that the user can interact with it. The Horizontal Position is all the way to the right, while the Vertical Position is in the center. The options Show Over Keyguard and Continue Task Immediately are enabled.
3. Perform Task: runs the Stop Sidebar Launcher task to close the sidebar launcher.

Step 4. Automate the tasks

The following profiles show and hide the three scenes based on some conditions.

Start Sidebar Launcher

This profile shows the sidebar launcher on the device boot.

It runs the Start Sidebar Launcher task on the Device Boot event. The %sidebarLauncherEnabled variable must be equals to true.

Sidebar Display Off

This profile destroys the scenes when the screen is off and shows the sidebar launcher when it comes back on.

It runs the Stop Sidebar Scenes task on the Display State Off state and the Start Sidebar Launcher task on the profile exit.

Sidebar Landscape

This profile destroys the scenes when the orientation is landscape and shows the sidebar launcher when it goes back to portrait.

I created this profile because I couldn’t show the sidebar launcher on the right side of the screen, using the Show Scene action, when the device was in landscape.

It runs the Stop Sidebar Scenes task on the Display Orientation Landscape state and the Start Sidebar Launcher task on the profile exit.

Step 5. Define the profiles to configure the sidebar

Now it’s time to write some tasks and profiles to customize the dynamic applications according to your needs.

For example, I created a profile that sets up the sidebar with the applications I need when I am at the gym.

The Gym ProfileSidebarConfig profile triggers when the %profileActive variable has value %profileGym. This condition happens when I am at the gym and my phone switches to the Gym Profile. Read more about it on the Completely automate your Android device with Tasker story.

The Gym Sidebar task runs the Perform Task action, which calls the Set Dynamic Apps task providing a list of application names as the first parameter.

The End Sidebar task runs when the %profileActive variable changes and doesn’t match the %profileGym value. It performs the following actions:

1. If: checks if there is no other profile running that contains the word SidebarConfig in the name. It uses the Pattern Matching rules to do this.
2. Perform Task: runs the Default Sidebar task that sets the default apps.
3. End: ends the if condition.

Another example is the Bluetooth EventSidebarConfig profile that triggers when my phone connects to my Bluetooth headphones.

I added a Variable Value State condition to ensure it is not active while another one with ProfileSidebarConfig in the name is running. This way, a ProfileSidebarConfig profile always wins over an EventSidebarConfig profile.