Signature Capture Inline
Intro
Signature capture inline is a variation of the signature capture component. This variation allows users to input their signature on a screen that is shared with other components.
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Intro-Image-1.png)
Usage
Signature capture inline may be used when users need to view content on the screen along with the signature input area. This provides users with more context on what they are signing for.
Structure
Default State
A. Header
The header introduces the signature capture inline. It is the only part of the component that is not covered by the activation scrim.
B. Activation Scrim
The activation scrim is an overlay that is placed on top of the signature cell. When the scrim is present, the signature cell is deactivated and the user cannot sign. The user must tap on the scrim to activate the signature cell.
C. Text Label
The “Tap to Sign” text label provides a call-to-action for the user.
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Structure-Image-1-2.png)
Active State
A. Header
The header introduces the signature capture inline.
B. Signature Line
The signature line prompts the user to input their signature in the space given.
C. Action Button Footer
The action button footer provides the user two action buttons for the signing process. The “Clear” button erases what the user has signed on the screen. The “Save” button saves what the user has signed on the screen. Pressing the “Save” button will trigger the view mode of the signature and the “Re-enter Signature” button to appear.
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Structure-Image-2-1.png)
View Mode
A. Header
The header introduces the signature capture inline.
B. Saved Signature
Once the user saves, the signature becomes transparent to indicate the signing area is deactivated.
C. “Re-enter Signature” Button
The “Re-enter Signature” button allows the user to reactivate the cell and input a new signature. See the interaction in the Behavior section.
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Structure-Image-3-1.png)
Behavior & Interactions
Activation Scrim
The activation scrim is a call–to–action for the user to input their signature. It also allows the user to scroll on the rest of the screen without accidentally signing in the signature capture inline cell. The “Tap to Sign” activation scrim appears only in the first instance where the signature capture inline cell has not been activated yet.
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Capture-Inline-Animation-1-1.gif)
Re-enter Signature
The “Re-enter Signature” button appears once the user has pressed on the “Save” button to save their signature. If pressed, it will clear the saved signature, reactivate the cell, and allow the user to sign.
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Capture-Inline-Animation-2-1.gif)
Specs
The signature capture inline is similar to a form cell and shares the screen with other components. On tablet, the signature capture inline fits within a responsive dialog.
Default State
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-1-Left-1.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-1-Right-1.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-1-Left-Tablet.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-1-Right-Tablet.png)
Active State
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-2-Left-1.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-2-Right-1.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-2-Left-Tablet.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-2-Right-Tablet.png)
View Mode
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-3-Left.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-3-Right-1.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-3-Left-Tablet.png)
![](https://experience.sap.com/fiori-design-android/wp-content/uploads/sites/46/2020/11/Signature-Inline-Specs-Image-3-Right-Tablet.png)
Default State
Sample | Element | Alpha Hex |
|
Background | #FFFFFF |
|
Scrim | #1A000000 or #000000 with 10% opacity |
Active State
Sample | Element | Alpha Hex |
|
Background | #FFFFFF |
|
Text | #32363A |
|
Header | #6A6D70 |
|
Signature line | #89919A |
|
Signature | #6A6D70 |
|
Text button text, contained button background | #0A6ED1 |
|
Contained button text | #FFFFFF |
Saved State
Sample | Element | Alpha Hex |
|
Background | #FFFFFF |
|
Header | #6A6D70 |
|
Saved signature | #666A6D70 or #6A6D70 at 40% opacity |
|
Text button text | #0A6ED1 |