UI Customisations

Search…
UI Customisations
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
1
<?xml version="1.0" encoding="utf-8"?>
2
<resources>
3
​
4
    <style name="CustomKevinTheme" parent="Theme.Kevin.Base">
5
        <!-- This is where the customisations will go -->
6
    </style>
7
​
8
</resources>
Copied!
Set global kevin. theme to your custom one:
1
Kevin.setTheme(R.style.CustomKevinTheme)
Copied!
Start customising theme:
Base kevin. theme uses material theme for its base. You can see in comments what material theme attributes are used for. Our custom attribute usage can be seen here.
themes.xml
1
<!-- Customise general properties -->
2
<style name="CustomKevinTheme" parent="Theme.Kevin.Base">
3
    <item name="colorPrimary">#5d80fe</item>
4
    <item name="colorPrimaryVariant">#0b1e42</item>
5
    <item name="colorOnPrimary">#ffffff</item>
6
​
7
    <item name="colorSecondary">#5d80fe</item>
8
    <item name="colorSecondaryVariant">#0b1e42</item>
9
    <item name="colorOnSecondary">#ffffff</item>
10
​
11
    <item name="colorError">#ff3b30</item>
12
    <item name="colorOnError">#ffffff</item>
13
​
14
    <!-- This changes color of elements that are on background. For ex. bank background  -->
15
    <item name="colorSurface">#ffffff</item>
16
    <item name="colorOnSurface">#000000</item>
17
​
18
    <!-- This changes color of primary text. Window titles, text inputs, list items -->
19
    <!-- This changes color of less important texts. Subtitles, labels -->
20
    <item name="android:textColorPrimary">#000000</item>
21
    <item name="android:textColorSecondary">#7c8894</item>
22
​
23
    <!-- This changes color for window backgrounds -->
24
    <item name="android:colorBackground">#f2f2f7</item>
25
    <item name="colorOnBackground">#000000</item>
26
​
27
    <!-- This color is used for creating ripples -->
28
    <item name="colorControlHighlight">#5d80fe</item>
29
    <!-- This color is used to indicate selected items in lists -->
30
    <item name="colorControlActivated">#e6e7ee</item>
31
​
32
    <item name="android:windowAnimationStyle">?kevinWindowTransitionStyle</item>
33
​
34
    <item name="bottomSheetDialogTheme">@style/Theme.Kevin.BottomSheet.Base</item>
35
​
36
    <item name="android:navigationBarColor">#FFFFFF</item>
37
    <item name="android:statusBarColor">#FFFFFF</item>
38
​
39
    <item name="kevinSheetHandleColor">#bcc4cc</item>
40
​
41
    <item name="kevinWindowTitleTextStyle">@style/KevinTitleTextStyle</item>
42
    <item name="kevinWindowSubtitleTextStyle">@style/KevinSubtitleTextStyle</item>
43
    <item name="kevinModalTitleTextStyle">@style/KevinModalTitleTextStyle</item>
44
    <item name="kevinInputLabelTextStyle">@style/KevinLabelTextStyle</item>
45
    <item name="kevinHeaderTextStyle">@style/KevinHeaderTextStyle</item>
46
    <item name="kevinItemTitleTextStyle">@style/KevinItemTitleTextStyle</item>
47
    <item name="kevinTextAmount">@style/KevinAmountTextStyle</item>
48
​
49
    <item name="kevinPrimaryButtonStyle">@style/KevinPrimaryButtonStyle</item>
50
    <item name="kevinSecondaryButtonStyle">@style/KevinSecondaryButtonStyle</item>
51
    <item name="kevinToolbarStyle">@style/KevinToolbarTheme</item>
52
    <item name="kevinTextInputContainerStyle">@style/KevinTextInputLayoutStyle</item>
53
    <item name="kevinTextInputStyle">@style/KevinTextInputStyle</item>
54
    <item name="kevinWindowTransitionStyle">@style/KevinWindowTransition</item>
55
    <item name="kevinSelectionViewStyle">@style/KevinSelectionViewStyle</item>
56
    <item name="kevinProgressViewStyle">@style/KevinProgressViewStyle</item>
57
    <item name="kevinHeaderStyle">@style/KevinHeaderStyle</item>
