Trackr is a sample application that can manage tasks, and in addition to being used primarily to explore common UI paradigms in terms of supporting accessibility, it is one of our examples of modern Android development best practices. We’ve recently adapted it for larger screen devices, so let’s take a look at how we can use Material Design and responsive paradigm in our apps to provide a more refined and intuitive user experience on larger screen devices.

navigation

Before adjusting: From the Tasks screen, you can find the Archive and Settings options from the menu at the bottom of the application bar. On large-screen devices, the popup menu is a small touch area that is in a less convenient position to navigate. Also, the bottom app bar is overstretched.

▽ Left: Navigation display on mobile phone. Right: navigation display on the tablet.

Tweaked: When the screen gets wider, we show navigation rails instead of apps at the bottom. We also put the hover action button (which opens the new task screen) in the navigation track, removing the bottom app bar entirely.

▽ Navigation track on the big screen

While this change was made with larger screens in mind, phones with landscape mode can also benefit by freeing up more vertical space to display task lists.

Navigation track on mobile phone displayed horizontally

Double pane layout

Before adjustment: The Tasks and Archive screens take up the entire display width, and when you click on an item in the list, its details overwrite the previous list. On a large screen, UI elements are either stretched or squeezed to the side, causing the screen content to look lopsided.

This display is natural on mobile phones, but not as efficient on large screens.

Tweaked: Both the Tasks and Archive screens display the list/details layout through SlidingPaneLayout. We are in a previous article describes how to achieve this layout, if you are interested in specific technical details, please refer to the article “practice | how Google I/O application adaptation of large size screen UI?”

The Task Detail screen also has a hover action button (used to open the edit Task screen), but if the navigation track is visible, two hover action buttons appear on the screen, which is obviously not ideal. So we hid the second hover action button and added an edit button in the upper right toolbar.

Double pane layout makes better use of screen space

Edit task and create task

Before adjustment: When you edit a task, the edit task screen replaces the task details screen and takes up the entire screen. As with the previous task details interface, this makes the screen look lopsided. This is also the case with the new task interface (in fact, the new task and edit task interfaces are essentially the same destination page in our navigation diagram).

▽ Left: The editing task interface on the mobile phone. Right: Edit task interface on the tablet.

Tweaked: On the larger screen, we used DialogFragment, so the editing task’s interface was suspended over the rest of the content.

The floating editing component focuses on the user’s current target content

We initially tried to display the edit Task interface in the details pane instead of the Task Detail. While this was straightforward, we soon realized that this implementation wasn’t working for us, for the following reasons:

  • This does not make sense for creating a New Task interface because it is already in the navigation track and is accessible globally. We could use it as a separate navigational purpose page and assign different behaviors, but it doesn’t feel like a good idea.
  • An Edit Task looks very similar to Task Detail, except that the property fields are editable. In a two-pane layout, if we replace task details with editing tasks in the details pane, it looks as if nothing has changed — the necessary visual emphasis in the interface is not enough. Dialogfragments, by contrast, attract users and keep the focus front and center.
  • We don’t want to navigate from the Edit task (or new task) screen to somewhere else until the user saves their changes or we confirm that they can be undone. This request was easily blocked when the original editing screen was full screen, because the only way to leave the screen was to use the back key. But with the two-pane layout, there is an additional case to consider: the user can switch by clicking on other buttons in the navigation track, or other tasks in the list pane. Disabling these elements temporarily can be cumbersome. With DialogFragment, all of these elements are placed behind the dialog box, making it impossible for the user to interact with them, which is exactly what we want.

The new task uses the same UI paradigm as the edit task

The point here is that when you try the most straightforward designs on devices, you may find that they are functionally flawed. When this defect occurs, take a step back, focus on the user experience, and find a design paradigm to improve it.

summary

As tablets and foldable devices become more popular, creating responsive user interfaces is more important than ever. We showed how by adding navigation tracks and using SlidingPaneLayout, Trackr apps can not only look better, but also significantly improve usability and create an experience that is impossible to feel on a phone. We also showed you how to rethink your design around usability, not just screen space, in order to better meet the needs of your users.

We hope you enjoy the updated and improved Trackr app! You can view the source code.

Please click here to submit your feedback to us, or share your favorite content or questions. Your feedback is very important to us, thank you for your support!