Customization Guide¶
UI customization is provided mostly via overriding of app resources: theme, styles, dimensions, strings, colors, texts, etc.
We provide global customization options which are applied on all screens consistently. Screen specific customizations are only needed for images and texts.
Overview of UI Customization Options¶
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.
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 are providing a global color palette which you are free to override. The custom colors will be then applied on all screens.
You can find the names of the color resources in the color palette below.
Note
If you have overridden the GiniCaptureTheme then the theme colors you have set there will override the color
palette customization.
You can view our color palette here:
Images¶
Customizing of images is done via overriding of drawable resources. You can find the drawable resource names in the screen-by-screen UI customization section.
We are using mostly vector drawables. Unfortunately due to the limitations of vector drawables some images had to be added as PNGs.
If you use vector drawables please add them to the drawable-anydpi folder so that they also override any density specific PNGs.
Typography¶
We provide a 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>
Note
If you have overriden the GiniCaptureTheme then the text appearances you have set there will override the
typography customization. Same applies to overriden widget styles where you have set a custom text appearance.
You can preview our typography along with their style resource names below:
Text¶
Text customization is done via overriding of string resources.
Custom UI Elements¶
Certain elements of the UI can be fully customized via UI injection. It utilizes view adapter interfaces which you
can implement and pass to GiniCapture when configuring the SDK. These interfaces declare the contract the injected
view has to fulfill and allow the SDK to ask for your view instance when needed.
Dark mode¶
To customize resources for dark mode add them to resource folders containing the -night resource qualifier.
Onboarding Screen¶
UI Customization¶
Bottom Navigation Bar¶
You can inject your own view for the bottom navigation bar, if you set
GiniCapture.newInstance().setBottomNavigationBarEnabled() to true and pass a custom
OnboardingNavigationBarBottomAdapter implementation to GiniCapture.Builder:
OnboardingNavigationBarBottomAdapter customOnboardingNavigationBarBottomAdapter = new CustomOnboardingNavigationBarBottomAdapter();
GiniCapture.newInstance()
.setOnboardingNavigationBarBottomAdapter(customOnboardingNavigationBarBottomAdapter)
.build();
Custom Onboarding Pages¶
If you wish to show different onboarding pages then pass a list of OnboardingPage objects to
GiniCapture.Builder.setCustomOnboardingPages().
Custom Illustration Views¶
You can inject your own views for the illustrations. For example if you need to animate the illustrations on the
onboarding pages implement the OnboardingIllustrationAdapter interface to inject a view that can animate images
(e.g., Lottie) and pass it to the relevant onboarding illustration adapter
setters (e.g., setOnboardingAlignCornersIllustrationAdapter()) when building the GiniCapture instance. The
reference documentation of
GiniCapture.Builder lists all the setters.
Camera Screen¶
UI Customization¶
Bottom Navigation Bar¶
You can inject your own view for the bottom navigation bar, if you set
GiniCapture.newInstance().setBottomNavigationBarEnabled() to true and pass a custom
CameraNavigationBarBottomAdapter implementation to GiniCapture.Builder:
CameraNavigationBarBottomAdapter customCameraNavigationBarBottomAdapter = new CustomCameraNavigationBarBottomAdapter();
GiniCapture.newInstance()
.setCameraNavigationBarBottomAdapter(customCameraNavigationBarBottomAdapter)
.build();
Custom Loading Indicator¶
There is a default loading indicator which shows that image is being processed. You can show your own activity indicator
by implementing the CustomLoadingIndicatorAdapter interface and passing it to GiniCapture:
CustomLoadingIndicatorAdapter customLoadingIndicatorAdapter = new MyCustomLoadingIndicatorAdapter();
GiniCapture.newInstance()
.setLoadingIndicatorAdapter(customLoadingIndicatorAdapter)
.build();
Review Screen¶
UI Customization¶
Bottom Navigation Bar¶
You can inject your own view for the bottom navigation bar, if you set
GiniCapture.newInstance().setBottomNavigationBarEnabled() to true and pass a custom
CameraNavigationBarBottomAdapter implementation to GiniCapture.Builder:
ReviewNavigationBarBottomAdapter customReviewNavigationBarBottomAdapter = new CustomReviewNavigationBarBottomAdapter();
GiniCapture.newInstance()
.setReviewBottomBarNavigationAdapter(customReviewNavigationBarBottomAdapter)
.build();
Custom “Process” Button Loading Indicator¶
There is a default loading indicator on the “Process” button which shows that the upload is in progress. You can show
your own activity indicator by implementing the OnButtonLoadingIndicatorAdapter interface and passing it to
GiniCapture:
OnButtonLoadingIndicatorAdapter customOnButtonLoadingIndicatorAdapter = new CustomOnButtonLoadingIndicatorAdapter();
GiniCapture.newInstance()
.setOnButtonLoadingIndicatorAdapter(customOnButtonLoadingIndicatorAdapter)
.build();
Analysis Screen¶
UI Customization¶
Note
This screen does not show a bottom navigation bar even if the value passed to GiniCapture.newInstance().setBottomNavigationBarEnabled() is true.
Custom Loading Indicator¶
You can show a customized activity indicator on this screen. You can pass your custom CustomLoadingIndicatorAdapter implementation to
GiniCapture.Builder :
CustomLoadingIndicatorAdapter customLoadingIndicatorAdapter = new MyCustomLoadingIndicatorAdapter();
GiniCapture.newInstance()
.setLoadingIndicatorAdapter(customLoadingIndicatorAdapter)
.build();
Help Screen¶
UI Customization¶
Bottom Navigation Bar¶
You can inject your own view for the bottom navigation bar. You can pass your custom HelpNavigationBarBottomAdapter implementation to
GiniCapture.Builder:
HelpNavigationBarBottomAdapter customHelpNavigationBarBottomAdapter = new CustomHelpNavigationBarBottomAdapter();
GiniCapture.newInstance()
.setHelpNavigationBarBottomAdapter(customHelpNavigationBarBottomAdapter)
.build();
Custom Help Screens¶
You can show your own help screens. They will be appended to the list on the main help screen.
You can pass the title and activity for each screen to the
GiniCapture.Builder using a list of HelpItem.Custom objects:
List<HelpItem.Custom> customHelpItems = new ArrayList<>();
customHelpItems.add(new HelpItem.Custom(R.string.custom_help_screen_title,
new Intent((Context) this, CustomHelpActivity.class)));
GiniCapture.newInstance()
.setCustomHelpItems(customHelpItems)
.build();