Overview of UI Customization Options

1 Styles
- 1.1 Theme
- 1.2 Widgets
2 Colors
3 Images
4 Typography
5 Text
6 Dark mode

Styles

We leverage the power of Material Design to configure a theme for the SDK with a global color palette and typography that is applied on all the screens. By using global styles for the various widgets, we enable you to customize them in a single place. They are then consistently applied on all screens.

Theme

The theme style is based on Material Design v3 and is named GiniCaptureTheme. To override the theme in your application, use Root.GiniCaptureTheme as the parent:

<style name="GiniCaptureTheme" parent="Root.GiniCaptureTheme">
  (...)
</style>

Widgets

The style of buttons and other widgets is based on Material Design v2. To override them in your application, use the root style as the parent, for example:

<style name="GiniCaptureTheme.Widget.Button.OutlinedButton" parent="Root.GiniCaptureTheme.Widget.Button.OutlinedButton">
  (...)
</style>

Colors

We provide a global color palette which you are free to override. The custom colors are then applied to all screens.

If you override the GiniCaptureTheme, the theme colors you set there override the color palette customization.

Find the names of the color resources in the color palette:

Images

Customizing of images is done via overriding of drawable resources. Find the drawable resource names in the following sections. We mostly use vector drawables. Unfortunately, due to the limitations of vector drawables, some images had to be added as PNGs.

If you use vector drawables, add them to the drawable-anydpi and drawable-night-anydpi folders so that they also override any density specific PNGs.

If you want to override specific SDK images:

Add your own images to your app’s res/drawable-* folders using the image names from the SDK's UI customization guide. It is important to name the images you wish to override exactly as shown in the UI customization guide, otherwise overriding won’t work.
If you use vector drawables, add them to the drawable-anydpi (drawable-night-anydpi for dark mode) folders so that they also override any density specific images.

Typography

We provide global typography based on text appearance styles from Material Design v2. To override them in your application, use the root style as the parent, for example:

<style name="GiniCaptureTheme.Typography.Body1" parent="Root.GiniCaptureTheme.Typography.Body1">
    (...)
</style>

If you override the GiniCaptureTheme, the text appearances you set there override the typography customization. The same applies to the override of widget styles where you set a custom text appearance.

Preview our typography and find the names of the style resources:

Text

Text customization is done via overriding of string resources.

Dark mode

To customize resources for dark mode, add them to resource folders containing the -night resource qualifier.