58
    <item name="kevinBankListItemContainerStyle">@style/KevinBankListItemStyle</item>
59
    <item name="kevinCountryListItemContainerStyle">@style/KevinCountryContainerStyle</item>
60
​
61
    <item name="kevinMarginStart">16dp</item>
62
    <item name="kevinMarginEnd">16dp</item>
63
    <item name="kevinBankListItemCornerRadius">10dp</item>
64
    <item name="kevinCountryListCornerRadius">10dp</item>
65
​
66
    <item name="kevinOverrideCountryBackground">false</item>
67
</style>
68
​
69
<!-- Customise Toolbar -->
70
<style name="KevinToolbarTheme" parent="Kevin.Toolbar">
71
    <item name="navigationIcon">@drawable/ic_back</item>
72
    <item name="android:background">#FFFFFF</item>
73
    <item name="titleTextColor">#1A1A1A</item>
74
    <item name="titleTextAppearance">@style/KevinToolTextBarStyle</item>
75
    <item name="fontFamily">@font/custom_font</item>
76
</style>
77
​
78
<!-- Customise Toolbar text style -->
79
<style name="KevinToolTextBarStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
80
    <item name="android:ellipsize">end</item>
81
    <item name="fontFamily">@font/custom_font</item>
82
    <item name="android:maxLines">1</item>
83
    <item name="android:textSize">17sp</item>
84
    <item name="android:textAlignment">viewStart</item>
85
    <item name="android:textColor">#1A1A1A</item>
86
</style>
87
​
88
<!-- Customise SDK buttons -->
89
<style name="KevinPrimaryButtonStyle" parent="Widget.MaterialComponents.Button">
90
    <item name="android:gravity">center</item>
91
    <item name="cornerRadius">32dp</item>
92
    <item name="android:minHeight">64dp</item>
93
    <item name="android:textAllCaps">false</item>
94
    <item name="android:layout_width">wrap_content</item>
95
    <item name="android:maxWidth">340dp</item>
96
    <item name="android:textSize">14sp</item>
97
    <item name="android:stateListAnimator">@animator/custom_click_animator</item>
98
    <item name="android:textColor">#FFFFFF</item>
99
    <item name="rippleColor">#0B1E42</item>
100
    <item name="fontFamily">@font/custom_font</item>
101
    <item name="android:backgroundTint">#0B1E42</item>
102
    <item name="android:textAppearance">@android:style/TextAppearance.Material.Widget.Button
103
    </item>
104
</style>
105
​
106
<style name="KevinTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
107
    <item name="android:layout_marginStart">16dp</item>
108
    <item name="android:layout_marginEnd">16dp</item>
109
    <item name="minHeight">48dp</item>
110
    <item name="boxCornerRadiusBottomEnd">8dp</item>
111
    <item name="boxCornerRadiusBottomStart">8dp</item>
112
    <item name="boxCornerRadiusTopEnd">8dp</item>
113
    <item name="boxCornerRadiusTopStart">8dp</item>
114
    <item name="hintEnabled">false</item>
115
    <item name="boxStrokeWidth">1dp</item>
116
    <item name="boxBackgroundColor">?colorSurface</item>
117
    <item name="boxStrokeColor">#5d80fe</item>
118
    <item name="boxStrokeErrorColor">?colorError</item>
119
    <item name="errorTextAppearance">@style/KevinErrorTextStyle</item>
120
    <item name="errorIconDrawable">@null</item>
121
    <item name="endIconMode">clear_text</item>
122
</style>
123
​
124
<style name="KevinTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
125
    <item name="android:textAppearance">@style/KevinTextInputStyle</item>
126
    <item name="android:textColor">#000000</item>
127
</style>
128
​
129
<!-- Customise SDK launch animation -->
130
<style name="KevinWindowTransition" parent="Kevin.Window.Transition">
131
    <item name="android:activityOpenEnterAnimation">@anim/slide_in</item>
132
    <item name="android:activityOpenExitAnimation">@anim/fade_out</item>
133
    <item name="android:activityCloseEnterAnimation">@anim/fade_in</item>
134
    <item name="android:activityCloseExitAnimation">@anim/slide_out</item>
