UI Customization

Good to know: kevin. SDK is is fully customizable. Every UI element can be adjusted according to your app's design - colors, fonts and most of the element styles.

To start with, override kevin. theme in app's themes.xml:

themes.xml

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

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

</resources>

Set global kevin. theme to your custom one:

Kevin.setTheme(R.style.CustomKevinTheme)

Base kevin. theme uses material theme for its base. You can see in below what material theme attributes are used for. Our custom attribute usage can be seen here.

Start customizing theme:

themes.xml

<!-- Customise general properties -->
<style name="CustomKevinTheme" parent="Theme.Kevin.Base">
    <item name="colorPrimary">#5d80fe</item>
    <item name="colorPrimaryVariant">#0b1e42</item>
    <item name="colorOnPrimary">#ffffff</item>

    <item name="colorSecondary">#5d80fe</item>
    <item name="colorSecondaryVariant">#0b1e42</item>
    <item name="colorOnSecondary">#ffffff</item>

    <item name="colorError">#ff3b30</item>
    <item name="colorOnError">#ffffff</item>

    <!-- This changes color of elements that are on background. For ex. bank background  -->
    <item name="colorSurface">#ffffff</item>
    <item name="colorOnSurface">#000000</item>

    <!-- This changes color of primary text. Window titles, text inputs, list items -->
    <!-- This changes color of less important texts. Subtitles, labels -->
    <item name="android:textColorPrimary">#000000</item>
    <item name="android:textColorSecondary">#7c8894</item>

    <!-- This changes color for window backgrounds -->
    <item name="android:colorBackground">#f2f2f7</item>
    <item name="colorOnBackground">#000000</item>

    <!-- This color is used for creating ripples -->
    <item name="colorControlHighlight">#5d80fe</item>
    <!-- This color is used to indicate selected items in lists -->
    <item name="colorControlActivated">#e6e7ee</item>

    <item name="android:windowAnimationStyle">?kevinWindowTransitionStyle</item>

    <item name="bottomSheetDialogTheme">@style/Theme.Kevin.BottomSheet.Base</item>

    <item name="android:navigationBarColor">#FFFFFF</item>
    <item name="android:statusBarColor">#FFFFFF</item>

    <item name="kevinSheetHandleColor">#bcc4cc</item>

    <item name="kevinWindowTitleTextStyle">@style/KevinTitleTextStyle</item>
    <item name="kevinWindowSubtitleTextStyle">@style/KevinSubtitleTextStyle</item>
    <item name="kevinModalTitleTextStyle">@style/KevinModalTitleTextStyle</item>
    <item name="kevinHeaderTextStyle">@style/KevinHeaderTextStyle</item>
    <item name="kevinItemTitleTextStyle">@style/KevinItemTitleTextStyle</item>

    <item name="kevinPrimaryButtonStyle">@style/KevinPrimaryButtonStyle</item>
    <item name="kevinToolbarStyle">@style/KevinToolbarTheme</item>
    <item name="kevinWindowTransitionStyle">@style/KevinWindowTransition</item>
    <item name="kevinSelectionViewStyle">@style/KevinSelectionViewStyle</item>
    <item name="kevinProgressViewStyle">@style/KevinProgressViewStyle</item>
    <item name="kevinHeaderStyle">@style/KevinHeaderStyle</item>
    <item name="kevinBankListItemContainerStyle">@style/KevinBankListItemStyle</item>
    <item name="kevinCountryListItemContainerStyle">@style/KevinCountryContainerStyle</item>

    <item name="kevinMarginStart">16dp</item>
    <item name="kevinMarginEnd">16dp</item>
    <item name="kevinBankListItemCornerRadius">10dp</item>
    <item name="kevinCountryListCornerRadius">10dp</item>

    <item name="kevinOverrideCountryBackground">false</item>
</style>

<!-- Customise Toolbar -->
<style name="KevinToolbarTheme" parent="Kevin.Toolbar">
    <item name="navigationIcon">@drawable/ic_back</item>
    <item name="android:background">#FFFFFF</item>
    <item name="titleTextColor">#1A1A1A</item>
    <item name="titleTextAppearance">@style/KevinToolTextBarStyle</item>
    <item name="fontFamily">@font/custom_font</item>
</style>

<!-- Customise Toolbar text style -->
<style name="KevinToolTextBarStyle" parent="TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:ellipsize">end</item>
    <item name="fontFamily">@font/custom_font</item>
    <item name="android:maxLines">1</item>
    <item name="android:textSize">17sp</item>
    <item name="android:textAlignment">viewStart</item>
    <item name="android:textColor">#1A1A1A</item>
</style>

<!-- Customise SDK buttons -->
<style name="KevinPrimaryButtonStyle" parent="Widget.MaterialComponents.Button">
    <item name="android:gravity">center</item>
    <item name="cornerRadius">32dp</item>
    <item name="android:minHeight">64dp</item>
    <item name="android:textAllCaps">false</item>
    <item name="android:layout_width">wrap_content</item>
    <item name="android:maxWidth">340dp</item>
    <item name="android:textSize">14sp</item>
    <item name="android:stateListAnimator">@animator/custom_click_animator</item>
    <item name="android:textColor">#FFFFFF</item>
    <item name="rippleColor">#0B1E42</item>
    <item name="fontFamily">@font/custom_font</item>
    <item name="android:backgroundTint">#0B1E42</item>
    <item name="android:textAppearance">@android:style/TextAppearance.Material.Widget.Button
    </item>
</style>

