Customizing the default UI
The Android UI allows our customers to change not only colors and texts, but corners radius, fonts, and more.
Prompts
Miscellaneous
The Andoid SDK offers multiple customization options for UI and elements.
Round prompt button corners
If your app's UI has a different default corner radius and you want our UI to look alike, adjust this dimens resource value:
<dimen name="glance_dialog_button_radius">5dp</dimen>
Logo visibility
By default, the "POWERED BY GLANCE" text is always shown at the bottom of the prompt. However, this text can be hidden by changing this bool resource value to false:
<bool name="glance_powered_by">true</bool>
Terms and conditions
The default "Terms and Conditions" link text can be modified to provide more clarity to the customer by updating the below string resource values. In the following example, the values 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 each color and size resource`s id:
<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).