135
</style>
136
​
137
<!-- Customise SDK selection view -->
138
<style name="KevinSelectionViewStyle" parent="Kevin.SelectionView">
139
    <item name="android:background">@drawable/selection_view_background</item>
140
    <item name="android:textAppearance">@style/TitleTextAppearance</item>
141
    <item name="android:layout_marginStart">?kevinMarginStart</item>
142
    <item name="android:layout_marginEnd">?kevinMarginEnd</item>
143
</style>
144
​
145
<!-- Example how text styles can be customized -->
146
<style name="KevinHeaderTextStyle" parent="@android:style/TextAppearance">
147
    <item name="android:textSize">14sp</item>
148
    <item name="fontFamily">@font/custom_font</item>
149
    <item name="android:textColor">#1A1A1A</item>
150
    <item name="android:gravity">start</item>
151
    <item name="android:textStyle">normal</item>
152
    <item name="textAllCaps">true</item>
153
</style>
Copied!
If you want to, you can also customise the SDK bottom sheet. kevin. SDK supports edge to edge UI, so you can choose if you want to draw behind system bars or not:
themes.xml
1
<style name="CustomKevinTheme" parent="Theme.Kevin.Base">
2
    <item name="bottomSheetDialogTheme">@style/KevinBottomSheetTheme</item>
3
</style>
4
​
5
<style name="KevinBottomSheetTheme" parent="Theme.Kevin.BottomSheet.Base">
6
    <item name="colorPrimary">#5d80fe</item>
7
    <item name="colorPrimaryVariant">#0b1e42</item>
8
    <item name="colorOnPrimary">#ffffff</item>
9
​
10
    <item name="colorSecondary">#5d80fe</item>
11
    <item name="colorSecondaryVariant">#0b1e42</item>
12
    <item name="colorOnSecondary">#ffffff</item>
13
​
14
    <item name="colorError">#ff3b30</item>
15
    <item name="colorOnError">#ffffff</item>
16
​
17
    <!-- This changes color of elements that are on background. For ex. bank background  -->
18
    <item name="colorSurface">#ffffff</item>
19
    <item name="colorOnSurface">#000000</item>
20
​
21
    <!-- This color is used for creating ripples -->
22
    <item name="colorControlHighlight">#5d80fe</item>
23
    <!-- This color is used to indicate selected items in lists -->
24
    <item name="colorControlActivated">#e6e7ee</item>
25
​
26
    <item name="bottomSheetStyle">@style/BottomSheetStyle</item>
27
    <!-- This is needed to set elevation on snackbar to make it visible on bottom sheet -->
28
    <item name="snackbarStyle">@style/Kevin.BottomSheet.Snackbar</item>
29
    <item name="android:windowIsFloating">false</item>
30
    <item name="android:navigationBarColor">#ffffff</item>
31
    <item name="enableEdgeToEdge">true</item>
32
    <item name="paddingBottomSystemWindowInsets">false</item>
33
</style>
34
​
35
<!-- BottomSheet style -->
36
<style name="BottomSheetStyle" parent="Widget.MaterialComponents.BottomSheet">
37
    <item name="shapeAppearanceOverlay">@style/BottomSheetShapeStyle</item>
38
    <!-- This changes background of bottom sheet -->
39
    <item name="backgroundTint">#f2f2f7</item>
40
</style>
41
    
42
<!-- BottomSheet shape styling -->
43
<style name="BottomSheetShapeStyle">
44
    <item name="cornerFamily">rounded</item>
45
    <item name="cornerSizeTopRight">11dp</item>
46
    <item name="cornerSizeTopLeft">11dp</item>
47
    <item name="cornerSizeBottomRight">0dp</item>
48
    <item name="cornerSizeBottomLeft">0dp</item>
49
</style>
Copied!
Margin control:
Margins can be controlled in 2 ways:
Using kevinMarginStart and kevinMarginEnd. These attributes control margins of views that are touching screen sides, like buttons, title, list items.
Most individual components also accept layout_marginStart and layout_marginEnd attributes and their margins can be controlled individually.
Android - Previous
Payment Initiation
Kevin theme attributes
Last modified 3mo ago
Copy link
Contents
Margin control: