Android on Chrome OS — Developer Toolbox

A handy toolbox of code-snippets to optimize your app for Chrome OS!

Since their introduction, Chromebooks have forged a strong identity as lightweight, easy-to-use, and secure browser-based laptops. With the ability to run Android, a huge ecosystem of applications and vast new functionality is now available on supported Chromebooks. While this is great news for developers, it comes with two important considerations:

1. Developers have a responsibility to their users and to their brand to make their apps work well on Chrome OS.
2. Developers have an opportunity to take advantage of large-format screens, keyboard/mouse input, stylus capabilities, and enhanced processing power while reaching a whole new population of educational, enterprise, and home users.

In most cases, Chrome OS optimization is easy and yields big rewards in usability and functionality for your users. As an added bonus, ensuring your app can handle keyboard and mouse input correctly can go a long way in making your app more Accessible to users who have difficulty with typical smartphone interfaces.

In this post, I present brief code-snippets for some of the most common Chrome OS specific optimizations to get your app looking great on Chrome OS. In future posts I will address some of these optimizations in more detail, like my post on Implementing Drag and Drop. More info about project setup and developing Android for Chrome OS can be found in the official Building Apps for Chrome OS documentation.

Was this post useful to you? Are there Chrome OS optimizations that I have missed here or that you would like me to go into more detail on? Please drop me a line!

Getting Started

• Set android:targetSdkVersion to 26 in your app
• Get ADB up and working on your Chromebook for easier testing
• All code found here is licensed under Apache 2.0 license. Nothing here is part of any official Google product.
• Here we go!

Keyboard Input

Enter Key

Users expect to be able to press the Enter key to submit forms or send messages. See the Handling Keyboard Actions documentation.

Arrow-key and Tab-key Navigation

Users expect to be able to navigate menus and UI elements using the arrow keys. The simple code below will add navigability to appropriate views. See the Focus Handling documentation.

The default arrow key navigation mappings usually work as expected. If you need to specify these manually, use:

For the Tab key use:

Change Selected Item Highlight Color

In some cases, a selected item’s highlight color may not be obvious during keyboard navigation. This can make keyboard navigation difficult in some interfaces. One easy fix for this is to change the colorControlHighlight value in your app’s theme. Consider Accessibility when choosing a highlight color with appropriate Contrast.

In res/values/styles.xml under AppTheme

If you are working with ImageViews, you may not want the entire image to be selected when it is in focus. By using a selector, you can create a border drawable that only appears when an item is selected.

Create res/drawable/box_border.xml

And then set this drawable as the BackgroundResource for the View

Ctrl-based Shortcuts

Laptop users expect common desktop shortcuts like Ctrl-z to work. See the dispatchKeyShortcutEvent documentation.

The dispatchKeyShortcutEvent method will work for Ctrl- commands and, on Android O and later, for Alt- and Shift- commands as well. Replace KEYCODE_Z in the example below with the keycode you need.

If you want to specifically target a Ctrl- command and not include Shift- and Alt- commands for the same key, add an extra metaState check. See the hasModifiers documentation.

What about a meta-key combination? Here is what a Ctrl-Shift-z command looks like.

Mouse/Touchpad Input

Right Click

Users assume right-click with a mouse and double-finger tap on the trackpad will bring up a context menu or other context-sensitive information. In most cases, the simplest approach is to add a ContextMenu to the appropriate view. Otherwise, you can create a specific ContextClickListener.

ContextMenu: See the Creating Contextual Menus documentation.

ContextClickListener: See the Right-Click Support documentation.

Tooltips / Hover Text

Add tooltips where appropriate to help the user understand how your UI operates. See the TooltipCompat documentation.

Hover Effects

It can be useful to add visual feedback effects to certain views when a pointing device is hovering over them. See the View.OnHoverListener and MotionEvent documentation.

Mouse Scroll Wheel Action

On Chrome OS, many views will automatically implement mouse scroll wheel actions. For others, particularly custom views, you may need to handle this yourself. See the MotionEvent documentation.

Drag and Drop

In a desktop environment, it is often natural to drag and drop items into your app, particularly from Chrome OS’s file manager. The following snippet shows the basic drop target implementation to receive files. Note: the MIME-type for Chrome OS file URIs is application/x-arc-uri-list.

For more detailed information about setting this up and implementing the other half of drag and drop (the drag part), check out my post on Implementing Drag and Drop. Also see the official Drag and Drop documentation.

Window/Display

Maintaining State with Architecture Components

Android apps should be using Architecture Components to handle state during orientation and configuration changes. This is particularly important on Chrome OS because of free-form window resizing and the ease of switching between laptop and tablet mode. ViewModel and LiveData are the main components needed for robust state handling. Check out this blog post for deeper dive into handling state using ViewModel and onSavedInstanceState.

The code sample below demonstrates how to store and automatically update an integer (number of times a button has been clicked) but this same setup can also be used for complex data structures, media controllers, and more.

First extend ViewModel:

And then in onCreate of the main Activity:

Happy coding!

Thanks for reading! Look forward to more Android on Chrome OS specific posts this year. If this was helpful or if you have a great Chrome OS implementation going on, I’d love to hear about it!

All code found here is licensed under the Apache 2.0 license. Nothing here is part of any official Google product.