Get your Android apps working great on Chromebooks

Discover how developers like Adobe, Slack, and Squid optimize their apps to run great on Chromebooks

Evolving from their smartphone origin, apps have expanded to everything from cars, to TVs, to smart watches. We took it a step further. At I/O last year, we announced Google Play would be available on select Chromebooks, unlocking millions of Android apps for these devices.

Chromebooks are proving to be popular and have strong momentum. In 2016, IDC announced that Chromebooks outsold Macs in the US. Chromebooks are seeing success in the education market, where they outsell every other device combined. It’s a similar story on the consumer front, with the NPD Group reporting 29% year-over-year growth in retail sales. But, the opportunity for Android apps transcends Chromebooks and includes many new types of large screen form factors. For example, the Samsung Galaxy S8 recently launched with a desktop projection mode, allowing people to run apps from Google Play in a desktop environment. Other Android devices, such as the Lenovo Yoga Book, are built in a laptop form factor with keyboard and touchpad input.

You may be wondering what this means for you as an Android developer. If you’ve followed the Android quality guidelines, your app should already work well on these devices, but there are several things you can do to ensure your app works optimally in these desktop-like environments. While the following best practices focus on Chromebooks, the improvements you make will help your app’s user experience across other large screen devices too.

So, how do you optimize your apps for Chromebooks? It comes down to four key differences between mobile and desktop: screen width, screen orientation, windowing, and input methods.

Wide screens

When we review apps, a common issue is that most don’t take advantage of additional screen real estate well. Poor use of the wider screens often involves elements that are aligned to the left or right stretching as the screen gets wider. Similarly, elements that are equally spaced can lose their grouping as real estate increases. So, you want to avoid situations such as the one shown below where a messaging thread becomes stretched across the user’s screen, making it hard to read.

You can avoid these issues by optimizing for the way Android renders apps on Chrome OS and taking advantage of the additional real estate by using multi-pane layouts and other techniques.

If you have a tablet or Chromebook, look at Gmail. In portrait mode the user sees one column of emails, while in landscape mode the user sees two panes, the emails list and a pane containing the content of the highlighted thread.

Netflix takes a similar approach, where they take advantage of larger screens by displaying sub-menus to increase content visibility.

Landscape mode

While phones naturally default to portrait mode, laptops by default are used in landscape mode. So, make sure your app supports both landscape and portrait modes otherwise, there will be wasted, blank space on a landscape screen.

Supporting both screen orientations when using camera functionality is also a must. If you don’t, images can become stretched, squeezed, or incorrectly rotated when the app runs in portrait orientation only.

Windowing

Most apps assume the window size equals the display size. That’s not always the case, especially on larger form factors where users are often multitasking.

To ensure your app can take full advantage of windowing on Chromebooks first avoid using screen space coordinates and work with local coordinates instead. Then make sure you target API level 24 (Android N) or higher. Using this API version is the best way to optimize for window management and input compatibility, as the window manager won’t apply compatibility restrictions to your app.

In Sacred Legends, for example, users can resize a window (maximize, restore, and fullscreen) with content scaled appropriately. This windowing support gives users much more control over their desktop real estate.

Additional input methods

Chromebooks offer your app new hardware input methods, such as the keyboard, mouse, and stylus. At a minimum, make sure your app behaves properly in a desktop environment, but you can also enhance your users’ experience by taking advantage of these new input options.

Keyboard and trackpad

The primary input method for Chromebooks is the keyboard and trackpad, compared to touch on mobile. Be aware that common touch actions may not work in a desktop setting and make sure you:

• Use right mouse click or shift click to offer users additional actions, rather than a long press, as the long press is a tricky interaction on the desktop.

• Use a small X button to allow users to close content rather than employing the touch screen swipe action.

• Use common Chrome OS shortcut keys. Test your app to check that the Tab, Esc, and Refresh keys send the user to the right app screen or mode.
• Implement keyboard shortcuts for your most commonly used app functions. You can see a good example of how to do this in Adobe Photoshop Lightroom that uses the navigation arrow keys to let users flip through photo albums quickly. Users also have access to hotkeys such as “x” to reject, as well as “p” to pick photos and “u” to unpick them.

Another good example is in Slack. When users are writing a message pressing Enter sends the message, so users don’t have to click a send button.

Mouse control

On mobile, there is no hover state, but when interacting with a mouse, hover is used to show hidden controls or highlight an interactive element. So, use the hover state to show tooltips that explain the function or purpose of a button.

Stylus

Take advantage of stylus input when relevant.

• While the platform attempts to recognize resting palms, it’s not always possible. To create a better user experience, consider providing a setting to let the user disable drawing using touch and just use the active stylus instead.

• Use stylus pressure to alter the user’s input. Squid takes advantage of this feature so users can control the thickness of lines in notes, depending on how hard they press.

Putting it all together

The optimal user experience for your app can be hard to predict, and it will vary by app. Check out these tips posting to the Android Developers blog, Optimizing Android apps for Chrome OS, and review our best practices documentation on optimizing apps for Chromebooks. Test the key user flows of your app on Chromebooks to confirm it’s behaving properly. Finally, you can check out this year’s Android Apps for Chromebooks and Large Screen Devices I/O session to learn more.

Once you’ve perfected the performance of your app on Chromebooks, you can begin to explore the new opportunities this opens for your app. With a more engaged audience and new patterns of use, I’m excited to see what innovation the Android ecosystem brings to Chromebooks.

What do you think?

Do you have questions or thoughts on optimizing apps for Chromebooks? Continue the discussion in the comments below or tweet using the hashtag #AskPlayDev and we’ll reply from @GooglePlayDev, where we regularly share news and tips on how to be successful on Google Play.