1.4. Android SDK UI Customization - Aigul-Irgalina/personal_test GitHub Wiki

UI Customization

Add style to your styles.xml:

<style name="MobileSdkStyle" parent="Theme.MobileSdk.Light">

Add to your manifest.xml with specified theme:

  • For card binding

    <activity
android:name=".sdk.scenario.binding.view.BindActivity"
android:launchMode="singleInstance"
android:screenOrientation="portrait"
android:theme="@style/MobileSdkStyle"
android:windowSoftInputMode="adjustResize" />

  • For payment

    <activity
android:name=".sdk.scenario.payment.view.PaymentActivity"
android:launchMode="singleInstance"
android:screenOrientation="portrait"
android:theme="@style/MobileSdkStyle"
android:windowSoftInputMode="adjustResize" />

There are 3 customization types are available:

  • Custom style (titles, subtitles, buttons, lists, checkbox, etc.)
  • Custom text colors
  • Custom images

Note: You can customize view by attributes in this style. Another attributes can be overridden by xml and their working capacity is not guaranteed.

All items to customize:

<!--Styles-->
<attr name="sdkTitleStyle" format="reference" />
<attr name="sdkSubtitleStyle" format="reference" />
<attr name="sdkButtonStyle" format="reference" />
<attr name="sdkTotalTextStyle" format="reference" />
<attr name="sdkTotalValueStyle" format="reference" />
<attr name="sdkOrderStyle" format="reference" />
<attr name="sdkPaymentListTitleStyle" format="reference" />
<attr name="sdkPaymentListItemStyle" format="reference" />
<attr name="sdkPaymentMessageSuccessStyle" format="reference" />
<attr name="sdkPaymentMessageDeclineStyle" format="reference" />
<attr name="sdkCheckboxStyle" format="reference" />
<!--Colors-->
<attr name="sdkStatusBarColor" format="color" />
<attr name="sdkBackgroundColor" format="color" />
<attr name="sdkBottomAreaColor" format="color" />
<attr name="sdkTitleColor" format="color" />
<attr name="sdkSubtitleColor" format="color" />
<attr name="sdkBindingSuccessDrawable" format="reference" />
<attr name="sdkBindingFailDrawable" format="reference" />

Here are some examples of SDK screens and corresponding items:

Customization 1      Customization 2      Customization 3

Number on a screenshot Item
1 sdkTitleStyle, sdkTitleColor
2 sdkSubtitleStyle, sdkSubtitleColor
3 sdkCheckboxStyle
4 sdkButtonStyle
5 sdkPaymentMessageSuccessStyle
6 sdkPaymentListTitleStyle
7 sdkPaymentListItemStyle
8 sdkTotalTextStyle
9 sdkTotalValueStyle
10 sdkOrderStyle

Here is the example of customization for a middle screen above:

<style name="myPaymentListTitleStyle">
 <item name="android:fontFamily">@font/inter_400_regular</item>
 <item name="android:textSize">@dimen/subhead_14</item>
 <item name="android:textColor">@color/color_payment_list_title</item>
</style>
 
<style name="myPaymentListItemStyle">
 <item name="android:fontFamily">@font/inter_400_regular</item>
 <item name="android:textSize">@dimen/subhead_14</item>
 <item name="android:textColor">@color/color_payment_list_item</item>
</style>
 
<style name="myPaymentMessageSuccessStyle">
 <item name="android:textColor">@color/color_payment_message</item>
 <item name="android:fontFamily">@font/inter_600_semi_bold</item>
 <item name="android:textSize">@dimen/headline_16</item>
 <item name="android:textStyle">bold</item>
 <item name="android:drawableStart">@drawable/ic_success_small</item>
</style>
 
<style name="myPaymentMessageDeclineStyle">
 <item name="android:textColor">@color/color_payment_message</item>
 <item name="android:fontFamily">@font/inter_600_semi_bold</item>
 <item name="android:textSize">@dimen/headline_16</item>
 <item name="android:textStyle">bold</item>
 <item name="android:drawableStart">@drawable/ic_fail_small</item>
</style>
 
<style name="AppTheme" parent="Theme.MobileSdk.Light">
 <item name="sdkPaymentListTitleStyle">@string/myPaymentListTitleStyle</item>
 <item name="sdkPaymentListItemStyle">@style/myPaymentListItemStyle</item>
 <item name="sdkPaymentMessageSuccessStyle">@style/myPaymentMessageSuccessStyle</item>
 <item name="sdkPaymentMessageDeclineStyle">@style/myPaymentMessageDeclineStyle</item>
</style>
⚠️ **GitHub.com Fallback** ⚠️