Dual-screen case study: Total Commander – file manager
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.
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.
Figure 2. Launch and span manually
Figure 3. Launch auto spanned
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.
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.
Figure 11. List window arrangement settings
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.
Figure 6. Copy/Move dialog
Figure 7. File context menu
Figure 8. Find files dialog
Figure 9. File properties view
Figure 10. Send to dialog
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.