Android apps have an important role to play in redefining what modern computing
looks like on large screens. That said, simply porting your phone app to Chromebooks
won't give your users the best experience. This page details some ways that you
can tailor your experience towards laptop and convertible form factors.

Leverage support for free-form multi-window

The implementation of Android apps on Chrome OS includes basic multi-window
support. Instead of always taking up the full screen, Android renders
apps on Chrome OS into free-form window containers that are appropriate for
this form factor, as shown in figure 1. For more information, see Window management.

Figure 1. An app in different window sizes

Users can resize the window that hosts your Android app, as shown in figure 2.
To ensure that your free-form windows resize smoothly and are able to display
their entire contents to the user, read the guidelines and things to watch out
for in Screen Size Compatibility
for Chromebooks.

Figure 2. A resizable app window

Customize the top bar color

Chrome OS uses the app theme to color the top bar displayed on top of the app,
which shows when users hold the window controls and the back button. To make
your app look polished and customized for Chrome OS, define colorPrimary and (if possible) colorPrimaryDark values in your app's theme. The latter is used
to color the top bar. If only colorPrimary is defined, Chrome OS
uses a darker version of it in the top bar. For more information, see Using the Material Theme.

Support the keyboard, trackpad, and mouse

All Chromebooks have a physical keyboard and a trackpad, and some have a
touchscreen as well. Some devices can even convert from laptop to tablet form.

All apps for Chrome OS should support mouse, trackpad and keyboard and be
usable without a touchscreen. Many apps already support mouse and trackpad with
no extra work required. However, it's always best to customize your app's
behavior appropriately for mouse, and you should support and distinguish between
mouse and touch inputs. Read more about mouse support in Input compatibility for
Chromebooks.

You should ensure that:

All targets are clickable with mouse

All touch scrollable surfaces scroll on mouse wheel events

Hover states are implemented with intention and best judgment to improve
UI discovery without overwhelming the user.

Figure 3. Scrolling with mouse wheel

Figure 4. Button hover states

Where appropriate, you should differentiate between mouse and touch inputs. For
example, tapping an item could trigger a multi-select UI while clicking the same
item could trigger a single selection instead.

Custom cursors

Apps should customize mouse cursors to indicate what element of their UI can be
interacted with and how. You can set the PointerIcon to use
when users interact with a view by calling the setPointerIcon() method.

Apps should show:

I-beam pointers for text.

Resize handles at resizable layer edges.

Open hand / closed hand pointers for content that can be panned or dragged
through a click and drag gesture.

Processing spinners.

The PointerIcon class provides constants that you
can use to implement custom cursors.

Keyboard shortcuts and navigation

Since every Chromebook has a physical keyboard, you should provide hotkeys to
allow your users to be more productive. For example, if your app supports
printing, you could use Control+P to open a print dialog.
Similarly, all crucial UI should also be handled by tab navigation.
This is especially important for accessibility. To meet accessibility standards,
however, all UI surfaces should have obvious and accessibility-compliant focused
states.

Figure 5. Transversal tabbing

Figure 6. Replacing a swipe gesture with a control that appears on hover

You should also make sure to implement keyboard or mouse alternatives to core
features hidden under touch-specific interactions, such as long presses,
swipes, or other multi-touch gestures. An example solution would be to provide
buttons that appear on a surface on hover.

Further enhance user input

Context menus

Figure 7. A context menu appearing on right click

Android context menus, which are another accelerator for taking users to
features of your app, can be triggered by a click of a mouse or trackpad's
secondary button, or through a long press on a touchscreen.

Drag and drop

Figure 8. Drag and drop in a file tree interface

Building drag and drop interactions can bring efficient, intuitive productivity
functionality to your app. For more information, see Drag and Drop.

Stylus support

Stylus support is crucial for drawing and note taking apps. Provide enhanced
support for stylus-equipped Chromebooks and tablets by implementing interactions
tailored to the usage of stylus input. Be considerate of the potential variations
in different stylus hardware when designing your stylus interactions. See Input Compatibility for
Chromebooks for an outline of the stylus APIs.

Make your layouts responsive

Your app should make good use of the screen real estate available regardless of
the visual state (fullscreen, portrait, landscape, windowed). Some examples of
good space usage include but are not limited to:

Displaying app architecture.

Limiting text length and image size to a max-width.

Making better use of real estate in the app's toolbar.

Improving placement of UI affordances, by adapting it to mouse usage instead
of thumb usage.

Optimizing the size for videos and images, establishing a set of max-width
and height for all media, and maximizing readability and scannability.

Implementing a responsive column system. For more information, see Responsive
UI.

Resizing and modifying the UI when needed using the column system, and
avoiding opening a new windows when possible.

Removing or reducing the importance of horizontal scrolling components.

Avoiding fullscreen modal UI. Use inline UI, such as progress indicators and
alerts, for all non-critical actions

Using improved UI components, such as time and date picker, text fields, and
dropdowns, that are designed for mouse, keyboard and larger screens.

Using inline edits, additional column or modal ui instead of a new activity
for small to medium edit feature.

Removing or modifying floating action buttons (FAB) for better keyboard
navigation. By default, a FAB is positioned last in transversal tabbing
order. It should be made first because it is the primary action or it should
be replaced by another higher level affordance.

Change navigation patterns

As your app becomes increasingly customized for a laptop environment, consider
moving towards a navigation pattern that de-emphasizes the back button. The app
should be able to handle its own history stack by providing in-app back
buttons, breadcrumbs, or other escape routes like close or cancel buttons as
part of its large screen UI. A system-level back button is a pattern carried
over from Android's handheld roots—one that doesn't fit as well in a
desktop context.

Resolve issues with camera preview images

Camera problems can arise when the app can only run in portrait orientation
but the user runs it on a landscape screen. In this case, the preview, or the
captured result, could be incorrectly rotated.

Compatibility
mode changes how the system handles events, such as orientation changes, in
Chrome OS. This helps to prevent issues when the camera is used in the wrong
orientation mode. To enable compatibility mode: