Components

Image annotation

Image annotation enables users to edit images by adding text, drawing, and highlighting. It's available across the platform, including the activity stream, attachment functions, and input form screens.

Overview

  • Available sinceMadrid
  • A11Y WCAG 2.1 AA
Figma link
Image annotation Figma component

Figma library with components for designing Native Mobile.

ServiceNow Docs link
Image annotation docs

Implementation and administration guides

When to use

Image annotation is enabled by default as one of the camera options.

When not to use

Image annotation can be disabled by the admin at the instance level.

Anatomy

iOS image annotation

iOS

Android image annotation

Android

  1. Header: Displays options like cancel, undo/redo, and save changes (Add).
  2. Photo: The captured photo that can be annotated.
  3. Tools: Includes stroke width adjustments and color selection for editing.
  4. Menu: Navigate between annotation tools like brush, eraser, and text.

System operation

While most of our components work similarly on iOS and Android, some differ in behavior and appearance. Image Annotation is one such component.
On both platforms, after taking a photo and choosing to use it, the user is directed to the annotation screen. There, they can either add annotations—with each system offering slightly different options—or upload the photo as is, without any modifications.

iOS

On iOS, we provides an out-of-the-box experience, allowing you to:

  • Draw directly on the photo (Adjust brush size and color.)
  • Add text with customizable size and color.
  • Use undo and redo functions.
  • Erase annotations easily.
  • Incorporate shapes, signatures, and stickers.
System operation iOS
  1. After Taking Photo: This is the initial screen displayed immediately after capturing a photo, offering options to retry or proceed to the annotation screen.
  2. Annotation Screen: This screen allows users to annotate the photo by drawing, adjusting brush size and color, adding text, and more.

Android

On Android, we rely on a third-party operation.

On Android, the following features are supported:

  • Draw directly on the photo (Adjust brush size and color.)
  • Add text with customizable size and color.
  • Use undo and redo functions.
  • Delete annotations easily.
System operation Android
  1. After Taking Photo Screen: The screen displayed immediately after capturing a photo, offering options to retry or proceed to the annotation screen.
  2. Annotation Screen: From here, the user can either upload and use the photo as is or annotate it with drawing tools, brush size and color adjustments, and text.

Responsive behaviors

Learn how the Image annotation responds to changes in screen size or orientation.

Landscape

This is what the Image annotation screen looks in landscape mode:

Responsive behavior for image annotation