Skip to content

UI Customization

To the Camera UI, you can add as many text and graphic elements as needed.

Usage

String jsonString = "{ \"objects\": [ { \"label\": { \"text\": \"Place the document\\ninside the camera frame\", \"position\": { \"h\": 1.0, \"v\": 1.0 }, \"background\": \"#00FFFFFF\", \"fontColor\": \"#FFEB6517\", \"fontSize\": 18, \"alignment\": \"center\" } } ] }";
JSONObject jsonObject = new JSONObject(jsonString);
DocumentReader.Instance().customization().edit().setUiCustomizationLayer(jsonObject).apply();

Examples

JSON Structure

The JSON with all possible params can be found here.

objects
└── label
└── image
Name Description
label Text elements
image Graphic elements

Label

Adds text elements to the UI.

label
└── text
└── fontStyle
└── fontColor
└── fontSize
└── fontName
└── alignment
└── background
└── borderRadius
└── padding
|   └── start
|   └── end
|   └── top
|   └── bottom
└── margin
|   └── start
|   └── end
|   └── top
|   └── bottom
└── size
|   └── width
|   └── height
└── position
|   └── h
|   └── v
Name Description
text Text
fontStyle Defines whether a font should be styled with a normal, italic, or bold face. Possible values:
  • normal - the text is shown normally
  • italic - the text is shown in italics
  • bold - the text is shown in bold weight
fontColor Font color, hex
fontSize Font size, dp - Android, pt - iOS
fontName Font name
alignment Defines how text aligns in the space it appears:
  • center - align the text in the center of the container
  • left - align the text on the left edge of the container
  • right - align the text on the right edge of the container
background Background color, hex
borderRadius Defines the radius of the element's corners, lets you add rounded corners to elements
padding The space between an element's border and the element's content
margin The space around an element's border
size Size:
  • width - Width, dpi
  • height - Height, dpi
position Position:
  • h - Horizontal positioning
  • v - Vertical positioning

The value should be in a range from 0 to 2

Warning

If both position and margin are used, position has the priority.

Image

Adds graphic elements to the UI.

image
└── data
└── name
└── background
└── borderRadius
└── contentMode
└── padding
|   └── start
|   └── end
|   └── left
|   └── right
|   └── top
|   └── bottom
└── margin
|   └── start
|   └── end
|   └── top
|   └── bottom
└── size
|   └── width
|   └── height
└── position
|   └── h
|   └── v
Name Description
data Image in the Base64 format
name File name (for Android: the file is taken from the drawable folder)
background Background color, hex
borderRadius Defines the radius of the element's corners, lets you add rounded corners to elements
contentMode Defines how a view adjusts its content when its size changes:
  • fill - scale the content to fit the size of itself by changing the aspect ratio of the content if necessary
  • crop - scale the content to fit the size of the view by maintaining the aspect ratio
  • center - center the content in the view’s bounds, keeping the proportions the same
padding The space between an element's border and the element's content
margin The space around an element's border
size Size:
  • width - Width, dpi
  • height - Height, dpi
position Position:
  • h - Horizontal positioning
  • v - Vertical positioning

The value should be in a range from 0 to 2