June 2nd, 2022

Dual-screen case study: Total Commander – file manager

Andrei Paval
Principal SW Engineer

Hello Android developers!

We’re excited to announce that one of the most famous dual-pane apps of all time has been enhanced for Surface Duo dual-screen devices.

Total Commander file manager’s iconic dual-pane design has been one of its most recognizable features, starting from its Windows roots and continuing on Android. This dual-pane design is a perfect match for Surface Duo devices, where each file explorer pane can be shown on one of the two screens.

Starting with the 3.30 version release made on February 8, 2022, Total Commander now supports dual-screen features. You can get the app from its dedicated website or Google Play.

Surface Duo showing Total Commander app details
Figure 1. About Total Commander window

To span or not to span

In order to take full advantage of the dual-pane design of the app you can either:

  • launch the app which will by default open it on one screen and then drag from the bottom navigation bar over the hinge then release to span the app across both screens.
  • navigate to Settings > Surface Duo features > Span app automatically, enable the main feature then also enable the feature specifically for Total Commander. After this, any subsequent launch will span the app automatically across both screens.

Surface Duo animation of spanning the app
Figure 2. Launch and span manually

Surface Duo showing the app being auto-spanned
Figure 3. Launch auto spanned

Surface Duo showing where to configure auto-app spanning
Figure 4. Enabling Span apps automatically

Design and layout

Total Commander app uses dual-screen UX design patterns to display relevant information on each screen.

All the enhancements have been made considering the dual-screen user experience in relation to spanning, avoiding the hinge, or device orientation.

In the picture below, you can see the main screen of the Total Commander app running spanned in dual-portrait mode. This is where it brings the biggest productivity gains; because of the side-by-side file manager panes, the user can view two different file systems at the same time.

Running like this, it is very easy to copy or move files from one side to another, but you can also pack files into a zip archive, delete, share, or check file properties.

Surface Duo showing Total Commander app
Figure 5. Main screen of Total Commander

One nice little trick which helps the user navigate between the two screens is the current directory bar, located just under the big title bar, but above the file explorer, which shows the current open directory in the explorer pane, but which inverts its color, from dark to light and vice versa, based on which screen is currently in focus. This way the user always knows where the next action is about to take place.

Although this dual-screen layout is the most intuitive one on Surface Duo devices, the Total Commander app actually allows the user to enable or disable the two panels mode from the settings for each orientation, horizontal or vertical.

Surface Duo showing Total Commander window settings
Figure 11. List window arrangement settings

Features

Total Commander – file manager allows the user to easily view multiple areas of the device:

  • the internal shared storage
  • external storage devices like USB OTG thumb drives or SD cards
  • the photos folder
  • the downloads folder
  • the root file system of the device (read-only)
  • the list of installed apps
  • extended functionality through the use of plugins

As you can see in the screenshot above, the app dialog windows, like the Copy/Move dialog exemplified are dual-screen aware thanks to the enhancement changes and this way they are placed on one of the screens and not rendered under the hinge where they could be obstructed.

Surface Duo showing Total Commander copy and move info
Figure 6. Copy/Move dialog

Surface Duo showing Total Commander file context menu
Figure 7. File context menu

Surface Duo showing find files dialog in Total Commander
Figure 8. Find files dialog

Surface Duo showing Total Commander file properties
Figure 9. File properties view

Surface Duo showing Total Commander send-to dialog
Figure 10. Send to dialog

SDK

By using dual-screen SDKs the application is aware it is running on a foldable device, it reads from the system the bounds of the two screens and also the hinge or other folding features, then it adapts its layout accordingly for the best user experience.

This can be seen throughout Total Commander’s design.

Feedback and resources

If you have any questions about dual-screen enhancing your apps, ask on our feedback forum or message us on Twitter @surfaceduodev.   

Finally, please join us for our dual-screen developer livestream at 11am (Pacific time) each Friday – mark it in your calendar and check out the archives on YouTube.  

Author

Andrei Paval
Principal SW Engineer

Andrei works on the Surface Duo Developer Experience team, where he enjoys writing low-level code for the Android Emulator, the Surface Pen, or tools related to AOSP.

0 comments

Discussion are closed.