Customizing the Default UI
NOTE: The following information is for the 6.1 version of the SDK.
The Android UI allows our customers to change not only colors and text, but fonts, button corner radius, and more.
Prompts
Miscellaneous
The Android SDK offers multiple customization options for UI and elements.
Round Button Corners
If your app's UI has a different default corner radius and you want the UI to match, adjust this dimen resource value:
<dimen name="glance_dialog_button_radius">5dp</dimen>
Terms and Conditions
The default Terms and Conditions link text can be modified to provide more clarity to the customer by updating the string values. In the following example, the strings have been updated to say "By tapping Accept you agree to our Terms and Conditions".
<string name="glance_terms_and_condition_statement">By tapping \"Accept\", you agree to our</string>
<string name="glance_terms_and_condition_link_label">Terms & Conditions</string>
NOTE: The first line of this block can be left empty.
Setting Different Fonts for Different Text Views
You can change fonts within prompts by overriding the font-family property on our styles. This allows you to change the font, text color, and size. Please find our styles list below:
<style name="GlanceDialogHeadingTextStyle">
<item name="android:fontFamily">@font/YOUR_FONT</item>
<item name="android:textSize">@dimen/glance_dialog_heading_text_size</item>
<item name="android:textColor">@color/glance_session_ui_dialog_heading_text_color</item>
</style>
<style name="GlanceDialogBodyTextStyle">
<item name="android:fontFamily">@font/YOUR_FONT</item>
<item name="android:textSize">@dimen/glance_dialog_body_text_size</item>
<item name="android:textColor">@color/glance_session_ui_dialog_body_text_color</item>
</style>
<style name="GlanceDialogTermsTextStyle">
<item name="android:fontFamily">@font/YOUR_FONT</item>
<item name="android:textSize">@dimen/glance_dialog_terms_text_size</item>
<item name="android:textColor">@color/glance_session_ui_dialog_body_text_color</item>
</style>
<style name="GlanceDialogBrandTextStyle">
<item name="android:fontFamily">@font/YOUR_FONT</item>
<item name="android:textSize">@dimen/glance_dialog_brand_text_size</item>
<item name="android:textColor">@color/glance_session_ui_dialog_brand_text_color</item>
<item name="android:textAllCaps">true</item>
</style>
<style name="GlanceDialogSessionCodeTextStyle">
<item name="android:fontFamily">@font/YOUR_FONT</item>
<item name="android:textSize">@dimen/glance_dialog_session_code_text_size</item>
<item name="android:textColor">@color/glance_session_ui_dialog_session_code_text_color</item>
</style>
<style name="GlanceDialogButtonTextStyle" parent="Widget.AppCompat.Button">
<item name="android:fontFamily">@font/YOUR_FONT</item>
<item name="android:textSize">@dimen/glance_dialog_button_text_size</item>
<item name="android:textColor">@color/glance_session_ui_dialog_button_text_color</item>
<item name="android:textAllCaps">false</item>
</style>
The following are the default values for text colors and sizes:
<color name="glance_session_ui_dialog_heading_text_color">#0B3885</color>
<color name="glance_session_ui_dialog_body_text_color">#000000</color>
<color name="glance_session_ui_dialog_brand_text_color">#000000</color>
<color name="glance_session_ui_dialog_terms_text_color">#0B3885</color>
<color name="glance_session_ui_dialog_session_code_text_color">#FFFFFF</color>
<color name="glance_session_ui_dialog_button_text_color">#FFFFFF</color>
<dimen name="glance_dialog_heading_text_size">14dp</dimen>
<dimen name="glance_dialog_body_text_size">14dp</dimen>
<dimen name="glance_dialog_terms_text_size">12dp</dimen>
<dimen name="glance_dialog_brand_text_size">7dp</dimen>
<dimen name="glance_dialog_session_code_text_size">24sp</dimen>
<dimen name="glance_dialog_button_text_size">14dp</dimen>
NOTE: Android does not allow us to override just a specific style property, so the original properties must be kept if they are not being changed (like the *windowBackground* property in this case).