Patterns and components

In Android 8.0, the Settings menu gains several components and widgets that cover common uses. Device manufacturers and developers are encouraged to use the common components when extending the Settings app so new user interfaces stay consistent with the existing Settings UI.

Here is a summary of improvements:

  • Divider behavior change in support library Preference framework. Divider is now drawn between categories.
  • ActionBar theme change. The ActionBar now uses light color theme, with accent color text.
  • New preference layout. The space for icons remains even when a preference has no icon.

New widgets:

  • A header widget for application details. Displays app icon, app label and other information.
  • An expand button on some pages. Page can start as collapsed and hide less important items until user clicks expand button.
  • Default app picker UI:
    • The UI for choosing default browser, default phone app, etc.
    • Formerly a dialog, now it's a full screen radio button-based UI.
  • A "MasterSwitch" style preference. This is a preference with two click targets. Left target leads to a subsetting fragment or intent. Right target is a switch toggle, controlling on/off for the entire page.

Examples and source

  • Divider behavior
    • All pages in Settings are modified to use the new divider behavior.
    • The divider behavior is defined as a ThemeOverlay in:
      packages/apps/Settings/res/values/styles_preference.xml
  • ActionBar theme change
    • All pages in Settings are modified to use the new ActionBar theme.
    • The theme is defined in Theme.DeviceDefault.Settings
  • New preference layout
    • Many pages in Settings are now using the new preference layout.
    • You can find the code in:
      packages/apps/Settings/res/values/styles_preference.xml
  • App header widget
    • Most application information pages in Settings are already implementing the new App header.
    • Examples and code can be found at:
      packages/apps/Settings/src/com/android/settings/applications/AppHeaderController.java
  • Expand button
    • Examples and code can be found at:
      packages/apps/Settings/src/com/android/settings/dashboard/ProgressiveDisclosureMixin.java

      Note: This component must be used together with DashboardFragment. (See more details about DashboardFragment in Updated Information Architecture.)

  • Default app picker
    • You can find the code for base class in:
      packages/apps/Settings/src/com/android/settings/applications/defaultapps/DefaultAppPickerFragment.java
    • There are several subclasses of DefaultAppPickerFragment, each implementing a picker for different intent.
  • MasterSwitch style preference
    • Code is at: https://cs.android.com/android/platform/superproject/+/main:packages/apps/Settings/src/com/android/settings/wifi/WifiPrimarySwitchPreferenceController.java
    • An example use case is Wi-Fi primary switch. You can find an example at: packages/apps/Settings/src/com/android/settings/wifi/WifiMasterSwitchPreferenceController.java

Implementation

Device manufacturers can start using all of the new components out of the box. If OEMs decide to implement a new "MasterSwitch" style preference or default app picker, they should follow the examples in this document and the reference files (Javadoc) written with each component for more details.

Customizing

  • Divider behavior. To change how divider is drawn, update the style for Settings dividers and change the value for the following:
    • allowDividerAbove
    • allowDividerBelow
    • allowDividerAfterLastItem
  • ActionBar theme color. Activities should use Theme.DeviceDefault.Settings as their theme, or create a custom theme using Theme.DeviceDefault.Settings as parent.
  • App header widget. Use setters in AppHeaderController to customize each field and call build() once all fields are set.
  • Expand button:
    • To fully disable the functionality, override the constructor for ProgressiveDisclosureMixin and set keepExpanded to true.
    • To customize how many items to show initially, call the ProgressiveDisclosureMixin.setTileLimit() method during fragment's onAttach(Context) method.