On This Page

Customize Style Elements Using a Theme

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