Structure your media app 4) Design sign-in & settings

4) Design sign-in & settings

In addition to making some decisions about how your content will be browsed and played (tasks 1 through 3), you may need to design app-specific screens for two functions: sign-in and settings.

If you want users to sign in to your app or access app settings, you need to design any relevant screens and interaction flows, including screens for any error-handling that may be needed. The examples and guidelines in this section will help you to optimize your designs to be viewed on a car screen, while parked, at any time of day or night.

Technical note:
To implement a settings function in your app, you need to declare a Settings activity in your app’s manifest file. Sign-in can be implemented either as a Settings workflow (if some functions of your app can be accessed anonymously) or as a dedicated Sign-in activity (if sign-in is required for using your app). For details, consult Add a Settings activity and Add a Sign-in activity.

Sign-in & settings: general guidelines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

These guidelines apply to both the sign-in flow and settings screen. For additional guidelines specific to each, refer to Sign-in examples & guidelines and Settings examples & guidelines.

Also, be sure to review the current Layout requirements.

Requirement level

Guidelines

MUST

App developers must:

  • Provide a Close affordance to exit the settings screen and top-level sign-in screen
  • Provide a Back affordance from any subsequent screens following the top-level screen
  • Position the Close or Back affordance at the top left of the screen
  • Maintain a contrast ratio of at least 4.5:1 between backgrounds and icons or text
  • Use recommended type sizes of at least 32dp for primary text and 24dp for secondary text
  • Keep touch targets above the recommended minimum size of 76 x 76dp

SHOULD

App developers should:

  • Use a dark theme for all screens and overlays
  • Include a logo or app icon on all screens
  • When using an accent color, use the same one provided as a branding element
  • Keep text strings within the recommended maximum text length of 120 characters
  • Provide a distance of at least 24dp between touch targets where possible

MAY

App developers may:

  • Decide whether to implement sign-in and settings functions as part of their app

Rationale:

Screens designed directly by media app developers should

  • Support standard media app navigation patterns and design conventions.
  • Reflect design principles and visual foundations for Android Automotive OS.

Layout requirements Expand and collapse content An arrow that points down when collapsed and points up when expanded.

Currently, you need to design the sign-in and settings screens for both portrait and landscape layouts:

  • A portrait-mode layout for the screen size used in the Volvo Polestar 2 (1068 x 1425dp; 1152 x 153px)
  • A landscape-mode layout for the screen size used in Google's reference Automotive implementation (1075 x 806dp; 1024 x 768px)

You can use the emulator in Android Studio to see how your layouts look in these two implementations. You can also consult Adaptive-responsive framework for reference information about how car makers’ layouts are adapted to various screen sizes (keeping in mind that details such as margins and padding values may be changed by the car maker).

Sign-in examples & guidelines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

If your app requires sign-in, Android Automotive OS will take users to your sign-in flow when they try to open your app without being signed in. After signing in, the user should land at the top level of your medica app’s navigation structure.

You need to design screens and a flow for whatever sign-in process your app uses, which will probably include one or more of the following:

  • Username entry
  • Bluetooth connection
  • PIN entry

Example screens and guidelines are provided below.

Username entry

If you want users to sign in to your app by entering a username and password on the car screen, use the example below as a reference point and keep in mind the guidelines at the end of this section.

In this sample sign-in flow, the username and password are entered in separate steps to reduce cognitive load, and users also have options to sign up, get help with forgotten sign-in text, or sign in with Google.

Bluetooth connection

If you want users to use Bluetooth to connect with the phone version of your app for sign-in, use the example below as a reference point and keep in mind the guidelines at the end of this section.

This sample flow lets the user choose to sign in with Bluetooth, then goes to a screen with further instructions for continuing the process on a phone.

PIN entry

If you want users to sign in using a PIN to connect via phone, use the example below as a reference point and keep in mind the guidelines at the end of this section.

Users see a PIN on the vehicle screen and enter the PIN on their phone to sign in.

Sign-in guidelines

Be sure to consult Sign-in & settings: general guidelines in addition to these guidelines.

Requirement level

Guidelines

SHOULD

App developers should:

  • Separate entry of username and password into two steps
  • Put a label in the input box (“Enter your password”) and keep it visible somewhere onscreen after user starts typing
  • Display avatar and generic email as a cue
  • Provide users with the ability to show the password (which is generally hidden) while it's being typed
  • Provide a way to access a forgotten username or password
  • Provide a way to access creating an account

MAY

App developers may:

  • Use “Sign in with Google” as a way to sign in

Rationale:

  • Consistent media experience. Sign-in screens designed for one media app should provide an experience that is broadly consistent with sign-in screens for other media apps.
  • Consistent look and feel. Sign-in screens should support basic design principles and visual foundations for Android Automotive OS.

Settings examples & guidelines Expand and collapse content An arrow that points down when collapsed and points up when expanded.

The app bar in the media app template includes an option for a Settings control, which users can select to bring up an overlay with your app settings screen.

A typical settings screen includes the types of elements shown here, in accordance with the guidelines that follow.

Settings guidelines

Be sure to consult Sign-in & settings: general guidelines in addition to these guidelines.

Requirement level

Guidelines

SHOULD

App developers should:

  • Make all available settings accessible from a single screen
  • Include only settings that are necessary for app use (such as account info, app preferences, and sign-in/sign-out) or relevant to listening to media in the car (for example, turning off explicit content)

Rationale:

  • Design for cars: Keep in-car settings to the minimum required for that environment, and make them easy to find and use.