Search…
⌃K
Links

Frame customisation

​
Good to know: kevin. 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:
Kevin.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>