Custom UI

Customize the Default User Interface

You can modify the color, interface text, and images provided in the default interface. You can also choose to implement your own interface.

1. To set various colors used by the Default UI, add them to your res/values/colors.xml file.

2. To modify the UI text, update your application’s res/values/strings.xml file.

3. To modify the UI text sizes, update your application’s res/values/dimens.xml file.

4. To customize images, include your drawable resources (for your information, ours are vector XML drawables) with the same name within the res/drawable folder. You can find each icon reference name in the images along this doc.

5. To set the terms URL, use this method: Visitor.defaultUI(boolean enabled, String termsUrl). Alternatively contact your Glance representative to set the terms URL.

6. To implement your own UI use: Visitor.defaultUI(false); Visitor.setCustomSessionViewId(R.id.my_glance_agent_viewer);.

Your custom view will most likely override onSizeChanged and dispatchDraw.

Default User Interface Details

Dialog Colors and Icons

Terms and Conditions colors

This is how we are currently using HTML format to buil the Terms and Conditions string:

<string name="GLANCE_DEFAULT_UI_START_DIALOG_TERMS_TEXT">By clicking <b>Accept</b>, you agree to our\n<u><font color='#177340'>Terms and Conditions</font></u> and will be connected to an agent.</string>

So, we basically use the color res @color/DialogTextColor as the whole string color default and change only the inner text “Terms and Conditions” to be painted with #177340. You can use the same approach to change it too.

Session Key Colors

Agent Viewer Colors

Voice Call Button Colors

Font sizes