Custom UI
NOTE: If you want to use your own fully customized UI, you must disable the Default UI, as Default UI is on by default. For more details, check the [Building Your own UI](https://help.glance.net/mobile-app-sharing/getting-started/android/android_build_your_own_ui/) page.
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.
-
To set various colors used by the Default UI, add them to your
res/values/colors.xml
file. -
To modify the UI text, update your application’s
res/values/strings.xml
file. -
To modify the UI text sizes, update your application’s
res/values/dimens.xml
file. -
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. -
To set the terms URL, use this method:
Visitor.defaultUI(boolean enabled, String termsUrl)
. Alternatively contact your Glance representative to set the terms URL.
- 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
![the default dialog colors.](https://help.glance.net/img/default_ui.jpg)
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
![the default session key colors.](https://help.glance.net/img/default_ui2.jpg)
Agent Viewer Colors
![the default agent viewer colors.](https://help.glance.net/img/default_ui3.jpg)
Voice Call Button Colors
![The default end button colors.](https://help.glance.net/img/default_ui4.jpg)
Font sizes
![the default dialog colors.](https://help.glance.net/img/default_ui5.jpg)
![the default dialog colors.](https://help.glance.net/img/default_ui6.jpg)
![the default dialog colors.](https://help.glance.net/img/default_ui7.jpg)
![the default dialog colors.](https://help.glance.net/img/video_dialog_help2.jpg)
![the default dialog colors.](https://help.glance.net/img/presence_dialog.png)
![the default dialog colors.](https://help.glance.net/img/presence_dialog2.png)