Skip to end of banner
Go to start of banner

Overview of UI Customization Options

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 31 Next »

Colors

We provide a global color palette GiniColors.xcassets which you are free to override.

We offer several methods for overriding colors:

  1. Using your main bundle. To override a color such as Accent01 color, simply create an Accent01.colorset with your wished value in your main bundle.

  2. Using a custom bundle. Set customResourceBundle in GiniBankConfiguration to use a custom bundle. Then, create an Accent01.colorset file with your desired value in the custom bundle to override the Accent01 color.

  3. Using customResourceProvider. This method enables the customization of resources to override the default Gini colors, impacting all screens. To implement this, set customResourceProvider in GiniBankConfiguration.

To ensure proper customization, set customResourceProvider before configuring any custom Gini button configurations, such as primaryButtonConfiguration, secondaryButtonConfiguration, transparentButtonConfiguration, cameraControlButtonConfiguration, and addPageButtonConfiguration.

Find the names of the color resources in the color palette (you can also view it in Figma here):

Images

Customizing of images is done via overriding of drawable resources.

If you want to override specific SDK images:

  1. Create an asset catalog for images called GiniImages.xcassets in your app.

  2. Add your own images to GiniImages.xcassets 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.

Typography

We provide global typography based on text appearance styles from UIFont.TextStyle.

Preview our typography and find the names of the style resources (you can also view it in Figma here):

To override them in your application, use GiniBankConfiguration.updateFont(_ font: UIFont, for textStyle: UIFont.TextStyle), for example:

    // If you need to scale your font, use our method `scaledFont()`.
    let configuration = GiniBankConfiguration.shared
    let customFontToBeScaled = UIFont.scaledFont(UIFont(name: "Avenir", size: 20) ?? UIFont.systemFont(ofSize: 7, weight: .regular), textStyle: .caption1)
    configuration.updateFont(customFontToBeScaled, for: .caption1)

    // If you would like to pass us already scaled font.
    let customScaledFont = UIFontMetrics(forTextStyle: .caption2).scaledFont(for: UIFont.systemFont(ofSize: 28))
    configuration.updateFont(customScaledFont, for: .caption2)

Text

Text customization is done via overriding of string resources. If you plan to use a custom name for localizable strings, set it in GiniBankConfiguration.localizedStringsTableName.

  • No labels