On This Page

{#jumplink-list}  
[Markdown](/docs/vas/en-us/pax-all-in-one/integration/all/na/pax-all-in-one/pax-aio-get-started-intro/pax-aio-customize-default-ui-intro.md)  
Filter  
FILTER BY TAG

Customizing the Default User Interface {#pax-aio-customize-default-ui-intro}
============================================================================

Use the information in this section to customize the Default UI so that it matches your brand's visual identity. The included screenshots highlight several style elements with labels for reference. Note that not all available style elements are shown. A detailed description of the style elements follows the screenshots.

#### Figure: {#pax-aio-customize-default-ui-intro_fig_hq1_3j4_5fc}

PAX All-in-One Default UI Style Elements  
![Example 1, PAX All-in-One Default UI style elements showing icons, labeled buttons,
colors, and text](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/pax-all-in-one/images/pax-aio-customize-ui1.png/jcr:content/renditions/original)

#### Figure: {#pax-aio-customize-default-ui-intro_fig_uz2_yj4_5fc}

PAX All-in-One Default UI Style Elements  
![Example 2, PAX All-in-One Default UI style elements showing icons, labeled buttons,
colors, and text](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/pax-all-in-one/images/pax-aio-customize-ui2.png/jcr:content/renditions/original)

#### Figure: {#pax-aio-customize-default-ui-intro_fig_trb_nk4_5fc}

PAX All-in-One Default UI Style Elements  
![Example 3, PAX All-in-One Default UI style elements showing icons, labeled buttons,
colors, and text](/content/dam/documentation/cybs/en-us/topics/payments-processing/card-processing/pax-all-in-one/images/pax-aio-customize-ui3.png/jcr:content/renditions/original) You can customize these style elements in the Default UI:

`animationStrokeColor`
:
Stroke or outline color for animations.

`approvedStateColor`
:
Indicator color that appears for the approved transaction badge and animation.

`cardPresentAnimationStrokeColor`
:
Overrides the `animationStrokeColor` style element in the card reader drawing on present-card animations. By default, this element is the same color as the `animationStrokeColor` style element.

`colorControlActivated`
:
Color applied to switch controls in their active state.

`colorOnPrimary`
:
Primary color that appears for the filled button text and animation details.

`colorOnSurface`
:
Color for text that appears over the content view, transaction status badges text, and outlined button stroke.

`colorPrimary`
:
Primary color that appears for the filled buttons and animations.

`colorSurface`
:
Background color that appears for the content view.

`colorSurfaceOnSurface`
:
Background color for displayed lists such as transaction history.

`contactlessStateActiveColor`
:
Active indicator color that appears when the contactless interface is ready or when a payment card is tapped on the device.
{#pax-aio-customize-default-ui-intro_dl_l5p_qj1_z1c}

`contactlessStateErrorColor`
:
Error indicator color that appears when a problem occurs when the device attempts to read a card on the contactless interface.

`contactlessStateInactiveColor`
:
Inactive indicator color that appears when the contactless interface is not active.

`declinedErrorStateColor`
:
Indicator color that appears for these elements:

    * Declined transaction badges and animation
    * Error transaction badges and animation
    * Error dialog boxes
    * Input field error messages
    {#pax-aio-customize-default-ui-intro_ul_pqr_1qj_bqb}

`notificationColor`
:
Alert notification color that appears with *Poor connection* and *Low battery* notifications. The default color is yellow.

`preAuthorizedStateColor`
:
Indicator color that appears for the pre-authorized transaction badge.

`smallComponentCornerSize`
:
Defines the corner radius of the buttons and transaction status badge. Set this element to `0dp` for square corners, `4dp` for slightly square corners (default), or `32dp` for round corners.

`toolBarLogo`
:
Logo that appears during transaction processing. The image must be rectangular, have the minimum dimensions of 144 x 36 pixels, and a 4:1 ratio.

Customize Style Elements Using a Theme {#pax-aio-customize-default-ui-change-style}
===================================================================================

Follow these steps to customize the Default UI style elements.

1. Introduce a new theme to your application that includes the `Theme.PayButton2` theme as a parent theme:

   ```
   <!-- Paybutton theme -->
   <style name="Theme.AppTheme.SampleTheme" parent="Theme.PayButton2">
       <!-- Text color -->
       <item name="colorOnSurface">@color/black</item>
    
       <!-- Background color -->
       <item name="colorSurface">@color/white</item>
    
       <!-- Contactless indicators -->
       <item name="contactlessStateActiveColor">@color/dui_green</item>
       <item name="contactlessStateInactiveColor">@color/dui_light_gray2</item>
       <item name="contactlessStateErrorColor">@color/dui_red</item>
    
       <!-- Transaction status -->
       <item name="approvedStateColor">@color/dui_green</item>
       <item name="declinedErrorStateColor">@color/dui_red</item> <!-- Also used for error messages and dialogs -->
       <item name="preAuthorizedStateColor">@color/dui_dark_gray</item>
    
       <!-- Filled buttons and animations primary color -->
       <item name="colorPrimary">@color/dui_blue</item>
    
       <!-- Used over the primary color for text on filled buttons and details on animations -->
       <item name="colorOnPrimary">@color/dui_white</item>
    
       <!-- Corner radius for the buttons and transaction status badges -->
       <item name="smallComponentCornerSize">4dp</item>
    
       <!-- Company logo -->
       <item name="toolBarLogo">@drawable/logo_140x36</item>
    
       <!-- Stroke color for icons and animations -->
       <item name="animationStrokeColor">@color/dui_black</item>
    
       <!-- Stroke color for terminal in present card animation. By default the same as animationStrokeColor -->
       <item name="cardPresentAnimationStrokeColor">@color/dui_black</item>
   </style>
   ```
2. Call one of these methods to set the theme:

   ```
   mposUi.themeRes = R.style.Theme_AppTheme_SampleTheme
   ```

Customize Style Elements Using a `UiConfiguration` Instance {#pax-aio-customize-default-ui-style-uiconfig}
==========================================================================================================

This customization feature enables you to dynamically change some Default UI style elements while the app is in use. These style elements can be customized using a `UiConfiguration` instance:

* `toolbarLogo`
* `colorScheme` (and its sub-elements)
* `cornerRadius`

{#pax-aio-customize-default-ui-style-uiconfig_ul_axl_lzd_1gc} Follow this step to customize Default User Interface style elements using a `UiConfiguration` instance:

1. Create the `UiConfiguration` instance.

   ```
       mposUi.configuration = UiConfiguration(
         // other UiConfiguration parameters
         toolbarLogo = "....",
         colorScheme = UiConfiguration.ColorScheme(
           colorPrimary = 0xFF1A1F71,
           colorOnPrimary = 0xFFFFFFFF,
           colorSurface = 0xFFFFFFFF,
           colorOnSurface = 0xFF1C1B1B,
         ),
         cornerRadius = UiConfiguration.CornerRadius.ROUND
       )
   ```

Enable Dark Mode in the Default User Interface {#pax-aio-customize-default-ui-dark-mode}
========================================================================================

When the device is in dark mode, the Default UI payment flow screens appear in darker contrasting colors than the colors used with the default screen settings (light mode). The Dark Mode feature might be used in low-light settings such as restaurants and bars. For more information about this setting, see the [Android documentation](https://developer.android.com/reference/androidx/appcompat/app/AppCompatDelegate#setDefaultNightMode(int) "").  
The default dark mode background color is dark gray (#121212). To change the background color to pure black (#000000), add a new `Theme.PayButton2` theme in the *value-night* folder.  
Follow this step to change dark mode behavior.

1. If you want to enforce light or dark mode across your application and Default UI, regardless of the phone's dark mode setting, use this Android method. This example enforces night mode.

   ```
   AppCompatDelegate.setDefaultNightMode(AppCompatDelegate.MODE_NIGHT_YES)
   ```

RELATED TO THIS PAGE