Overview of UI Customization Options

Owned by Alpar Szotyori (Unlicensed)
Feb 12, 2024
2 min read

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 v3. 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>

If you wish to change the button height please override android:minHeight. We are using android:minHeight to support text resizing for accessibility.

You may also force the height to a certain dimension by overriding both android:minHeight and android:height although we don’t recommend this as it will prevent the button from increasing height to fit larger font sizes.

Material Design buttons include insets which will decrease the visible height of the buttons. You can override android:insetTop and android:insetBottom to remove or adjust the vertical insets.

Colors

We provide a global color palette which you are free to override. The custom colors are then applied to all screens. Customization of colors is done via overriding of color resources. For example to override the color gc_accent_01 add the following snippet to one of your resource XML files (e.g, colors.xml):

<color name="gc_accent_01">#424242</color>

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 screen-by-screen UI customisation guides (e.g., Onboarding Screen, Camera Screen, etc.). We mostly use vector drawables. Due to the limitations of vector drawables, some images had to be added as PNGs.

If you want to override specific SDK images:

  1. 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.

  2. 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:

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.