<style name="KevinTextInputLayoutStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:layout_marginStart">16dp</item>
    <item name="android:layout_marginEnd">16dp</item>
    <item name="minHeight">48dp</item>
    <item name="boxCornerRadiusBottomEnd">8dp</item>
    <item name="boxCornerRadiusBottomStart">8dp</item>
    <item name="boxCornerRadiusTopEnd">8dp</item>
    <item name="boxCornerRadiusTopStart">8dp</item>
    <item name="hintEnabled">false</item>
    <item name="boxStrokeWidth">1dp</item>
    <item name="boxBackgroundColor">?colorSurface</item>
    <item name="boxStrokeColor">#5d80fe</item>
    <item name="boxStrokeErrorColor">?colorError</item>
    <item name="errorTextAppearance">@style/KevinErrorTextStyle</item>
    <item name="errorIconDrawable">@null</item>
    <item name="endIconMode">clear_text</item>
</style>

<style name="KevinTextInputStyle" parent="Widget.MaterialComponents.TextInputLayout.OutlinedBox">
    <item name="android:textAppearance">@style/KevinTextInputStyle</item>
    <item name="android:textColor">#000000</item>
</style>

<!-- Customise SDK launch animation -->
<style name="KevinWindowTransition" parent="Kevin.Window.Transition">
    <item name="android:activityOpenEnterAnimation">@anim/slide_in</item>
    <item name="android:activityOpenExitAnimation">@anim/fade_out</item>
    <item name="android:activityCloseEnterAnimation">@anim/fade_in</item>
    <item name="android:activityCloseExitAnimation">@anim/slide_out</item>
</style>

<!-- Customise SDK selected country view -->
<style name="KevinSelectionViewStyle" parent="Kevin.SelectionView">
    <item name="android:background">@drawable/selection_view_background</item>
    <item name="android:textAppearance">@style/TitleTextAppearance</item>
    <item name="android:layout_marginStart">?kevinMarginStart</item>
    <item name="android:layout_marginEnd">?kevinMarginEnd</item>
</style>

<!-- Customise SDK bank selection list item -->
<style name="KevinBankListItemStyle" parent="android:Widget">
    <item name="android:background">@drawable/custom_bank_list_item_background</item>
</style>

<!-- Customise SDK country selection list item -->
<style name="KevinCountryContainerStyle" parent="android:Widget">
    <item name="android:layout_marginStart">50dp</item>
    <item name="android:layout_marginEnd">50dp</item>
</style>

<!-- Example how text styles can be customized -->
<style name="KevinHeaderTextStyle" parent="@android:style/TextAppearance">
    <item name="android:textSize">14sp</item>
    <item name="fontFamily">@font/custom_font</item>
    <item name="android:textColor">#1A1A1A</item>
    <item name="android:gravity">start</item>
    <item name="android:textStyle">normal</item>
    <item name="textAllCaps">true</item>
</style>

Bottom Sheet

kevin. SDK provides support for edge-to-edge UI, offering the flexibility to customize the bottom sheet, so you can choose if you want to draw behind system bars or not.

Refer to the code snippet below for guidance on how to customize the bottom sheet:

themes.xml

<style name="CustomKevinTheme" parent="Theme.Kevin.Base">
    <item name="bottomSheetDialogTheme">@style/KevinBottomSheetTheme</item>
</style>

<style name="KevinBottomSheetTheme" parent="Theme.Kevin.BottomSheet.Base">
    <item name="colorPrimary">#5d80fe</item>
    <item name="colorPrimaryVariant">#0b1e42</item>
    <item name="colorOnPrimary">#ffffff</item>

    <item name="colorSecondary">#5d80fe</item>
    <item name="colorSecondaryVariant">#0b1e42</item>
    <item name="colorOnSecondary">#ffffff</item>

    <item name="colorError">#ff3b30</item>
    <item name="colorOnError">#ffffff</item>

    <!-- This changes color of elements that are on background. For ex. bank background  -->
    <item name="colorSurface">#ffffff</item>
    <item name="colorOnSurface">#000000</item>

    <!-- This color is used for creating ripples -->
    <item name="colorControlHighlight">#5d80fe</item>
    
    <!-- This color is used to indicate selected items in lists -->
    <item name="colorControlActivated">#e6e7ee</item>

    <!-- Edge to edge/window/system bars parameters --!>
    <item name="android:windowIsFloating">false</item>
    <item name="android:navigationBarColor">#ffffff</item>
    <item name="enableEdgeToEdge">true</item>
    <item name="paddingBottomSystemWindowInsets">false</item>
    
    <!-- snackbarStyle style is required to set elevation on snackbar to make it visible on bottom sheet -->
    <item name="snackbarStyle">@style/Kevin.BottomSheet.Snackbar</item>
    
    <item name="bottomSheetStyle">@style/BottomSheetStyle</item>
</style>

<!-- BottomSheet style -->
<style name="BottomSheetStyle" parent="Widget.MaterialComponents.BottomSheet">
    <item name="shapeAppearanceOverlay">@style/BottomSheetShapeStyle</item>
    <!-- This changes background of bottom sheet -->
    <item name="backgroundTint">#f2f2f7</item>
</style>
    
<!-- BottomSheet shape styling -->
<style name="BottomSheetShapeStyle">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSizeTopRight">11dp</item>
    <item name="cornerSizeTopLeft">11dp</item>
    <item name="cornerSizeBottomRight">0dp</item>
    <item name="cornerSizeBottomLeft">0dp</item>
</style>