Migrate to 3.0.0


Before migration to version 3.x.x (the latest) please migrate first to version 2.x.x (the latest v.2).

Refer to the migration guide here

In version 3.0.0 we modernized our UI and added support for light and dark modes. Additionally, we unified the public API of the SDK and introduced an easier way to customize certain parts of the UI.

The capture feature is provided by Gini Capture SDK. Later, we refer to resources provided by Gini Capture SDK.

Migrate from Component API

The Component API provided more UI customization options at the cost of a more difficult integration and maintenance. It was based on fragments, and you managed navigation between them and also update the navigation whenever we introduced breaking changes.

Maintaining the Component API along with the Screen API required an increasing amount of effort as we added new features. We decided therefore to unify both APIs and introduce the ability to inject fully custom UI elements.

The major benefit of the Component API was the ability to use a custom navigation bar (toolbar or action bar). Via UI injection that is still possible with the new public API.

Follow these steps to make the migration to the new public API easier:

  • Configure the SDK the same way as before by using GiniBank.

  • If you used a custom navigation bar, you can use the new ability to inject fully custom UI elements. To do this, implement the NavigationBarTopAdapter interface and pass it to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(navigationBarTopAdapter = )). The NavigationBarTopAdapter interface declares the contract your view has to fulfill and lets the SDK ask for your view instance when needed.

  • Use the CaptureFlowContract and GiniBank.startCaptureFlow() to launch the SDK instead of CameraFragmentCompat.

  • Handle the result of the CaptureFlowContract by implementing an ActivityResultCallback<CaptureResult> to receive the extracted information (or other results like errors or cancellations).

  • Remove all code related to interacting with the SDK’s fragments. From now on the entry point is GiniBank.startCaptureFlow() and customization happens through GiniBank and via overriding of resources.

  • Use the new UI customization options and follow the screen-by-screen UI customization section to adapt the look of the new UI.


Migrate from Screen API

The new public API is based on the Screen API, so you only use the new UI customization options and follow the screen-by-screen UI customization section to adapt the look of the new UI.


Migrate Cleanup and Transfer Summary step

We have renamed “feedback” to “transfer summary”.

We simplified the transfer summary sending logic. Before you clean up the Gini Bank SDK, pass the values the user receives (and potentially corrects) to GiniBank.sendTransferSummary(). All values except the one for the amount are passed in as strings. The amount needs to be passed in as BigDecimal and its currency as an Enum value.

You don’t need to call any additional methods to send the transfer summary.

Default Networking implementation

You don’t need to interact with the GiniCaptureDefaultNetworkApi anymore. The GiniBank.sendTransferSummary() method takes care of sending the transfer summary.

Custom Networking implementation

Only implement the GiniCaptureNetworkService from now on. We removed the GiniCaptureNetworkApi and moved the sendFeedback() method to the GiniCaptureNetworkService.

GiniCaptureNetworkService.sendFeedback() is called when you pass the values the user receives (and potentially corrects) to GiniBank.sendTransferSummary().

The term “feedback” was kept in the GiniCaptureNetworkService to match the name of the Pay API’s feedback endpoint.


Overview of new UI customization options

To simplify UI customization, we introduced global customization options. There is no need to customize each screen separately anymore.

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 v2 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>

Colors

We introduced a global color palette which you are free to override. Custom colors are applied to all screens.

For more information about the names of the color resources, see Overview of UI Customization Options.

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

Images

Customizing images is done the same way as before via overriding of drawable resources. Find the drawable resource names in the screen-by-screen UI customization section.

We replaced most drawables with 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 folder so that they also override any density-specific PNGs.

Typography

We introduced global typography based on text appearance styles from Material Design v3. 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 overridden widget styles where you set a custom text appearance.

For more information about the typography style names, see Overview of UI Customization Options.

Text

Text customization is done the same way as before via string resources.

UI elements

Certain elements of the UI can now be fully customized via UI injection. This helped us to drop the Component API while still letting in-depth customization for certain parts of the UI.

UI injection utilizes view adapter interfaces which you can implement and pass to GiniBank when configuring the SDK. These interfaces declare the contract the injected view has to fulfill and let the SDK ask for your view instance when needed.

The most important injectable UI element is the top navigation bar. You can also show the navigation bar on the bottom using your own custom view. For more information, see Generic Components.

Dark mode

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


Migrate to new UI

Back buttons

We removed setBackButtonsEnabled and don’t support this option anymore.


Onboarding screen

The new onboarding screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

Images and text are onboarding page specific and need to be customized for each page.

For more information, see Onboarding Screen.

Breaking changes

Setting custom onboarding pages

The OnboardingPage class was changed to also enable setting a title for the page and injecting a view for the illustration.

To display drawable resources, use the ImageOnboardingIllustrationAdapter.

If you set custom onboarding pages, create the OnboardingPage as shown in the example:

New features

Custom illustration views

To inject any custom view for the illustration, implement the OnboardingIllustrationAdapter interface and pass it to either GiniBank or the OnboardingPage constructor.

For example, if you want to show animated illustrations, use a Lottie view in your OnboardingIllustrationAdapter implementation.

For more information, see Onboarding Screen.

Bottom navigation bar

To show a bottom navigation bar, pass true to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(bottomNavigationBarEnabled = )). There is a default implementation, but you can also use your own by implementing the OnboardingNavigationBarBottomAdapter interface and passing it to GiniBank.

For more information, see Onboarding Screen.


Camera screen

The new camera screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see Camera Screen.

New features

We implemented image cropping. Parts of the image that appears outside the white camera frame are cut out from the final image.

Bottom navigation bar

To show a bottom navigation bar, pass true to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(bottomNavigationBarEnabled = )). There is a default implementation, but you can also use your own by implementing the CameraNavigationBarBottomAdapter interface and passing it to GiniBank.

For more information, see Camera Screen.

Custom loading indicator view

There is a default implementation of indicator which indicates that the image is in the cropping process, but you can show your own activity indicator by implementing the CustomLoadingIndicatorAdapter interface and passing it to GiniBank.

For more information, see Camera Screen.

Breaking changes

We removed the tooltip popups that were shown on the first launch.


Review screen

The new review screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see Review Screen.

New features

Custom Process button loading indicator

There is a default implementation of a loading indicator on the Process button that indicates document upload is in progress, but you can show your own indicator by implementing the CustomLoadingedicatorAdapter interface and passing it to GiniBank.

For more information, see Review Screen.

Bottom navigation bar

To show a bottom navigation bar, pass true to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(bottomNavigationBarEnabled = )). There is a default implementation, but you can also use your own by implementing the ReviewNavigationBarBottomAdapter interface and passing it to GiniBank.

For more information, see Review Screen.

Breaking changes

Re-ordering and rotation of the images are not supported anymore. The Gini API automatically corrects rotation during processing. If the processing of images fails, then the user is redirected to the error screen.


Analysis screen

The new analysis screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see Analysis Screen.

Breaking changes

The new analysis screen does not show the page count of PDF files and preview images for photo documents.

New features

Custom Loading Indicator View

There is a default implementation for indicating that document analysis is in progress, but you can show your own activity indicator by implementing the CustomLoadingIndicatorAdapter interface and passing it to GiniBank.

For more information, see Analysis Screen.


Help screen

The new help screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see Help Screen.

New features

Bottom navigation bar

To show a bottom navigation bar, pass true to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(bottomNavigationBarEnabled = )). There is a default implementation, but you can also use your own by implementing the HelpNavigationBarBottomAdapter interface and passing it to GiniBank.

For more information, see Help Screen.


No results screen

The new no-results screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see No Results Screen.

New features

New UI

The new no results screen gives options to enter document details manually.

Enter details button

Users can now click the Enter manually button on the no results screen and exit the SDK with CaptureResult.EnterManually.

For more information, see No Results Feature.


Error screen

The new analysis screen uses the global UI customization options.

For more information, see Error Screen.

Breaking changes

Showing errors during usage of the SDK was changed from a snack bar to a whole new screen.

New features

New UI

The new error screen gives options to retake photos or enter details manually and displays errors with more detailed descriptions.

Enter details manually button

Users can now click an Enter manually button on the error screen and exit the SDK with CaptureResult.EnterManually.

For more information, see Error Feature.


QR code scanner

The new UI for the QR code scanner uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see Camera Screen.

Breaking changes

QR code scanning UI and functionality changed. Scanning and processing happen automatically now.

New features

The SDK can be launched to only scan QR codes. To enable this feature, pass true to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(onlyQRCodeScanningEnabled = )).


Migrate Return Assistant

Digital invoice onboarding screen

The new onboarding screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see Onboarding Screen.

New features

Bottom navigation bar

To show a bottom navigation bar, pass true to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(bottomNavigationBarEnabled = )). There is a default implementation, but you can also use your own by implementing the DigitalInvoiceOnboardingNavigationBarBottomAdapter interface and passing it to GiniBank.

For more information, see Onboarding Screen.

Custom illustration view

To inject any custom view for the illustration, implement the OnboardingIllustrationAdapter interface and pass it to GiniBank.digitalInvoiceOnboardingIllustrationAdapter.

For example, if you want to show animated illustrations, use a Lottie view in your OnboardingIllustrationAdapter implementation.

For more information, see Onboarding Screen.


Digital invoice overview screen

The new digital invoice overview screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see Overview Screen.

Breaking changes

We removed the ability for users to manually add additional articles. We also pulled the info box.

New features

Bottom navigation bar

To show a bottom navigation bar, pass true to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(bottomNavigationBarEnabled = )). There is a default implementation, but you can also use your own by implementing the DigitalInvoiceNavigationBarBottomAdapter interface and passing it to GiniBank.

For more information, see Overview Screen.


Digital invoice edit article screen

The new edit article screen uses the global UI customization options and is presented as a bottom sheet on phones and as a dialog on tablets. You can discard the earlier screen-specific customizations.

For more information, see Edit Article Screen.

Breaking changes

We removed the ability to deselect the article from this screen.

New features

Easier currency and amount input when editing an article.


Digital invoice help screen

The new help screen uses the global UI customization options. You can discard the earlier screen-specific customizations.

For more information, see Help Screen.

New features

Bottom navigation bar

To show a bottom navigation bar, pass true to GiniBank.setCaptureConfiguration(context, CaptureConfiguration(bottomNavigationBarEnabled = )). There is a default implementation, but you can also use your own by implementing the DigitalInvoiceHelpNavigationBarBottomAdapter interface and passing it to GiniBank.

For more information, see Help Screen.

Gini GmbH | Ridlerstr. 57 | 80339 München