Frame customisation

Good to know: kevin. mobile SDK is is fully customisable. Everything can be changed according to your app design - colours, fonts and most of the element styles.

Override kevin. theme in app's themes.xml:

themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="CustomKevinPayTheme" parent="Theme.Kevin.Pay.Base">
        <!-- This is where the customisations will go -->
    </style>

</resources>

Set global kevin. theme to your custom one:

KevinPay.setTheme(R.style.CustomKevinTheme)

Start customising theme:

themes.xml

<style name="Theme.Kevin.Pay.23" parent="Theme.MaterialComponents.DayNight.NoActionBar">
    <item name="colorPrimary">#5D80FE</item>
    <item name="colorPrimaryVariant">#5D80FE</item>
    <item name="colorOnPrimary">#FFFFFF</item>

    <item name="colorSecondary">#5D80FE</item>
    <item name="colorSecondaryVariant">#5D80FE</item>
    <item name="colorOnSecondary">#FFFFFF</item>

    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="android:windowLightStatusBar">true</item>

    <!--    Component attributes    -->
    <item name="kevinPayPrimaryButtonStyle">@style/Button.Primary</item>
    <item name="kevinPayLoadingViewStyle">@style/Kevin.Pay.LoadingView</item>

    <!--    Typography attributes    -->
    <item name="kevinPayTitleTextStyle">@style/Text.Headline3</item>
    <item name="kevinPaySubtitleTextStyle">@style/Text.Title2</item>
    <item name="kevinPayAmountTextStyle">@style/Text.Headline1</item>
    <item name="kevinPayLabelTextStyle">@style/Text.Title1</item>

    <!--    Color attributes    -->
    <item name="kevinPayPrimaryBackgroundColor">#F2F2F7</item>
    <item name="kevinPayPrimaryTextColor">#000000</item>
    
    <!--    Other attributes    -->
    <item name="kevinPayModalStyleEnabled">true</item>
    <item name="kevinPayTapToPayIcon">@drawable/ic_tap_to_pay</item>
</style>

Add your custom styles:

styles.xml

<style name="Kevin.Pay.LoadingView" parent="android:Widget">
    <item name="idleColor">#5D80FE</item>
    <item name="successColor">#34C759</item>
    <item name="errorColor">#FF3B30</item>
</style>

<style name="Button.Primary" parent="Widget.MaterialComponents.Button">
    <item name="cornerRadius">8dp</item>
    <item name="android:textSize">17sp</item>
    <item name="fontFamily">@font/sf_pro_text_semi_bold</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="android:letterSpacing">-0.022</item>
    <item name="backgroundTint">#5D80FE</item>
</style>

<style name="Text.Headline1" parent="@android:style/TextAppearance">
    <item name="android:textSize">34sp</item>
    <item name="fontFamily">@font/circular_std_bold</item>
    <item name="android:textColor">#5D80FE</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="Text.Headline3" parent="@android:style/TextAppearance">
    <item name="android:textSize">22sp</item>
    <item name="fontFamily">@font/circular_std_bold</item>
    <item name="android:textColor">#000000</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="Text.Title1" parent="@android:style/TextAppearance">
    <item name="android:textSize">16sp</item>
    <item name="fontFamily">@font/sf_pro_text_medium</item>
    <item name="android:textColor">#000000</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">normal</item>
</style>

<style name="Text.Title2" parent="@android:style/TextAppearance">
    <item name="android:textSize">16sp</item>
    <item name="fontFamily">@font/sf_pro_text_regular</item>
    <item name="android:textColor">#7C8894</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">normal</item>
</style>